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
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:
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.
Getting to Debug View
You can reach the Debug View on your own Pens through the Change View menu while logged in:
/debug/ in the Pen’s URL.
- 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.