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. It works for Sass, too! Read on.

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.

Sass @debug and @warn

If you add @debug or @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.

This post has more detail and examples of how to use these features.

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.

the CodePen editor with errors in the JavaScript panel. The error is logged to the console, and also indicated with an exclamation point icon in 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().