Console features reference
Open the Console #
Open the Console panel #
Press Control+Shift+J or Command+Option+J (Mac).
Figure 1. The Console panel.
To open the Console panel from the Command Menu, start typing
Console and then run the Show Console command that has the Panel badge next to it.
Figure 2. The command for showing the Console panel.
Open the Console tab in the Drawer #
Press Escape or click Customize And Control DevTools and then select Show Console Drawer.
Figure 3. Show Console Drawer.
The Drawer pops up at the bottom of your DevTools window, with the Console tab open.
Figure 4. The Console tab in the Drawer.
To open the Console tab from the Command Menu, start typing
Console and then run the Show Console command that has the Drawer badge next to it.
Figure 5. The command for showing the Console tab in the Drawer.
Open Console Settings #
Click Console Settings .
Figure 6. Console Settings.
The links below explain each setting:
- Hide Network
- Preserve Log
- Selected Context Only
- Group Similar
- Log XmlHttpRequests
- Eager Evaluation
- Autocomplete From History
Open the Console Sidebar #
Click Show Console Sidebar to show the Sidebar, which is useful for filtering.
Figure 7. Console Sidebar.
View messages #
This section contains features that change how messages are presented in the Console. See View messages for a hands-on walkthrough.
Disable message grouping #
Log XHR and Fetch requests #
Open Console Settings and enable Log XMLHttpRequests to log all
Fetch requests to the Console as they happen.
Figure 8. Logging
The top message in Figure 8 shows the Console's default grouping behavior. Figure 9 shows how the same log looks after disabling message grouping.
Figure 9. How the logged
Fetch requests look after ungrouping.
Persist messages across page loads #
By default the Console clears whenever you load a new page. To persist messages across page loads, Open Console Settings and then enable the Preserve Log checkbox.
Hide network messages #
By default the browser logs network messages to the Console. For example, the top message in Figure X represents a 404.
Figure 10. A 404 message in the Console.
To hide network messages:
- Open Console Settings.
- Enable the Hide Network checkbox.
Filter messages #
There are many ways to filter out messages in the Console.
Filter out browser messages #
Figure 11. Viewing user messages.
Filter by log level #
DevTools assigns each
console.* method a severity level. There are 4 levels:
Error. For example,
console.log() is in the
Info group, whereas
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 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 3 groups.
Click the Log Levels dropdown to enable or disable
Figure 12. The Log Levels dropdown.
You can also filter by log level by opening the Console Sidebar and then clicking Errors, Warnings, Info, or Verbose.
Figure 13. Using the Sidebar to view warnings.
Filter messages by URL #
url: followed by a URL to only view messages that came from that URL. After you type
url: DevTools shows all relevant URLs. Domains also work. For example, if
https://example.com/b.js are logging messages,
url:https://example.com enables you to focus on the messages from these 2 scripts.
Figure 14. A URL filter.
-url: to hide messages from that URL. This is called a negative URL filter.
Figure 15. A negative URL filter. DevTools is hiding all messages that match the URL
You can also show messages from a single URL by opening the Console Sidebar, expanding the User Messages section, and then clicking the URL of the script containing the messages you want to focus on.
Figure 16. Viewing the messages that came from
Filter out messages from different contexts #
Suppose that you've got an ad on your page. The ad is embedded in an
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 if the pattern is found in the message text or the script that caused the message to be logged.
Figure 17. Filtering out any messages that don't match
Re-run expressions from history #
Watch an expression's value in real-time with Live Expressions #
Disable Eager Evaluation #
Disable autocomplete from history #
As you type out an expression, the Console's autocomplete popup shows expressions that you ran earlier. These expressions are prepended with the
> character. Open Console Settings and disable the Autocomplete From History checkbox to stop showing expressions from your history.
document.querySelector('img') are expressions that were evaluated earlier.
Suppose you have an ad on your page embedded in an
Clear the Console #
You can use any of the following workflows to clear the Console:
- Click Clear Console .
- Right-click a message and then select Clear Console.
clear()in the Console and then press Enter.
- Press Control+L while the Console is in focus.