The CodePen Editor has it’s own console which can be used to log data to from JavaScript or run commands which will be sent and executed in the preview.
In all fairness, it isn’t nearly as powerful as the DevTools console that is built into most browsers, so it’s common that you’ll just want to use that. But the CodePen console has a couple of distinct advantages that make it worthwhile:
- It is built into the UI, meaning you can open and use it without shrinking the entire UI as happens with the built-in console when it is docked into the window. You can also share a Pen with the console open in case that is helpful in understanding your Pen.
- It is always in the correct context. When you open the DevTools in the CodePen Editor, the context is the
codepen.iopage you’re on itself, not the<iframe>where the preview is being shown. You can manually change that context, but it’s nice to have a console that is always in the correct context.