Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

You probably know about our Full Page View. All Pens have a URL where you can view the result in (almost) the entire browser window (example).

We now have another version of the Full Page View called Debug View. Just put in /debug/ in the URL instead of /full/. It shows the result outside of an iframe and without the CodePen header. The difference between the /full/ view and /debug/ view bears some explanation.

The Full View shows your demo inside of an iframe. This allows us to do some sandboxing and some other nifty feature for security and quality. But, that also means that when you open your web developer console, the context is the parent page, not the Pen itself. That can make debugging difficult — you can switch the context from the parent to the iframe, but that’s a bit of a pain to have to do all the time, especially since that setting doesn’t stick and we can’t default it.

Debug View serves up the demo without the iframe or the CodePen header to make debugging easier. An example URL would be like: http://codepen.io/chriscoyier/debug/fpaJe

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’ debug view is available even while you’re logged out. This makes it easier to use the debug view on your mobile device because you don’t have to go through the log in process.