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

If you're looking for the API reference on functions likeconsole.log() seeConsole APIReference. For the reference on functions likemonitorEvents() seeConsole Utilities APIReference.

Open the Console

You can open the Console as apanel or as atab in the Drawer.

Open the Console panel

PressControl+Shift+J orCommand+Option+J (Mac).

To open the Console from theCommand Menu, start typingConsole and then run theShowConsole command that has thePanel badge next to it.

Open the Console in the Drawer

PressEscape or clickCustomize And Control DevTools and thenselectShow Console Drawer.

The Drawer pops up at the bottom of your DevTools window, with theConsole tab open.

To open the Console tab from theCommand Menu, start typingConsole and then run theShowConsole command that has theDrawer badge next to it.

Open Console Settings

ClickConsole Settings in the top-right corner of theConsole.

Key point: Not to be confused withDevTools Settings above and next to the three-dot menu.

The links below explain each setting:

• Hide network
• Preserve log
• Selected context only
• Group similar messages in console
• Show CORS errors in console
• Log XMLHttpRequests
• Eager evaluation
• Autocomplete from history

Open the Console Sidebar

ClickShow Console Sidebar to showthe Sidebar, which is useful for filtering.

View messages

This section contains features that change how messages are presented in the Console. SeeViewmessages for a hands-on walkthrough.

Disable message grouping

Open Console Settings and disableGroup similar to disable the Console's default messagegrouping behavior. SeeLog XHR and Fetch requests for an example.

View messages from breakpoints

TheConsole marks messages triggered by breakpoints in the following way:

• console.* calls inconditional breakpoints with an orange question mark?
• Logpoint messages with pink two dots..

To jump to theinline breakpoint editor in theSources panel, click the anchor link next to the breakpoint message.

View stack traces

TheConsole automatically captures stack traces for errors and warnings. A stack trace is a history of function calls (frames) that led to the error or warning. TheConsole shows them in reverse order: the latest frame is at the top.

To view a stack trace, click the expand icon next to an error or warning.

View error causes in stack traces

TheConsole can show you chains oferror causes in the stack trace, if any.

To make debugging easier, you canspecify error causes when catching and rethrowing errors. As theConsole walks up the cause chain, it prints each error stack with aCaused by: prefix, so you can find the original error.

View async stack traces

If supported by the framework you are using or when directly using browser scheduling primitives, such assetTimeout, DevTools can trace async operations by linking both parts of the async code together.

In this case, the stack trace shows the "full story" of the async operation.

Key point: DevTools implements this "Async Stack Tagging" feature based on theconsole.createTask() API method.DevTools encourages frameworks and abstractions to use this API. For example,Angular supports this feature.

Show known third-party frames in stack traces

When source maps include theignoreList field, by default, theConsole hides from stack traces the third-party frames from sources generated by bundlers (for example, webpack) or frameworks (for example, Angular).

To view the full stack trace including third-party frames, clickShow N more frames at the bottom of the stack trace.

To always view the full stack trace, disable theSettings >Ignore List >Automatically add known third-party scripts to ignore list setting.

Log XHR and Fetch requests

Open Console Settings and enableLog XMLHttpRequests to log allXMLHttpRequest andFetch requests to the Console as they happen.

The top message in the example above shows the Console's default grouping behavior. The example below showshow the same log looks afterdisabling message grouping.

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 thePreserve Log checkbox.

Hide network messages

By default the browser logs network messages to theConsole. For example, the top message inthe following example represents a 404.

To hide network messages:

1. Open Console Settings.
2. Enable theHide Network checkbox.

Show or hide CORS errors

TheConsole can showCORS errors if network requests fail due toCross-Origin Resource Sharing (CORS).

To show or hide CORS errors:

1. Open Console Settings.
2. Check or clear theShow CORS errors in the console checkbox.

If the console is set to show CORS errors and you encounter them, you can click the following buttons next to errors:

• to open the request with a CORS-relatedTypeError in theNetwork panel.
• to get apotential solution on theIssues tab.

Filter messages

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

Filter out browser messages

Open the Console Sidebar and clickUser Messages to only show messages that came from thepage's JavaScript.

Filter by log level

DevTools assigns most ofconsole.* methods severity levels.

There are four levels:

• Verbose
• Info
• Warning
• Error

For example,console.log() is in theInfo group, whereasconsole.error() is in theError group. TheConsole API Reference describes the severitylevel of each applicable method.

Every message that the browser logs to the Console has a severitylevel too. You can hide any level of messages that you're not interested in. For example, if you'reonly interested inError messages, you can hide the other 3 groups.

Click theLog Levels drop-down to enable or disableVerbose,Info,Warning orErrormessages.

You can also filter by log level byopening the Console Sidebar and then clickingErrors,Warnings,Info, orVerbose.

Filter messages by URL

Typeurl: followed by a URL to only view messages that came from that URL. After you typeurl:DevTools shows all relevant URLs.

Domains also work. For example, ifhttps://example.com/a.js andhttps://example.com/b.js are logging messages,url:https://example.com enables you to focus onthe messages from these 2 scripts.

To hide all messages from a specified URL, type-url: followed by the URL, for example,https://b.wal.co. This is a negative URL filter.

You can also show messages from a single URL byopening the Console Sidebar, expanding theUser Messages section, and then clicking the URL of the script containing the messages you wantto focus on.

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 alot of messages in your Console. Because this ad is in a differentJavaScript context, one wayto hide its messages is toopen Console Settings and enable theSelected Context Onlycheckbox.

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

Type a regular expression such as/[foo]\s[bar]/ in theFilter text box to filter out anymessages that don't match that pattern. Spaces are not supported, use\s instead. DevTools checks if the pattern is found in the message textor the script that caused the message to be logged.

For example, the following filters out all messages that don't match/[gm][ta][mi]/.

Search for text in logs

To search for text in log messages:

1. To open a built-in search bar, pressCommand+F (Mac) orCtrl+F (Windows, Linux).
2. In the bar, type your query. In this example the query islegacy.Optionally, you can:
   • ClickMatch Case to make your query case-sensitive.
   • ClickUse Regular Expression to search using a RegEx expression.
3. PressEnter. To jump to previous or next search result, press the up or down button.

Run JavaScript

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

String copy options

The console outputs strings as valid JavaScript literals by default. Right-click an output and choose between three copy options:

• Copy as JavaScript literal. Escapes appropriate special characters and wraps the string in either single quotes, double quotes,or backticks depending on the content.
• Copy string contents. Copies the exact raw string to the clipboard, including new lines and other special characters.
• Copy as JSON literal. Formats the string to valid JSON.

Re-run previous expressions and clear history

Press theUp Arrow key to cycle through the history of JavaScript expressions that youran earlier in theConsole. PressEnter to run that expression again.

To clear the console history, right-click an empty space in theConsole and selectClear console history from the context menu.

Clear, copy, and save messages

To clear theConsole window, do one of the following:

• ClickblockClear console in the action bar at the top.
• PressCtrl+L orCmd+K.
• Right-click an empty space in theConsole and selectClear console from the context menu.

From the context menu, you can also:

• Copy console: Copy all current messages to clipboard, but not thehistory of previous commands.
• Save as...: Save all current messages to a plaintext.log file.

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 findit easier to create aLive Expression. WithLive Expressions, you type an expression once andthen pin it to the top of your Console. The value of the expression updates in near real-time. SeeWatch 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 thatexpression's return value.Open Console Settings and disable theEager Evaluation checkboxto turn off the return value previews.

Trigger user activation with evaluation

User activation is the state of a browsing session that depends on user actions. An "active" state means the user is currently interacting with the page or has interacted since page load.

To trigger user activation with any evaluation,open Console Settings andcheckTreat code evaluation as user action.

Disable autocomplete from history

As you type out an expression, the Console's autocomplete popup shows expressions that you ranearlier. These expressions are prepended with the> character. In the following example, DevTools earlier evaluateddocument.querySelector('a') anddocument.querySelector('img').

Open Console Settings anddisable theAutocomplete From History checkbox to stop showing expressions from your history.

Select JavaScript context

By default theJavaScript Context drop-down is set totop, which represents the maindocument'sbrowsing context.

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

Inspect object properties

TheConsole can display an interactive list of properties of a JavaScript object you specify.

To browse the list, type the object name into theConsole and pressEnter.

To inspect the properties of DOM objects, follow the steps inView the properties of DOM objects.

Spot own and inherited properties

TheConsole sorts own object properties first and highlights them in bold font.

Properties inherited from the prototype chain are in regular font. TheConsole displays them on the object itself by evaluating the corresponding native accessors of built-in objects.

Evaluate custom accessors

By default, DevTools doesn't evaluate accessors you create.To evaluate a custom accessor on an object, click(...).

Spot enumerable and non-enumerable properties

Enumerable properties are bright in color. Non-enumerable properties are muted.Enumerable properties can be iterated over with thefor … in loop orObject.keys() method.

Spot private properties of class instances

TheConsole designatesprivate properties of class instances with a# prefix.

TheConsole can also autocomplete private properties even when you evaluate them ouside the class scope.

Inspect internal JavaScript properties

Borrowing theECMAScript notation, theConsole encloses some properties internal to JavaScript in double square brackets. You can't interact with such properties in your code. However, it might be useful to inspect them.

You might see the following internal properties on different objects:

• Any object has a[[Prototype]].
• Primitive wrappers have a[[PrimitiveValue]] property.
• ArrayBuffer objects have the following properties:
  • [[Int8Array]],[[Uint8Array]],[[Int16Array]],[[Int32Array]]
  • [[ArrayBufferByteLength]],[[ArrayBufferData]]Key point: Toinspect a JavaScripts ArrayBuffer that a view object refers to, click the button.
• In addition toArrayBuffer-specific properties,WebAssembly.Memory objects have a[[WebAssemblyMemory]] property.
• Keyed collections (maps and sets) have an[[Entries]] property that contains their keyed entries.
• Promise objects have the following properties:
  • [[PromiseState]]: pending, fulfilled, or rejected
  • [[PromiseResult]]:undefined if pending,<value> if fulfilled,<reason> if rejected
• Proxy objects have the following properties:[[Handler]] object,[[Target]] object, and[[isRevoked]] (switched off or not).

Inspect functions

In JavaScript, functions are also objects with properties. However, if you type a function name into theConsole, DevTools calls it instead of displaying its properties.

To view function properties internal to JavaScript, use theconsole.dir() command.

Functions have the following properties:

• [[FunctionLocation]]. A link to the line with the function definition in a source file.
• [[Scopes]]. Lists values and expressions the function has access to. To inspect function scopes during debugging, seeView and edit local, closure, and global properties.
• Bound functions have the following properties:
  • [[TargetFunction]]. The target ofbind().
  • [[BoundThis]]. The value ofthis.
  • [[BoundArgs]]. An array of function arguments.
• Generator functions are marked with a[[IsGenerator]]: true property.
• Generators return iterator objects and they have following properties:
  • [[GeneratorLocation]]. A link to a line with the generator definition in a source file.
  • [[GeneratorState]]:suspended,closed, orrunning.
  • [[GeneratorFunction]]. The generator that returned the object.
  • [[GeneratorReceiver]]. An object that receives the value.

Clear the Console

You can use any of the following workflows to clear the Console:

• ClickClear Console.
• Right-click a message and then selectClear Console.
• Typeclear() in the Console and then pressEnter.
• Callconsole.clear() from your webpage's JavaScript.
• PressControl+L while the Console is in focus.