CodePen has a console! Like a native browser console, you can log things from the JavaScript to it, and you can type code into the console and see the results. The code you type into the console itself executes inside the preview.
It’s a helpful tool for showing JavaScript code in action, or for learning and teaching JS.
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 console.clear();
to your JavaScript to clear the console on page refresh.
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:
?editors=1111
This will share your Pen with the console maximized, covering the preview:
?editors=1112
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.
In Professor Mode and Presentation Mode your students or audience can see anything you log to the console or write directly in the console.
Error logging
JavaScript errors are logged to the console. And, the Pen editor also points out syntax errors with a red exclamation point notification within the editor panel.
You can use console.error()
and console.warn()
to log errors to the CodePen console. Not all console commands are supported. Many of them just map to .log()
.