Extending the JavaScript console with history recording

The browser JavaScript console is a web developers best friend. Using console.log()  is essential for debugging your web apps. But there are a few annoyances. Two things that bother me for a while are:

  1. Reloading the page clears the console. Yes, there are settings for keeping the log, but personally I prefer to keep this turned off.
  2. Internet Explorer and Edge will only print to the console once the dev tools window has been opened. The console is always empty when opened, so anything you logged before this is lost.

Fortunately JavaScript is a very flexible language. Let’s make the console better!

Design goals:

  • Record all calls to the console’s log() , error() , warn()  and info()  functions.
  • Recall the console history by calling our own console.history()  function.
    • console.history()  shows the console history since the current page load.
    • console.history(true)  shows everything from the current session.

Here is my solution (also available at my GitHub tutorial repo). I have tried to annotate it to explain what is going on.


This entry was posted in Development, Tutorials and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *