We had a weird bug come across the desk of CodePen Support the other day. It had to do with an expected infinite loop being triggered in someone’s JavaScript. It turned out to be perhaps one of the weirdest bugs we’ve chased down in quite some time! Sparing you the gory details, it was our own code causing the problem, and it had to do with the JavaScript that we run to power our console. Something with getters and setters on Objects and a console.log() statement that would cause recursion when we were traversing the Object in preparation for logging it.
The good news is twofold:
- We fixed that bug.
- We improved the console output a bunch while we were in there.
Nothing like a little “Hey, while you’re in there…” work once in a while. Let’s go through the console logging upgrades…
NodeLists now loggable
We’d just give up and point you to the browser console before. Now, if you have the results of a querySelector, querySelectorAll, childNodes or anything like that that returns references to DOM nodes, you’ll see what you got when you log it:
You’re shown the type you are logging
See above how we output [object NodeList]? That’s the exact type you are logging. It does that for other things too. Got an array? You’ll see [object Array] (along with the length, like NodeList). Got a Map? You’ll see [object Map].
Larger Limits
There comes a point where we say:
/* Log Skipped: Sorry, this log cannot be shown. You might need to use the browser console instead. */That’s still true. For example, if you console.log(window), that’s just too much for our little console to handle, so we’ll show that message above. But the limit before we do that is larger than before, and it doesn’t try to punt you to the browser console unless we really need to. When we do, it’s because we have to for performance reasons, and you’ll have a better time there anyway.
Better Highlighting
There were some code syntax highlighting abnormalities before. Now you should see anything you log properly highlighted just like it would be in an actual code editor.
A Console on Mobile
Mobile browsers don’t have native browser consoles like desktop browsers do. That can make it extra handy to have one in CodePen.
To be fair, the native browser console is a more fully-featured thing and most users find themselves using it quite a bit, even in addition to the CodePen console. But the CodePen console has some distinct advantages:
- It’s always in the right context. Meaning if you enter commands, like try to
querySelectorsomething, you don’t have to fix the context to be the CodePen<iframe>before doing so. - It works on mobile (see above).
- It’s part of the CodePen UI and you can share a Pen with the console open (see the URL update when you open the console).
The post Console Upgrades appeared first on CodePen Blog.