Debug View is the only view on CodePen where you can see the preview of your code without an <iframe> around it. (Unless you deploy a Project, no <iframe> on those either). That’s why we call it Debug View. It makes it a bit easier to debug things without having to inspect through an iframe.

The main features of Debug View:

  • There’s no CodePen header
  • The preview is not inside an iframe
  • The view has no CodePen influence on your code. For example, in most other views, we do things like attempt to manipulate the JavaScript a little to stop infinite loops so as to avoid crashing the browser. That code manipulation is not done in this view.

Console Context

If I’m in the Pen Editor and have a line of JavaScript like const foo = "bar"; then open the native browser DevTools console and type foo, I’ll probably see “Uncaught ReferenceError: foo is not defined”.

That’s because the context of that console is the CodePen website itself. You can change that context manually if you want, to the preview iframe:

You can change the context of the browser DevTools console manually. Hot tip: if you inspect an element in the iframe, the context also changes automatically.

That can be a bit cumbersome if you need to do it a lot. That’s one of the things Debug View helps with. You don’t have to switch contexts because there is no iframe in use at all.

It’s also worth noting that our built-in console is always in the right context.

Debug View is Better as a PRO Member

If you’re a free member, you can view Debug View on your own Pens only while logged into CodePen on a supported browser.

If you’re a PRO member, your Pens can be seen in Debug View by anyone, even while logged out, which makes it easier to share the Debug View with clients, view it on your mobile device, or test it on legacy browsers, since you don’t have to go through the log in process.

Video Walkthrough

Getting to Debug View

You can reach the Debug View on your own Pens through the Change View menu while logged in:

Or, change /pen/ to /debug/ in the Pen’s URL.

Access recap:

  • PRO members don’t have to logged in to see the Debug View of their own Pens. This makes it easy to share your Pens with others or test them on multiple devices without having to log in. Anyone with the link to your public or private Pen can view it in Debug View.
  • PRO members can also view any member’s Pen in Debug View while logged into CodePen on a supported browser. If you’re not logged in and you try to view another member’s Pen in Debug View, you’ll see an error screen reminding you to log in.
  • If you’re a free member, you can view Debug View on your own Pens while logged into your CodePen account on a supported browser. If you’re logged out, you’ll see an error screen reminding you to log in.
  • Debug is disabled for anonymous Pens.
Was this article helpful?
YesNo