Console Reference

This page is a reference of features related to the Chrome DevTools Console. It assumes
that you're already familiar with using the Console to view logged messages and run JavaScript. If not, see
Get Started.

Filter out browser messages

Filter by log level

DevTools assigns each console.* method a severity level. There are 4 levels: Verbose, Info,
Warning, and 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.

Filter messages by URL

Type 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/a.js and 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.

Type -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
https://b.wal.co.

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 wp-ad.min.js.

Filter out messages from different contexts

Suppose that you've got an ad on your page. The ad is embedded in an <iframe> and is generating
a lot of messages in your Console. Because this ad is in a different JavaScript
context, one way to hide its messages is to open Console Settings
and enable the Selected Context Only checkbox.

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 /[gm][ta][mi]/.

Run JavaScript

This section contains features related to running JavaScript in the Console.
See Run JavaScript for a hands-on
walkthrough.

Re-run expressions from history

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

Watch an expression's value 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.

Disable Eager Evaluation

As you type JavaScript expressions in the Console, Eager Evaluation shows a preview of that expression's
return value. Open Console Settings and disable the Eager Evaluation checkbox to turn off
the return value previews.

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.

Figure 18. document.querySelector('a') and document.querySelector('img')
are expressions that were evaluated earlier.

Select JavaScript context

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

Figure 19. The JavaScript Context dropdown.

Suppose you have an ad on your page embedded in an <iframe>. You want to run JavaScript in order
to tweak the ad's DOM. To do this, you first need to select the ad's browsing context from the
JavaScript Context dropdown.

Figure 20. Selecting a different JavaScript context.

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.

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

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

Press Control+L while the Console is in focus.

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had the information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had accurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was easy to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

No

What was the worst thing about this page?

It didn't help me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was missing information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had inaccurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was hard to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.