Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources WebAuthn: Emulate authenticators
Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources WebAuthn: Emulate authenticators

Console API reference

Published on Updated on

Use the Console API to write messages to the Console from your JavaScript. See Get started with logging messages to the Console for an interactive introduction to the topic.

Gotchas

DevTools assigns a severity level to most of the console.* methods. These levels allow you to filter logged messages. For more information, see Filter by log level.

See Console utilities API reference if you're looking for the convenience methods like debug(function) or monitorEvents(node) which are only available from the Console.

console.assert(expression, object)

Log level: Error

Writes an error to the console when expression evaluates to false.

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});
The result of the console.assert() example above.

console.clear()

Clears the console.

console.clear();

If Preserve Log is enabled, console.clear() is disabled.

Alternatively, you can Clear the Console by clicking the ALT_TEXT_HERE icon.

console.count([label])

Log level: Info

Writes the number of times that count() has been invoked at the same line and with the same label. Call console.countReset([label]) to reset the count.

console.count();
console.count('coffee');
console.count();
console.count();
The result of the console.count() example above.

console.countReset([label])

Resets a count.

console.countReset();
console.countReset('coffee');

console.createTask(name)

Gotchas

This method is known as the Async Stack Tagging API. If you use a framework or abstraction for scheduling and async execution that already uses this API under the hood, you don't need to call this API directly.

Returns a Task instance that associates the current stack trace with the created task object. You can later use this task object to run a function (f in the following example). The task.run(f) executes an arbitrary payload and forwards the return value back to the caller.

// Task creation
const task = console.createTask(name);

// Task execution
task.run(f); // instead of f();

The task forms a link between the creation context and the context of the async function. This link lets DevTools show better stack traces for async operations. For more information, see Linked Stack Traces.

console.debug(object [, object, ...])

Log level: Verbose

Identical to console.log(object [, object, ...]) except different log level.

console.debug('debug');
The result of the console.debug() example above.

console.dir(object)

Log level: Info

Prints a JSON representation of the specified object.

console.dir(document.head);
The result of the console.dir() example above.

console.dirxml(node)

Log level: Info

Prints an XML representation of the descendants of node.

console.dirxml(document);
The result of the console.dirxml() example above.

console.error(object [, object, ...])

Log level: Error

Prints object to the Console, formats it as an error, and includes a stack trace.

console.error("I'm sorry, Dave. I'm afraid I can't do that.");
The result of the console.error() example above.

console.group(label)

Visually groups messages together until console.groupEnd(label) is called. Use console.groupCollapsed(label) to collapse the group when it's initially logged to the Console.

const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);
The result of the console.group() example above.

Additionally, you can nest groups.

const timeline1 = 'New York 2012';
const timeline2 = 'Camp Lehigh 1970';
console.group(timeline1);
console.info('Mind');
console.info('Time');
console.group(timeline2);
console.info('Space');
console.info('Extra Pym Particles');
console.groupEnd(timeline2);
console.groupEnd(timeline1);
Nested groups.

console.groupCollapsed(label)

Same as console.group(label), except the group is initially collapsed when it's logged to the Console.

console.groupEnd(label)

Stops visually grouping messages. See console.group.

console.info(object [, object, ...])

Log level: Info

Identical to console.log(object [, object, ...]).

console.info('info');
The result of the console.info() example above.

console.log(object [, object, ...])

Log level: Info

Prints a message to the Console.

console.log('log');
The result of the console.log() example above.

console.table(array [, columns])

Log level: Info

Logs an array of objects as a table.

var people = [
{
first: 'René',
last: 'Magritte',
},
{
first: 'Chaim',
last: 'Soutine',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Matisse',
}
];
console.table(people);
The result of the console.table() example above.

By default, console.table() logs all table data. To display a single column or a subset of columns, you can use the second optional parameter and specify column name or names as a string or an array of strings. For example:

console.table(people, ['last', 'birthday']);
A subset of columns in a table logged with console.table().

console.time([label])

Starts a new timer. Call console.timeEnd([label]) to stop the timer and print the elapsed time to the Console.

console.time();
for (var i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
The result of the console.time() example above.

console.timeEnd([label])

Log level: Info

Stops a timer. See console.time().

console.trace()

Log level: Info

Prints a stack trace to the Console.

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();
The result of the console.trace() example above.

console.warn(object [, object, ...])

Log level: Warning

Prints a warning to the Console.

console.warn('warn');
The result of the console.warn() example above.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.