What's the difference between console.dir and console.log?

Detailed comparison

Browser implementations

Here's a fun fact: different browsers have their own way of going about console.log and console.dir. For instance, Firefox usually presents a no-nonsense toString representation with console.log, hiding all the gory details. But console.dir, that cheeky peek, unveils a detailed, navigable tree structure, exposing the object for what it really is!

Arrays and DOM

When it comes to arrays and DOM objects, console.dir really shines. Chrome, for example, even has unique outputs set aside for these kinds in console.dir, producing a full DOM JavaScript object representation in the style of JSON. Conversely, console.log seems to favor an HTML-esque tree view, which nicely represents the given DOM structure but not always the properties within.

Dealing mutations and complexity

Now, here's where console.dir becomes the Sherlock Holmes of logging. Changes made to objects after logging are reflected in the console output – a blessing for every confused dev who's ever wondered why their newly updated objects are stubbornly displaying their old state.

console.dir(yourObject);  // "Wait, you changed your object? Let me get my monocle."


If you're working with objects that have more layers than a mille-feuille pastry, opt to use console.dir with the depth argument to control the levels of detail to be displayed.

console.dir(yourObject, { depth: null });  // "Dive deep, I say! Print ALL levels!"


Alternatives

Console methods have limitations – gasp! For cases like Mongoose objects, the Node.js method util.inspect might make your life a little easier.

util.inspect(yourObject, { showHidden: false, depth: null }) // "I see your Mongoose object and raise you a util.inspect"


And not to forget our handy dandy JSON.stringify(o), which takes a snapshot of the object state right then and there as a JSON string. Do note this guy doesn't really handle methods and symbols.

JSON.stringify(o)  // "Everybody freeze! This is a stick-up (state snapshot), I mean!"


Documentation

Browser makers do share their wisdom in docs. Brush up on Chrome's Console API documentation or Firefox's Firebug for a glimpse into the wonderful, slightly frustrating world of console functions.

More fun features

Interactive sleuthing

Here's a cool thing: console.log in modern browsers like Chrome or Edge even allows combat-style interaction. Simply click or hover to lock and attack. Find and inspect all!

Upping your console.log game

The devs from console formatters have a few tricks up their sleeve. They've magicked both console.dir and console.log to allow extra custom styles. Go on, let your logs dazzle!

Formatting symbols

Chrome supports log formatting with placeholders such as %o or %s. Modify away and tailor your log output!

Pitfall alert

Don't forget, logging mutable objects can be a roller coaster ride. Changes to the object after the log command may not be presented – confusing, right? Ah, the beauty of software development!