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

  • No CodePen header
  • Preview is not in an iframe
  • No CodePen influence whatsoever

It's just a totally raw, rendered view of the code you authored in a Pen. It can be great for debugging.

If you're a free user, you can only view Debug Mode on Pens you own and while logged into CodePen. If you're a PRO user, your Pens can be seen in debug view 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:

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 need the preview to be outside of an iframe for easier JS console access.

debug-view

Notes

  • Free members can access debug view on their own Pens while logged in. If you're not logged in, the /debug/ URL will redirect to Full Page View.

  • Anyone can see a PRO members' public Pens in debug view without logging in. If you share a link to a private Pen with someone, they can also see it in debug view without logging in.

  • If you're a PRO member, you can switch to the debug view of your Pen while logged out by changing /pen/ to /debug/ in the Pen's editor URL.

  • Debug is disabled for anonymous Pens.