Web Inspector ReferenceConsole Object API

The console object is arguably one of the most useful debugging tools available for JavaScript.

You may already be familiar with console.log, which generates interactive visualizations in the Web Inspector Console.

But did you know that there are many more functions, each providing additional debugging functionality?

Here’s the full list:

• console.debug([...data]) outputs a “debug” message to the Console.
• console.error([...data]) outputs an “error” message to the Console.
• console.info([...data]) outputs an “info” message to the Console.
• console.log([...data]) outputs a “log” message to the Console.
• console.warn([...data]) outputs a “warn” message to the Console.

---

• console.assert([condition [, ...data]]) will log an “error” message to the Console if the given condition is falsy.
• Not providing a condition is equivalent to a falsy value.
• This will also trigger the Assertion Failures JavaScript Breakpoint.

---

• console.trace([...data]) will show a stack trace in the Console.

---

• console.clear() is a programmatic way of clearing the Console.

---

• console.count([label]) logs the number of times that console.count has been called with the given label.
• console.countReset([label]) resets the console.count number for the given label.

---

• console.dir([item]) forces Web Inspector to visualize the given item as an object.
• In practice, the only major difference is when the given item is a DOM node.
• console.dirxml([...data]) forces Web Inspector to attempt to visualize each of the items in the given data as a DOM node.

---

• console.group([...data]) creates a collapsable message group that future Console messages will be nested under.
• console.groupCollapsed([...data]) works the same as console.group, except that the message group starts out collapsed.
• console.groupEnd([...data]) “closes” the most recent message group.

---

• console.profile([title]) is a way to programmatically start a new timeline recording with the given title (if provided) as the name.
• console.profileEnd([title]) is a way to programmatically stop an existing timeline recording who’s name matches the given title (if provided).
• console.timeStamp([message]) adds a marker to the active timeline recording.

---

• console.record(target [, options]) is a way to programmatically start a new canvas recording for the given target with configuration options (if provided):
• singleFrame indicates whether the canvas recording should automatically stop recording after a single rendering frame has been captured.
• frameCount indicates how many rendering frames to capture before the canvas recording should automatically stop recording.
• If supplied, frameCount takes precedence over singleFrame.
• memoryLimit incidates how large (in MB) the canvas recording is allowed to get before it should automatically stop recording.
• name specifies the title string used by Web Inspector when listing the canvas recording in the Graphics Tab.
• console.recordEnd(target) is a way to programmatically stop an existing canvas recording on the given target.

---

• console.screenshot([target [, ...data]]) captures/generates an image screenshot of the given target (if provided) or what’s visible in the viewport.

  This works well with DOM nodes that are attached to the main document, graphical DOM nodes (e.g.<img>, <video>, <canvas>, etc.), and other graphical objects (e.g.ImageBitmap, canvas rendering context, etc.).

---

• console.table(tabularData, properties) renders the given tabularData value into a <table> in the Console.

---

• console.takeHeapSnapshot([title]) is a way to programmatically capture a heap snapshot with the given title as the name.

---

• console.time([label]) starts a timer with the given label (if provided).
• console.timeLog([label [, ...data]]) logs the elapsed time of the timer with the given label (if provided).
• console.timeEnd([label]) stops the timer with the given label (if provided) and logs the elapsed time.

---

String Formatting and Styling

console message functions (e.g.console.log) also support substitutions:

• %s converts the corresponding value to a string.
• %d / %i converts the corresponding value to an integer.
• %f converts the corresponding value to a float.
• %o displays the corresponding value as if it were a standalone argument to console.log.
• %O displays the corresponding value as if it were a standalone argument to console.dir.
• %c applies the corresponding value as CSS.