JavaScript Console Fix V2 Now with iOS!

September 13th, 2010 by Mike Wilcox

The consoleFix.js has been a popular script, helping people overcome problems in the various browsers, but now, there are more features including support for your iPhone.  consoleFix is a small JavaScript file that removes the annoyances of cross browser logging. The use of console.log is now a standard used by not only Firebug, but WebKit Inspector and Internet Explorer Developer Tools. Firebug is ubiquitous with front end web development, and while it provides dozens of tools like DOM inspection and network sniffing, the logger gets the vast majority of use.

While log, warn, and info may be standard, using the groupCollapsed method will throw an error in Chrome, and the seemingly innocuous debug will throw an error in IE. Opera’s Dragonfly is an improvement over it’s anemic predecessor, but it still rivals IE’s feeble text-only logger and thus, only supports a small subset of console methods.

This post is a followup to my previous one, Fixing the JavaScript Console.  You can find my source code at consoleFix.js.  But in general, the feature set is as follows:

  • Clears logs on refresh in IE8
  • Adds empty methods for all Firebug commands not supported in IE
  • Fixes lack of space between log arguments in IE
  • Nullifies all console methods for deployment for all browsers

One new item in this release is a fix for the console nullification. If there is no console in the environment, all logs are caught, whether you’ve set your global debug property to true or not.

Updates for IE

Version 2 of consoleFix.js still has a primary focus of making the console work properly in IE with an additional feature added. I had run into an IE-only code bug that was not properly being caught and turned into a continuous loop. What this did was flood the console with messages until it crashed the browser. The new feature adds a limit to the number of logs that can be written to the console of 299, which can be changed by setting window.loglimit.

iOS Support

A very useful addition is handling the console in iOS (iPhone and iPad). iOS uses the same debugger as the old Safari did, previous to its Firebug-like Inspector. It’s nice to have a logger, but it’s rather pitiful; it only handles the core-four methods. But worse, it doesn’t handle a comma-delineated list of arguments, ignoring all after the first. The following is a typical panel showing the sample messages from the consoleFix.html test. The normal output on the left and the “fixed” output on the right:

In the image to the left, the first message displays “Test LOG”, which is not correct, because the code actually is six words in separate arguments:

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

The panel on the right shows what the output looks like when consoleFix.js is used: “Test LOG Test running arguments together”.

I would say that consoleFix gets the console working on iOS “good enough”, but not perfect. By overwriting the console methods, the line numbers given are now inaccurate and always reflect the line in consoleFix.js. This usually doesn’t matter, but if you have an error occurring only on iOS and don’t know the line number where the error occurs, simply comment out consoleFix to get correct line numbers.

It’s also unfortunate that you only get two lines for your log message and one line is taken up by the file and line number indicator. This indicator always occurs if the log happens within a function, but does not occur if triggered from the window level. This apparently is to assist in debugging but it’s really just annoying. But again, it is nice to have some kind of logging in this environment.

Better Support for Other Consoles

consoleFix uses feature detection to loop through and test for the existence of all Firebug methods and nullifies them if they don’t exist. In Chrome, this will nullify groupCollapsed; so if you are using that method in Firefox and test in Chrome, it won’t throw an error. This feature extends to Opera as well, nullifying all of the Firebug methods except the core four: log, info, warn and error.

Conclusion

In summary, consoleFix helps the console work better cross browser, turns it off in production mode and fixes the quirks in some browsers to increase its usefulness and minimize errors caused by debugging.

  • Clears IE8 logs on refresh
  • Adds empty methods for all Firebug commands not supported in IE
  • Fixes lack of space between log arguments in IE
  • Limits the number of messages logged in IE to prevent crash
  • Nullifies all console methods for deployment
  • Nullifies console methods if they don’t exist (trace, groupCollapsed)
  • Fixes the multi-argument problem in iOS

The consoleFix example page has the test and links to the JavaScript file and the Google Project.

Be Sociable, Share!

Tags: , , , , , , , ,

Comments are closed.