View Source
Submit Feedback
Learn how to: open the DevTools Console, stack redundant messages or display them on their own lines, clear or persist output or save it to a file, filter output, and access additional Console settings.
Contents
TL;DR
- Open the Console as a dedicated panel or as a drawer next to any other panel.
- Stack redundant messages, or display them on their own lines.
- Clear or persist output between pages, or save it to a file.
- Filter output by severity level, by hiding network messages, or by regular expression patterns.
Opening the Console
Access the Console as a full-screen, dedicated panel:
Or as a drawer that opens next to any other panel:
Open as panel
To open the dedicated Console panel, either:
- Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
- If DevTools is already open, press the Console button.
When you open the Console panel, the Console drawer collapses automatically.
Open as drawer
To open the Console as a drawer next to any other panel, either:
- Press Esc while DevTools is in focus.
- Press the Customize and control DevTools button and then press Show console.
Message stacking
If a message is consecutively repeated, rather than printing out each instance of the message on a new line, the Console “stacks” the messages and shows a number in the left margin instead. The number indicates how many times the message has repeated.
If you prefer a unique line entry for every log, enable Show timestamps from the DevTools settings.
Since the timestamp of each message is different, each message is displayed on its own line.
Working with the Console history
Clearing the history
You can clear the console history by doing any of the following:
- Right-click in the Console and press Clear console.
- Type
clear()in the Console. - Call
console.clear()from within your JavaScript code. - Type Ctrl+L (Mac, Windows, Linux).
Persisting the history
Enable the Preserve log checkbox at the top of the console to persist the console history between page refreshes or changes. Messages will be stored until you clear the Console or close the tab.
Saving the history
Right-click in the Console and select Save as to save the output of the console to a log file.
Selecting the right target
By default, logging and error output from frames or extensions contained within a page will not be output to the Console. You can access other frames’ Console output by using the dropdown at the top of the console. An <iframe> element, for example, would create its own frame context, selectable from this menu.
Filtering the Console output
Click the Filter button (
) to filter console output. You can filter by severity level, by a regular expression, or by hiding network messages.
Filtering by severity level is equivalent to the following:
| Option | Shows |
|---|---|
| All | Shows all console output |
| Errors | Only show output from console.error(). |
| Warnings | Only show output from console.warn(). |
| Info | Only show output from console.info(). |
| Logs | Only show output from console.log(). |
| Debug | Only show output from console.timeEnd() and console.debug(). |
Additional settings
Open the DevTools settings, go to the General tab, and scroll down to the Console section for further Console settings.
| Setting | Description |
|---|---|
| Hide network messages | By default, the console reports network issues. Turning this on instructs the console to not show logs for these errors. For example, 404 and 500 series errors will not be logged. |
| Log XMLHttpRequests | Determines if the console logs each XMLHttpRequest. |
| Preserve log upon navigation | Persists the console history during page refreshes or navigation. |
| Show timestamps | Prepends a timestamp to each console message showing when the call was made. Useful for debugging when a certain event occurred. This will disable message stacking. |
| Enable custom formatters | Control the formatting of JavaScript objects. |
Authors
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.