Console features reference

This article is an outline of the features of the Console.

Contents:

Open the Console

You can open the Console as a tool in the upper pane or as a tool in the Drawer.

Open the Console tool

Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS).

The Console tool.

To open the Console tool from the Command Menu, type Console and then run the Show Console command that has the Panel badge next to it.

Run the command to display the Console tool.

Open the Console tool in the Drawer

Press Esc. Or, click Customize and control DevTools (...) and then select Show console drawer.

Show console drawer.

The Drawer pops up in the bottom of the DevTools window, with the Console tool open.

The Console tool in the Drawer.

To open the Console tool from the Command Menu, type Console and then run the Show Console command that has the Drawer badge next to it.

Run the command to display the Console tool in the Drawer.

Open Console Settings

Click the Console Settings (Console Settings icon.) button.

Console Settings.

Open the Console Sidebar

To display the Sidebar, click Show console sidebar (Show console sidebar.). The Sidebar helps you filter.

Console Sidebar.

View messages

This section contains features that change how messages are presented in the Console. For a hands-on walkthrough, see View messages.

Turn off message grouping

To turn off the default message grouping behavior of the Console, click the Console Settings (Console Settings icon.) button and then select the checkbox next to Group similar. For an example, see Log XHR and Fetch requests.

Log XHR and Fetch requests

To log all XMLHttpRequest and Fetch requests to the Console as each happens, click the Console Settings (Console Settings icon.) button and then select the checkbox next to Log XMLHttpRequests.

Logging XMLHttpRequest and Fetch requests.

The top message in previous figure displays the default grouping behavior of the Console.

Persist messages across page loads

When you load a new webpage, the default action clears the Console. To persist messages across page loads, click the Console Settings (Console Settings icon.) button and then select the checkbox next to Preserve Log.

Hide network messages

The default action for Microsoft Edge is to logs network messages to the Console. In the following figure, the selected message represents an HTTP status code of 429.

A '429' message in the Console.

To hide network messages:

  1. Click the Console Settings (Console Settings icon.) button.

  2. Select the checkbox next to Hide Network.

Filter messages

There are multiple ways to filter out messages in the Console.

Filter out browser messages

To only display messages that came from the JavaScript of the webpage, Open the Console Sidebar and then click # user messages.

Displaying user messages.

Filter by log level

DevTools assigns each console.* method one of the four severity levels:

  • Error
  • Info
  • Verbose
  • Warning

For example, console.log() is in the Info group, but console.error() is in the Error group. The Console object API Reference describes the severity level of each applicable method. Every message that the browser logs to the Console has a severity level too.

You can hide any level of messages that you're not interested in. For example, if you're only interested in Error messages, you can hide the other three groups.

To filter the messages, click the Log Levels dropdown list and then select Verbose, Info, Warning, or Error.

The Log Levels dropdown list.

To use the log level to filter, open the Console Sidebar and then select Errors, Warnings, Info, or Verbose.

Use the Sidebar to view warnings.

Filter messages by URL

Type url: followed by a URL to only view messages that came from that URL. After you type url:, DevTools displays all relevant URLs. Domains also work. For example, if https://example.com/a.js and https://example.com/b.js are logging messages, url:https://example.com allows you to focus on the messages from these two scripts.

A URL filter.

To hide messages from a URL, type -url:. It's a negative URL filter.

A negative URL filter that hides all messages that match the https://b.wal.co URL.

To display messages from a single URL:

  1. Open the Console Sidebar.

  2. Expand the # user messages section.

  3. Select the URL of the script that contains the messages that you want to focus on.

Displaying the messages that came from wp-ad.min.js.

Filter out messages from different contexts

Suppose that you have an advertisement (ad) on your webpage. The ad is embedded in an <iframe> and generates many messages in your Console. Because the ad is running in a different JavaScript context, one way to hide the messages is to click the Console Settings (Console Settings icon.) button and then select the checkbox next to Selected Context Only.

Filter out messages that don't match a regular expression pattern

Type a regular expression such as /[gm][ta][mi]/ in the Filter text box to filter out any messages that don't match that pattern. DevTools checks whether the pattern is found in the message text or in the script that caused the message to be logged.

Filtering out any messages that don't match the regex expression.

Run JavaScript

This section contains features related to running JavaScript in the Console. For a hands-on walkthrough, see Run JavaScript.

Rerun expressions from history

Press Up Arrow to cycle through the history of JavaScript expressions that you ran earlier in the Console. Press Enter to run that expression again.

Watch the value of an expression in real time with Live Expressions

If you find yourself typing the same JavaScript expression in the Console repeatedly, you might find it easier to create a Live Expression. With Live Expressions, you type an expression once and then pin it to the top of your Console. The value of the expression updates in near real time. See Watch JavaScript Expression Values In Real-Time With Live Expressions.

Turn off Eager Evaluation

Eager Evaluation displays a preview of the return value as you type JavaScript expressions in the Console. To turn off the return value previews:

  1. Click the Console Settings (Console Settings icon.) button.
  2. Clear the checkbox next to Eager Evaluation.

Turn off autocomplete from history

As you type out an expression, the autocomplete popup window for the Console displays expressions that you ran earlier. The expressions are pre-pended with the > character. To stop displaying expressions from your history, click the Console Settings (Console Settings icon.) button and then clear the checkbox next to Autocomplete From History checkbox.

In the following figure, document.querySelector('a') and document.querySelector('img') are expressions that were evaluated earlier.

The autocomplete popup menu displays expressions from history.

Select JavaScript context

By default, the JavaScript Context dropdown is set to top, which represents the main webpage's browsing context.

The JavaScript Context dropdown list.

Suppose you have an ad on your webpage embedded in an <iframe>, and you want to run JavaScript to tweak the DOM of the ad. Click the JavaScript Context dropdown list and then select the browsing context of the ad:

Selecting a different JavaScript context.

Clear the Console

To clear the Console, use any of the following approaches:

  • Click Clear Console (Clear Console.).

  • Right-click a message and then select Clear Console.

  • Type clear() in the Console and then press Enter.

  • Call console.clear() from your webpage's JavaScript.

  • Press Ctrl+L while the Console is in focus.

See also

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.