W3docs

JavaScript console API

The Console API is a vital tool for web developers, providing a means to interact with the browser's console and perform debugging and error reporting.

Introduction to the Console API

The Console API is the set of console.* methods that let your JavaScript talk to the developer console — the panel you open with the browser's DevTools (Chrome, Firefox, Edge, Safari) or that Node.js prints to in your terminal. It is the most-used debugging tool in JavaScript: with one line you can inspect a value, time an operation, or print a stack trace, without changing your program's behaviour.

This page covers the methods you'll reach for every day — log, info, warn, error, table, dir, group, time, count, assert, and trace — plus the format specifiers (%s, %d, %c) that control how values are printed.

The console is available globally, so you can call these methods anywhere — in a browser script, the DevTools console, or a Node.js file.

Basic logging with console.log()

console.log() prints information to the console. It accepts any number of arguments of any type and separates them with spaces — strings, numbers, arrays, and objects are all formatted automatically.

javascript— editable

Logging a label next to a value ('Value of y:', y) is the simplest and most common debugging technique — it keeps the output readable when several logs scroll past.

Log levels: info, warn, and error

console.info(), console.warn(), and console.error() work exactly like console.log() but carry a severity level. The browser styles each one differently (warnings get a yellow background, errors a red one) and — importantly — DevTools lets you filter by level, so you can hide noise and show only errors when a page misbehaves.

javascript— editable

Use console.warn() for situations that are recoverable but worth attention (a deprecated option, a missing optional field) and console.error() for genuine failures. Pair console.error() with proper error handling using try...catch so failures are both reported and handled.

Formatting output with format specifiers

When the first argument to a console method contains a format specifier, the remaining arguments are substituted in. The common specifiers are:

  • %s — a string
  • %d (or %i) — an integer
  • %f — a floating-point number
  • %o / %O — an object
  • %c — apply CSS styling to the output (browser only)
javascript— editable

In Node.js the %c styling is ignored, but the text still prints. Format specifiers are handy when you want clean, sentence-like output instead of comma-separated values.

Displaying structured data

Tables with console.table()

console.table() renders an array of objects (or an object of objects) as a sortable table — far easier to scan than nested console.log() output.

javascript— editable

Inspecting objects with console.dir()

console.dir() prints an interactive, drillable listing of an object's properties. It is especially useful for DOM nodes: console.log(element) shows the rendered HTML, while console.dir(element) shows the element as a JavaScript object with all its properties.

javascript— editable

Organizing and counting logs

Grouping with console.group()

console.group() and console.groupEnd() indent and (in the browser) collapse the logs between them — perfect for grouping related output during a complex debugging session.

javascript— editable

Use console.groupCollapsed() instead of console.group() to start the group collapsed by default.

Counting with console.count()

console.count(label) prints how many times it has been called with that label — a quick way to see how often a function runs or a branch executes, without maintaining a counter variable.

javascript— editable

Assertions and stack traces

Assertions with console.assert()

console.assert(condition, message) logs the message only when the condition is falsy. When the condition is truthy it produces no output, so you can leave sanity checks in place without cluttering the console.

javascript— editable

Stack traces with console.trace()

console.trace() prints the current call stack — the chain of function calls that led to this point. It's the fastest way to answer "how did execution get here?"

javascript— editable

Measuring performance

console.time(label) starts a timer and console.timeEnd(label) stops it and prints the elapsed milliseconds. Use the same label for both calls. This is a lightweight alternative to performance.now() for spotting slow operations.

javascript— editable

Where to go next

The Console API is one part of a wider debugging toolkit. For breakpoints, the Sources panel, and the rest of DevTools, see DOM debugging and tools. And while console calls are great during development, prefer descriptive code comments for explanations that should live in the source permanently — and remember to remove stray console.log calls before shipping.

Conclusion

The Console API gives you a quick, no-setup way to understand what your code is doing: log/info/warn/error for leveled messages, table and dir for structured data, group and count for organizing output, time for performance, and assert/trace for catching and explaining bugs. Combined with format specifiers, these methods cover the vast majority of everyday JavaScript debugging.

Practice

Practice
Which of the following statements accurately describe the capabilities of JavaScript's Console API?
Which of the following statements accurately describe the capabilities of JavaScript's Console API?
Was this page helpful?