Console reference

This article is a reference of features related to the Microsoft Edge DevTools Console. It assumes you're already familiar with using the Console to view logged messages and run JavaScript. If not, navigate to Get started with running JavaScript in the Console and Get started with logging messages in the Console.

If you're looking for the API reference on functions like console.log(), navigate to Console API Reference. For the reference on functions like monitorEvents(), navigate to Console Utilities API Reference.

Open the Console

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

Open the Console tool

Select Control+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

Select Esc or choose Customize and control DevTools (...) and then choose Show console drawer.

Show console drawer

The Drawer pops up at the bottom of your 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

Choose the Console Settings (Console Settings icon) button.

Console Settings

The following links explain each setting.

Open the Console Sidebar

To display the Sidebar, choose Show console sidebar (Show console sidebar). The Sidebar is 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, navigate to View messages.

Turn off message grouping

To turn off the default message grouping behavior of the Console, open Console Settings and choose the checkbox next to Group similar. For an example, navigate to Log XHR and Fetch requests.

Log XHR and Fetch requests

To log all XMLHttpRequest and Fetch requests to the Console as each happens, open Console Settings and choose the checkbox next to Log XMLHttpRequests.

Log 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, open Console Settings and choose 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 chosen message represents an HTTP status code of 429.

A 429 message in the Console

To hide network messages, complete the following actions.

  1. Open Console Settings.
  2. Choose the checkbox next to Hide Network.

Filter messages

Many ways exist to filter out messages in the Console.

Filter out browser messages

Open the Console Sidebar and choose # user messages to only display messages that came from the JavaScript of the webpage.

Display 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 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 may hide any level of messages that you're not interested in. For example, if you're only interested in Error messages, you may hide the other three groups.

To filter the messages, choose the Log Levels dropdown and choose Verbose, Info, Warning, or Error.

The Log Levels dropdown

To use the log level to filter, open the Console Sidebar and then choose 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, complete the following actions.

  1. Open the Console Sidebar.
  2. Expand the # user messages section.
  3. Choose the URL of the script that contains the messages on which you want to focus.

Display 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 open Console Settings and choose 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 textbox to filter out any messages that don't match that pattern. DevTools checks if the pattern is found in the message text or the script that caused the message to be logged.

Filter out any messages that don't match regex expression

Run JavaScript

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

Rerun expressions from history

Select Up Arrow to cycle through the history of JavaScript expressions that you ran earlier in the Console. Select 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 may 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. Navigate to 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, complete the following actions.

  1. Open Console Settings.
  2. Remove 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, open Console Settings and remove the checkbox next to Autocomplete From History checkbox.

Note

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

Choose JavaScript context

The default option for the JavaScript Context dropdown is top, which represents the browsing context of the main webpage.

The JavaScript Context dropdown

Suppose you have an ad on your webpage embedded in an <iframe>. You want to run JavaScript to tweak the DOM of the ad. First, choose the browsing context of the ad from the JavaScript Context dropdown.

Choose a different JavaScript context

Clear the Console

To clear the Console, complete any of the following workflows.

  • Choose the Clear Console (Clear Console) button.
  • Hover on a message, open the contextual menu (right-click), and choose Clear Console.
  • Enter clear() in the Console and select Enter.
  • Run console.clear() from the JavaScript for your webpage.
  • Select Control+L while the Console is in focus.

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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.