JavaScript Console Method Reference

You use console.log() for everything. An array of objects? console.log(data) — then you expand nested objects one by one. Timing a function? Date.now() before and after. Grouping related logs? You don’t. But console.table() displays arrays as sortable tables, console.time()/console.timeEnd() measures execution, console.group() creates collapsible sections, and console.assert() only logs on failure. Most developers use 2 of the 15+ available methods.

Why This Reference (Not MDN)

MDN documents each console method on a separate page. This reference puts all methods on one page with syntax, parameters, output previews, and browser support — searchable and filterable. Find the right debugging method by what you need to do, not by navigating between pages.

What This Reference Covers

The console object provides access to the browser’s and Node.js’s debugging console. This reference covers all standard console methods from the WHATWG Console specification plus widely supported non-standard methods (profile, profileEnd).

Every method entry includes:

• Syntax — the exact call signature
• Parameters — types, names, and whether each is optional
• Return value — always undefined for console methods
• Code example — a copy-pasteable example
• Simulated output — what the console would display
• Browser support — Chrome, Firefox, Safari, Edge, and Node.js

Use the search box to find a method by name or keyword. Use the category tabs to filter by Output, Timing, Grouping, Debugging, or Profiling.

The Five Output Methods Compared

The five core output methods look similar but have distinct meanings and visual treatments:

Practical rule: Use log for general output, warn for recoverable issues, error for failures, info for informational milestones, and debug for detailed diagnostic data that should be hidden in normal use.

Format Specifiers

When the first argument to console.log (or any output method) is a string containing a % token, subsequent arguments are substituted:

console.log("Hello, %s! You have %d messages.", "Alice", 5);
// Hello, Alice! You have 5 messages.

CSS Styling with %c

%c is the most powerful specifier — it applies a CSS string to the text that follows it:

console.log(
  "%cSuccess%c — build completed in %dms",
  "color: #22c55e; font-weight: bold; font-size: 14px",
  "",        // reset styling
  1234
);

Only a subset of CSS properties is supported: color, background, font-weight, font-size, font-style, border, padding, margin, border-radius, and text-decoration. Layout properties are ignored.

Timing Methods

The three timing methods work together to measure elapsed time precisely:

console.time("render");
await expensiveRender();
console.timeLog("render", "first paint done");  // intermediate checkpoint
await additionalWork();
console.timeEnd("render");

• console.time(label) — starts a high-resolution timer
• console.timeLog(label, ...data) — logs current elapsed time without stopping
• console.timeEnd(label) — stops the timer and logs final elapsed time

Timers are keyed by label. Up to 10,000 simultaneous timers can be active. Timer precision is tied to performance.now().

Grouping Methods

Groups let you organize related console output under collapsible sections:

console.group("Request lifecycle");
  console.log("→ Outgoing headers:", headers);
  console.group("Response");
    console.log("Status:", 200);
    console.log("Body:", data);
  console.groupEnd();
console.groupEnd();

• console.group(label) — starts an expanded group
• console.groupCollapsed(label) — starts a collapsed group (user must click to expand)
• console.groupEnd() — closes the innermost open group

Groups can be nested to any depth. In Node.js (v8+), all groups are expanded since terminal output is not interactive.

Debugging Methods

console.assert

console.assert is a lightweight alternative to throwing errors during development:

function divide(a, b) {
  console.assert(b !== 0, "divide(): denominator must not be zero");
  return a / b;
}

divide(10, 0); // Assertion failed: divide(): denominator must not be zero

Key difference from throw: console.assert does not stop execution. It only logs and continues. Use throw when you need the program to halt.

console.trace

console.trace is the fastest way to see how execution reached a point:

function handleClick(event) {
  console.trace("handleClick called");
  processEvent(event);
}

The output includes the full call stack with file names and line numbers, identical to the stack trace shown for thrown errors.

console.count and console.countReset

Use console.count to count occurrences without managing a counter variable:

document.addEventListener("click", () => console.count("click"));
// click: 1, click: 2, ... on each click

// Reset when navigating sections:
console.countReset("click");

Performance Profiling

console.profile and console.profileEnd trigger the browser’s CPU profiler programmatically:

console.profile("renderList");
renderLargeList(10_000);
console.profileEnd("renderList");

Results appear in the DevTools Performance or JavaScript Profiler panel. These methods are non-standard and not available in Node.js.

For most profiling needs, the DevTools Performance panel’s record button is more reliable and provides richer analysis.

console.table Tips

console.table is one of the most underused console methods. It accepts an array of objects or a single object and renders it as a sortable table:

// Array of objects — each object becomes a row
console.table([
  { method: "GET",  url: "/api/users",   status: 200, ms: 42 },
  { method: "POST", url: "/api/login",   status: 200, ms: 87 },
  { method: "GET",  url: "/api/missing", status: 404, ms: 12 },
]);

// Restrict columns
console.table(users, ["name", "role"]);

// Single object — keys become rows
console.table({ x: 10, y: 20, z: 30 });

In browsers, click column headers to sort. In Node.js, the table renders as plain text.

console.dir vs console.log

The key difference is how DOM elements are displayed:

const el = document.querySelector("#app");

console.log(el);   // Shows HTML: <div id="app">...</div>
console.dir(el);   // Shows JS object: {id: 'app', className: '', ...}

Use console.dir when you want to inspect a DOM element’s JavaScript properties rather than its HTML structure. For plain objects, both methods produce identical output.

FAQ

Why does console.log show [object Object] when I concatenate?

String concatenation calls .toString() on objects, which returns [object Object]. Pass the object as a separate argument instead:

// Wrong:
console.log("User: " + user);     // "User: [object Object]"

// Right:
console.log("User:", user);       // "User: {name: 'Alice', ...}"

What is the difference between %o and %O format specifiers?

%o uses the browser’s “optimal” formatting — usually a compact inline object. %O forces a full JavaScript object dump. In Chrome DevTools, %o on a DOM node renders the element’s tag; %O shows the JavaScript property tree. For plain objects, the difference is minimal.

Does console.log slow down my application?

In production builds, yes — console output is synchronous in most environments and writing to DevTools has measurable cost. Remove or disable console calls in production. A common pattern is a custom logger utility that checks process.env.NODE_ENV or a debug flag before calling console.*.

How do I log without converting objects to strings?

Separate each value with a comma in the argument list:

console.log("Config:", config, "Env:", env);

Each value is formatted independently — objects remain expandable, primitives stay as-is.

Why is console.debug not showing in my browser?

console.debug requires the Verbose log level to be enabled in DevTools. In Chrome: open DevTools → Console tab → click the log level dropdown → check “Verbose”.

Can I use console.warn and console.error to write to stderr?

Yes, in Node.js both console.warn and console.error write to stderr, while console.log, console.info, and console.debug write to stdout. This makes them correct choices for error and warning output in CLI applications.