What's the Difference Between Console.Dir and Console.Log

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

In Firefox, these function behave quite differently: log only prints out a toString representation, whereas dir prints out a navigable tree.

In Chrome, log already prints out a tree -- most of the time. However, Chrome's log still stringifies certain classes of objects, even if they have properties. Perhaps the clearest example of a difference is a regular expression:

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

You can also see a clear difference with arrays (e.g., console.dir([1,2,3])) which are logged differently from normal objects:

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

DOM objects also exhibit differing behavior, as noted on another answer.

What differs between console.log and console.dir?

The way the information is presented is different. For example, in Firebug, if I do this:

a = { foo: "foo", bar: "bar" };

And then I do:

console.log(a)

I get:

Object { foo="foo", bar="bar"}

If I do this:

console.dir(a)

I get:

bar    "bar"
foo    "foo"

If I had nested objects, I would have the little twisty controls (MDN calls them "disclosure triangles") so that I could easily dig deeper into the object properties.

Depending on the tools you are using, YMMV.

What does the `dir` in `console.dir` stand for?

It just means "Directory". Directory is a synonym for index, list, listing, register, catalogue, record, archive, inventory etc. Some of those words might have been a better fit for this function though, like "listing".

Why are console.log() and console.dir() logging Object properties that don't exist yet?

It’s not a bug, though it could be considered unintuitive. When you inspect a logged object, you’re inspecting it as it currently exists and not as it was when you logged it. To keep the rich inspection and ignore future modifications, you’ll have to log a deep copy of the object, which isn’t easy to do.

In this example, a quick (enumerable-own-properties-only into a new Object) shallow copy works, though:

function copyObject(obj) {
    var result = {};

    Object.keys(obj).forEach(function (key) {
        result[key] = obj[key];
    });

    return result;
}

var o = {};
console.log(o);
console.log(copyObject(o));
o.prop = 'value';

Difference between console.log() and console.debug()?

For at least IE, Firefox and Chrome consoles, .debug() is just an alias for .log() added for improved compatibility

https://developer.mozilla.org/en-US/docs/Web/API/console

https://developers.google.com/chrome-developer-tools/docs/console-api#consoledebugobject_object

https://msdn.microsoft.com/en-us/library/ie/hh772183(v=vs.85).aspx

Difference between %o and %O in console.log (javascript)

There are some slight differences between the two. From the console standard:

4. If specifier is %o, optionally let converted be current with optimally useful formatting applied.

5. If specifier is %O, optionally let converted be current with generic JavaScript object formatting applied.

The standard then describes the difference between optimally useful formatting and generic JavaScript object formatting here:

An object with generic JavaScript object formatting is a potentially
expandable representation of a generic JavaScript object. An object
with optimally useful formatting is an implementation-specific,
potentially-interactive representation of an object judged to be
maximally useful and informative

One way to think about the difference between the two is %O is like using console.dir() as this will log the object's generic JavaScript object formatting, showing you specific properties of the object, whereas using %o is like using console.dirxml() or regular console.log() as this will log the object in its optimally useful formatting, which can be a developer-friendly/simplified representation of the object. As a result, %o will usually give you what you're after, but %O can give you further details such as the object's properties.

You can see the difference in certain objects, below are some of these objects:

const regex = /abc/;
console.group("Regex object");
console.log("optimally useful formatting (%%o): %o", regex);
console.log("generic JavaScript object formatting (%%O): %O", regex);
console.groupEnd();

const fn = () => "foo";
console.group("Function object");
console.log("optimally useful formatting (%%o): %o", fn);
console.log("generic JavaScript object formatting (%%O): %O", fn);
console.groupEnd();

const ul = document.querySelector("ul");
console.group("DOM node");
console.log("optimally useful formatting (%%o): %o", ul);
console.log("generic JavaScript object formatting (%%O): %O", ul);
console.groupEnd();

<ul><li>1</li><li>2</li><li>3</li></ul>

console.log/console.dir showing last state of object, not current

That's a known issue -- sounds like you are running under Chrome.

The easiest work-around is to JSON encode the value as you log in.

console.log(JSON.stringify(a));

---

Related Topics