Use the F12 DevTools Console for interactive debugging and adhoc testing. It allows you to communicate into and out of a running web page by:
- Posting standard error and status codes and informational messages as your code runs
- Generating custom debug logs from the Console API calls you include in your code
- Providing a command line and interactive tree view for inspecting current return values of key variables and functions
The Errors / Warnings / Info / Logs buttons filter console output by the specified type. You can multi-select them by holding down the
Ctrlkey. The All button clears all filters.
The Clear button (
Ctrl+L) clears the current console display.
Ticking the Preserve Log checkbox will persist your console output across page refreshes and closing / reopening F12 DevTools. Console history will only clear when the tab is closed or you manually clear the Console.
Use the Target dropdown selector to switch to a different execution context, such as an
<iframe>in your page or a running extension. By default, the top-level frame of your page is selected. Hovering over a selected frame will display a tooltip with the full URL for that resource.
In addition to the Console panel, you can use the console from the bottom of any other F12 DevTools panel by pressing the Show / Hide Console button (
Ctrl+` ). The button has no effect when the DevTools are open to the Console panel.
You can also Filter logs (
Ctrl+F) with a specific text string in the searchbox.
Clicking on any blue source links will open the F12 DevTools Debugger to that particular line of code for further inspection.
|Launch F12 DevTools with Console in focus||
|Switch to Console||
|Show/Hide Console from another F12 tab||
|Execute (single line command)||
|Line-break without executing (multi-line command)||
|Clear the Console of all messages||
|Filter logs (set focus to search box)||
|Accept auto-completion suggestion (when in focus)||
|Previous / Next auto-completion suggestion||up / down arrow keys|