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.
Currently this feature is available on the desktop browser version of CodePen only. It is not available on the mobile version yet.
Opening the Console
Click 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.
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.
Where are the errors?
Our console currently doesn't display errors. In part this is because the CodePen editor constantly updates as you type, which could pollute the console with unhelpful error messages.
We do point out syntax errors right within the editor itself though, which is nice, especially for learners. Also, the browser's console will catch things like undefined errors.
You can use
console.warn() to log errors to the CodePen console. Not all console commands are supported. Many of them just map to