Rewiring the JavaScript Console in CodePen

JavaScript hackers are familiar with using the functions in the console module to print output from their code. When your code runs in a browser, the console output is sent to the web inspector’s error console. Otherwise, if it’s running in NodeJS then the console output is sent to stdout or stderr in your terminal.

Wouldn’t it be cool if you could rewire the console in CodePen to print messages to the result panel, instead of being hidden away in the web inspector? Behold the rewired console:

See the Pen CodePen JavaScript Console Template by Josh Bassett (@nullobject) on CodePen.

Now you can use the standard console.log, console.info, console.warn, and console.error functions to print messages to the rewired console. You can even call console.clear to clear all messages.

What if your pen produces so much output that the result panel overflows and you can no longer see the messages as they are printed? The answer is the console.follow function.

If you enable following then the console will scroll to the bottom every time a message is printed. Here’s an example:

See the Pen FKit: Signals by Josh Bassett (@nullobject) on CodePen.

If you would like to use console rewiring in your next pen, then simply fork this pen to get started.

Enjoy!

Discuss this article on Hacker News.

comments powered by Disqus