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.

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 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.

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.error() and console.warn() to log errors to the CodePen console. Not all console commands are supported. Many of them just map to .log().