Debug View is similar to Full Page View in that it shows you a full page preview of your Pen.

But, Debug View is different because:

  • There's no CodePen header
  • The preview is not inside an iframe
  • The view has no CodePen influence whatsoever

Debug Mode is very useful when you need to do some testing on your code and you need it to be 100% exactly as you have written it. Perhaps there is something you think CodePen is doing wrong to your code, or perhaps you just need the preview to be outside of an iframe.

debug-view

It's just a totally raw, rendered view of the code you authored in a Pen. It's great for debugging, or just showing off your code!

If you're a free member, you can view Debug Mode on your own Pens while logged into CodePen.

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 or view it on your mobile device, since you don't have to go through the log in process.

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

Or, you can change /pen/ to /debug/ in your Pen's URL.

Debug Mode Access

  • If you're a free member, you can view debug mode on your own Pens while logged into your CodePen account. If you're logged out, you'll see an error screen reminding you to log in.

  • PRO members don't have to log 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 mode.

  • PRO members can also view any member's Pen in debug mode while logged into CodePen. If you're not logged in and you try to view another member's Pen in debug mode, you'll see an error screen reminding you to log in.

  • Debug is disabled for anonymous Pens.