recoveryArea

javascript 1 min read

A smarter console.info

A tiny defensive wrapper that picks console.dir for objects and arrays and console.info for primitives — back when Firebug and Chrome disagreed about logging.

Console output showing the wrapper handling a string with console.info and an object expanded with console.dir

Here is a little piece of code you can use in your project for slightly smarter console messages. Objects and arrays are handled differently when logged to the console than strings. Firebug gives you a stringified version of the object while console.dir gives you an expandable object. Both give you the expandable object in Chrome. To work around this you can use this little snippet, it will always give you the correct version.

var debug = function(message) {
	"object" === typeof console && ("object" === typeof message || "array" === typeof message ? console.dir(message) : console.info(message));
};

Update — 2026-05

Fifteen years on and this wrapper has aged out. Firebug is gone (RIP), and Chrome, Firefox, Edge, and Safari all now show the same expandable object for console.info(obj). The dir-vs-info gap that motivated the wrapper isn’t there anymore.

If you still want to be explicit about whether you want a flat string or an expandable inspector, just call console.dir directly. Otherwise console.info is fine for both. Keeping the post here as a snapshot of what cross-browser console handling used to look like.