Fixing the JavaScript Console

April 19th, 2010 by Mike Wilcox


Firebug, the massively successful Firefox addon is an awesome development tool, but it’s not perfect. Carelessness in using it can lead to irritating and even embarrasing errors. And the console built into Internet Explorer 8? It’s great that web developers finally have something to help us develop on IE, but it is still pretty lame. When you consider working with both of them both together, you have even more problems. In general, it’s very undesirable to have debugging code cause bugs. Fortunately, there’s a very simple way of virtually eliminating these debugging errors.


Club AJAX has long planned on producing useful, open source code, and we are pleased to announce our first release. consoleFix.js is designed to fix the aforementioned problems faced with debugging. The problems with IE8′s console are many, but as you shall see, our script fixes the most egregious amongst them.

The primary annoyance with the IE8 console is that it doesn’t clear the logs upon refresh. This is not just inconvenient. If there are too many logs in the IE console, it will slow to a crawl and sometimes crash. consoleFix includes this simple bit of code:


try{ console.clear(); } catch(e) {}

In spite of its flaws, the IE8 console API does include the clear() command in what is otherwise a pretty sparse collection. On page load (or when the script is executed) the console is cleared. The try-catch is used because this will throw an error if the console is closed.

As to that sparse collection, that’s a another cause of IE8 console annoyances. Generally we develop our websites in Firefox, using Firebug, then jump over to IE to see how things are working. Several Firebug commands, in fact most of them, don’t work in IE, including the simple console.debug():

consoleFix adds empty methods for all Firebug commands not supported in IE. In addition to debug, there are time, timeEnd, count, assert, and many more. With this script you can jump between IE and Firefox without having to go in and comment out or remove all of your debugging code.

The last IE8 console annoyance addressed is that the arguments run together. Firebug formats the output of log commands with spaces in between so that they are readable and because… well it just makes sense. In IE8, these spaces are left out altogether making for some rather unreadable event statements. It appears that the IE8 team was either in a hurry to get this out the door or they still use the archaic alert("my"+" "+"message"). In IE, this is what the following command looks like:


console.log("Test LOG", "Test", "running", "arguments", "together");

Notice how the output of the log statement runs together and is not very readable. After including consoleFix, the line is properly formatted:

It’s not clear why the IE Developer team left out something so obvious. Having used alerts for so long, perhaps they thought that the new way to log would look something like: console.log("my", " ", "message");. At this rate, the IE9 team will be working on a new convention: console.getLoggerFactory(new Logger()).message('"'+string("my") +'"'+'"'+string("message") )

There is one additional feature in consoleFix, and that is the ability to “turn the console off”, which works in all browsers that have a console: Firefox, IE, Safari, and Chrome. Opera also benefits, as its error logger is drastically different and supports even fewer commands than IE. Turning the console off is especially useful for code that is in production but still under development. A few stray console.log commands left in your code can easily escape your notice, because you have developer tools installed such as Firebug. Then you get a call from the client who tells you something cryptic like, “The page is loading but the button doesn’t work and the interface looks scrambled!” Translation: the browser threw an error on a console command, and certain JavaScript didn’t run and some widgets didn’t load.

By default, the console is nullified by looping through all of the Firebug commands and setting them to empty functions. If there is code in the page before the consoleFix script loads that has debug=true, or is somewhere in the URL, the console loads and logs as normal. There is also an additional check for the existence of the console object — so even if your forget to set debug=false, a console object will be created and the commands nullified.

Conclusion

The consoleFix.js provides stub functions to ensure that the console API is uniform amongst the common browsers to prevent debugging errors, clears the IE logs on load and reformats them with spaces, and adds the ability to turn off all logs for production. It is available at the Club AJAX Google code page. The license is as liberal as is available. It is all original code, and you may use it freely in any manner you wish, personal or business. Keep an eye on that page and this blog, because there is plenty more code to come!

Tags: , , , , , , , ,

5 Responses to “Fixing the JavaScript Console”

  1. [...] This post was mentioned on Twitter by Club AJAX. Club AJAX said: Blog Post – A JS snippet that will fix the IE console, and help prevent debugging errors in production. http://bit.ly/a5RinT [...]

  2. gary acord says:

    dashing to check out this code. sweet idea guys!

  3. [...] rest is here: Fixing the JavaScript Console « Club AJAX – Dallas Ft. Worth Area … If you enjoyed this article please consider sharing [...]

  4. This is awesome – great work!

    As I was reading this post I couldn’t help but roll my eyes at Microsoft. For a company that is so good at buying up other companies to get their hands on their products instead of developing their own you would think it would have been nothing to ensure that their own debugger was *at least* on par with the competitors. Seems to me that they do not intend for developers to be using any tools other than ones you have to buy from Microsoft to develop and debug your code with and are once again out of sync with how users actually wish to use their software. It is not my intention to turn this into an anti-Microsoft reply, but it’s just that this type of action is inline with the same bumbled decisions Microsoft has been making about the internet, and their involvement in it’s growth, since the mid to late ’90s. If they haven’t gotten it by now I’m not sure they ever will.

  5. [...] consoleFix.js has been a popular script, helping people overcome problems in the various browsers, but now, there [...]