One of the big benefits compared to the native browser console is that it’s always in the correct “context”. Every time the preview refreshes, the native browser console resets to the context of the parent page, not the preview, which means you would need to manually change it to be working in the preview again.
Opening the Console
In a desktop browser, click the the “Console” button at the bottom of the Editor to open the console.
The console will open up at the bottom of the preview panel. If you’ve selected a custom theme for your editor, the console will also use that theme.
On a mobile browser or on small screens, the “Console” button is in the arrow menu at the bottom left of the editor screen.
Clearing the Console
There are three ways to clear the console.
You can use the the “clear” button at the top of the console:
You can type
clear(); into the console:
Or, you can add
Sharing a Pen with the Console Open
We have query parameters you can add to the end of links to your Pen to share your Pen with the console open.
This will share the Pen with the console open, but not covering the preview area:
This will share your Pen with the console maximized, covering the preview:
The Console in Collab, Professor, and Presentation Modes
If you’re in Collab Mode, everyone gets their own console, and they are not synced to each other.
Sass @debug and @warn
If you add
@warn to your Sass, the debug/warning messages will appear in the CodePen console.
@debug outputs a gray line in the console,
@warn outputs a yellow line.
@error is displayed as an inline message in the editor.
You can use
console.warn() to log errors to the CodePen console. Not all console commands are supported. Many of them just map to