| title | Console features reference |
|---|---|
| description | A comprehensive reference for every feature and behavior of the Console UI in Microsoft Edge DevTools. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.date | 05/04/2021 |
This article is an outline of the features of the Console.
Contents:
You can open the Console as a tool in the upper pane or as a tool in the Drawer.
Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS).
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.
Press Esc. Or, click Customize and control DevTools (...) and then select Show console drawer.
The Drawer pops up in the bottom of the DevTools window, with the Console tool open.
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.
Click the Console Settings (
) button.
To display the Sidebar, click Show console sidebar (
). The Sidebar helps you filter.
This section contains features that change how messages are presented in the Console. For a hands-on walkthrough, see View messages.
To turn off the default message grouping behavior of the Console, click the Console Settings () button and then select the checkbox next to Group similar. For an example, see Log XHR and Fetch requests.
To log all XMLHttpRequest and Fetch requests to the Console as each happens, click the Console Settings () button and then select the checkbox next to Log XMLHttpRequests.
The top message in previous figure displays the default grouping behavior of the Console.
When you load a new webpage, the default action clears the Console. To persist messages across page loads, click the Console Settings () button and then select the checkbox next to Preserve Log.
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.
To hide network messages:
-
Click the Console Settings (
) button. -
Select the checkbox next to Hide Network.
There are multiple ways to filter out messages in the Console.
To only display messages that came from the JavaScript of the webpage, Open the Console Sidebar and then click # user messages.
DevTools assigns each console.* method one of the four severity levels:
ErrorInfoVerboseWarning
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.
To use the log level to filter, open the Console Sidebar and then select Errors, Warnings, Info, or Verbose.
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.
To hide messages from a URL, type -url:. It's a negative URL filter.
To display messages from a single URL:
-
Expand the # user messages section.
-
Select the URL of the script that contains the messages that you want to focus on.
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 () button and then select the checkbox next to Selected Context Only.
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.
This section contains features related to running JavaScript in the Console. For a hands-on walkthrough, see Run JavaScript.
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.
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.
Eager Evaluation displays a preview of the return value as you type JavaScript expressions in the Console. To turn off the return value previews:
- Click the Console Settings () button.
- Clear the checkbox next to Eager Evaluation.
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 () 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.
By default, the JavaScript Context dropdown is set to top, which represents the main webpage's browsing context.
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:
To clear the Console, use any of the following approaches:
-
Click Clear Console (
). -
Right-click a message and then select Clear Console.
-
Type
clear()in the Console and then pressEnter. -
Call
console.clear()from your webpage's JavaScript. -
Press
Ctrl+Lwhile the Console is in focus.
- Log messages in the Console tool - How to filter log messages such as Info, Warnings, and Errors in the Console.
- Get started with running JavaScript in the Console - Steps to walk you through issuing JavaScript statements and expressions in the Console.
- Console object API Reference - Functions and expressions that you can enter in the Console to write messages to the Console, such as
console.log(). - Console tool utility functions and selectors - Convenience functions that you can enter in the Console tool, such as
monitorEvents().
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).
This work is licensed under a Creative Commons Attribution 4.0 International License.