The JavaScript Editor (in the Pen Editor) is now smarter.
While it used to catch syntax errors (like malformed JavaScript, e.g. var 1 = 2). It will now catch other errors also.
For example:
let buttons = document.querySelectorAl("button");
querySelectorAl isn't a syntax error, it's just an incorrect spelling of a DOM method. It will throw an error. For a long time, in order to see that error, you'd have to open your browser console. CodePen would tell you nothing.
Now, we report that error to you!
We try to be chill about it, as your eyes might spot that typo as you're writing it, and we don't want to cause any weird reflow in your editor or bug you too much. So all you'll see is an error icon in the editor:
Click it to see what's going on:
Note that our in-app Console also has the information now, and may have more details in some cases.
The post The JavaScript Editor Now Catches More Errors and the Console Shows Them appeared first on CodePen Blog.