JavaScript Console

What You’ll Learn

The console object is your first debugging toolkit in JavaScript. This hub links to 14 method and 1 property tutorials covering logging, grouped output, tables, timers, assertions, stack traces, and heap stats.

Introduction

JavaScript console methods help you inspect values, trace bugs, and understand program flow during development. In the browser, open DevTools with F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac), then switch to the Console tab to see output.

What Are Console Methods?

They are functions on the global console object. Each method formats output differently—some add icons or colors, others build tables or measure elapsed time. They are meant for developers, not end users; strip or guard verbose logging before shipping to production.

Browser vs Node.js

• Browser — logs appear in DevTools with clickable links to source lines.
• Node.js — logs print to the terminal; most core methods behave similarly.
• Production — prefer structured logging libraries or feature flags instead of raw console.log everywhere.

What Are Console Properties?

Unlike methods, properties are values you read directly on console without calling them. The most common example is console.memory in Chromium browsers, which exposes JavaScript heap usage (usedJSHeapSize, totalJSHeapSize, jsHeapSizeLimit). Properties are read-only snapshots—use methods like console.log(console.memory) to inspect them.

📝 Syntax

Call any method on the console object:

console.log("Hello, debugger!");
console.warn("Low disk space");
console.error("Request failed", statusCode);

Method groups

When to Use Which Methods

• Quick inspection — console.log() for variables and intermediate results.
• User-visible issues — console.warn() for recoverable problems.
• Failures — console.error() inside catch blocks or API error handlers.
• Lists of records — console.table() for arrays of objects.
• Multi-step flows — group() / groupEnd() for auth, fetch, or render pipelines.
• Performance checks — time() / timeEnd() around slow functions.

Examples Gallery

Open DevTools Console (F12) and paste each snippet. Output appears in the Console panel, not on the page.

const user = { id: 1, name: "Ada" };
const count = 42;

console.log("User:", user);
console.log("Count:", count);

User: { id: 1, name: "Ada" }
Count: 42

const quota = 95;

if (quota > 90) {
  console.warn("Storage almost full:", quota + "%");
}

try {
  throw new Error("Network timeout");
} catch (err) {
  console.error("Fetch failed:", err.message);
}

Warning: Storage almost full: 95%
Error: Fetch failed: Network timeout

const products = [
  { sku: "A1", name: "Keyboard", price: 49 },
  { sku: "B2", name: "Mouse", price: 25 },
  { sku: "C3", name: "Monitor", price: 199 }
];

console.table(products);

┌─────┬─────┬──────────┬───────┐
│ idx │ sku │ name     │ price │
├─────┼─────┼──────────┼───────┤
│  0  │ A1  │ Keyboard │  49   │
│  1  │ B2  │ Mouse    │  25   │
│  2  │ C3  │ Monitor  │ 199   │
└─────┴─────┴──────────┴───────┘

function loadDashboard() {
  console.group("loadDashboard");

  console.log("Fetching user profile…");
  console.log("Fetching widgets…");
  console.warn("Widget cache stale — refreshing");

  console.groupEnd();
}

loadDashboard();

▼ loadDashboard
    Fetching user profile…
    Fetching widgets…
    Warning: Widget cache stale — refreshing

console.time("sumLoop");

let total = 0;
for (let i = 0; i < 1_000_000; i++) {
  total += i;
}

console.log("Total:", total);
console.timeEnd("sumLoop");

Total: 1784294967295000
sumLoop: 3.42ms

💬 Usage Tips

• Conditional logs — console.assert(condition, msg) logs only when condition is false.
• Clear clutter — run console.clear() between test runs.
• Count loops — console.count("label") shows how often a line executes.
• Find callers — console.trace() prints the call stack at that moment.
• Search this index — jump to any of 15 tutorials above.

⚠️ Common Pitfalls

• Logging objects by reference — expanding an object later may show its final state, not the state at log time. Clone or log primitives when timing matters.
• Leaving logs in production — exposes internals and can slow down apps; use build tools to strip logs.
• Forgetting groupEnd() — unmatched groups make the console tree hard to read.
• Mismatched time labels — timeEnd("a") will not stop time("b").
• assert() confusion — it logs when the condition is false, unlike an if guard.

💡 Best Practices