I've been reading Coders At Work by Peter Seibel, and one question he asks in every interview is "How do you debug - print statements, debugger like gdb, or something else?". For me, print statements are my first tool for any situation. That's why Firebug is so crucial to my work on the web, because writing and debugging advanced JavaScript would be a nightmare without it. While working on code, my files are littered with console.log() statements and the like. Unfortunately, shipping code with these statements is a no-no, so I usually pull them out. Frustrated with this process, I decided to build an alternative and throw some new features in along the way.

consul.log("This is a log message");
consul.warn("I even support fancier %s features like %o.", "Firebug", "format strings");
consul.turnOff();
consul.assert(false, "I'm off, so you won't see this error fire.");
consul.turnOn();
consul.info("See this message in Firebug, Chrome, Safari, Firebug Lite, IE8, and Opera.")

Meet consul.js, which acts as a wrapper for the standard window.console features from Firebug. Using it is simple, as you see above. Just include the file, and start using consul instead of console. You can easily turn it off for your live code, but have easy access to the messages by simply turning it back on from the command line.

In addition to what you'd expect, using consul.js ensures that you can view your messages and assertions in any browser. Currently, it supports the latest versions of Firebug, Chrome, and Safari (you'll need the JS console for the latter two). I also built in support for most commands in Internet Explorer 8, provided you've got the developer tools open. Opera Dragonfly support was harder, since it doesn't offer much logging features. However, most things work through window.opera.postError(). Regardless, for IE and Opera (as well as any other browser), it checks for Firebug Lite and outputs there if it finds it, instead of the built-in dev tools.

For a list of features and browser support, look no further than the code itself:

var consoleFuncs = {
	log         : b("firebug", "firebuglite", "chromium", "safari", "ie", "opera"),
	debug       : b("firebug", "firebuglite", "chromium", "safari"),
	info        : b("firebug", "firebuglite", "chromium", "safari", "ie", "opera"),
	warn        : b("firebug", "firebuglite", "chromium", "safari", "ie", "opera"),
	error       : b("firebug", "firebuglite", "chromium", "safari", "ie", "opera"),
	assert      : b("firebug", "firebuglite", "chromium", "safari", "ie", "opera"),
	dir         : b("firebug", "firebuglite", "chromium", "safari"),
	dirxml      : b("firebug", "firebuglite", "chromium", "safari"),
	trace       : b("firebug", "firebuglite", "chromium", "safari"),
	group       : b("firebug", "firebuglite", "chromium", "safari"),
	groupEnd    : b("firebug", "firebuglite", "chromium", "safari"),
	time        : b("firebug", "firebuglite", "chromium", "safari"),
	timeEnd     : b("firebug", "firebuglite", "chromium", "safari"),
	count       : b("firebug", "firebuglite", "chromium", "safari")
};

If a function is not supported in a particular browser, it will simply be ignored, rather than throwing an error.

So give it a shot, and let me know what you think! This tool helped me build this blog's front-end code, and has already been ported into the code I use at work, so I can take advantage of the same tool. I think it's a big win for JavaScript developers who rely on the Firebug console, and introduces a lot of new flexibility without degrading simplicity.