Debug Mode is a feature we designed for—you guessed it—debugging your code. The debug view of your Pen shows you the result of your code without the CodePen frame around it. It makes it easier to focus in on what’s going on with your code as you wrote it, since you can rule out any CodePen influence.
We’ve been a bit reluctant to promote the debug feature lately because it had a flaw we had to fix first. For awhile, the debug view of free members’ Pens was available to anyone without any limitations. This opened it up to abuse by spammers. We didn’t want to take away debug view from our free members because of a few bad actors, but we also had to prevent spammers from making trouble with it.
I gave the problem to Jake, and he came up with a solution that keeps debug mode available to all of our members. Here’s how debug mode access works now:
Debug Mode for PRO Members
If you’re a PRO member, you can always see the debug view of your own Pens, even if you’re not logged in. In fact, anyone can see the debug view of your Pen, whether they have a CodePen account or not. This makes it easier to debug your code on multiple devices without logging in, or share a “clean” view of your Pen with clients or coworkers.
Keep in mind that Debug View is a static view of your Pen as you last saved it. If you want a view of your Pen that updates as you code, use Live View! Live view updates itself in real time as you code.
PRO Members can also see the debug view on any CodePen member’s Pen while logged into CodePen. This is handy if you’re helping a free member debug something, or you just want to get a look at a cool Pen outside the iframe 😉
Debug Mode for Free Members
If you have a free CodePen account, you can access the debug view of your own Pens while you’re logged into CodePen. This is enabled by a temporary hash. The hash refreshes itself for you while you’re logged in, so you can visit your own Pen’s debug view for as long as you need to work with it.
If you’re logged out, or you visit the debug view of a another free member’s Pen, you’ll see this page:
You can either visit the full view of the Pen from the link on the page, or log in to access the debug mode of your own Pen.