Sunday, June 2, 2024
111
rated 0 times [  114] [ 3]  / answers: 1 / hits: 148071  / 12 Years ago, tue, august 14, 2012, 12:00:00

In Chrome the console object defines two methods that seem to do the same thing:



console.log(...)
console.dir(...)


I read somewhere online that dir takes a copy of the object before logging it, whereas log just passes the reference to the console, meaning that by the time you go to inspect the object you logged, it may have changed. However some preliminary testing suggests that there's no difference and that they both suffer from potentially showing objects in different states than when they were logged.



Try this in the Chrome console (Ctrl+Shift+J) to see what I mean:



> o = { foo: 1 }
> console.log(o)
> o.foo = 2


Now, expand the [Object] beneath the log statement and notice that it shows foo with a value of 2. The same is true if you repeat the experiment using dir instead of log.



My question is, why do these two seemingly identical functions exist on console?


More From » google-chrome

 Answers
63

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.


[#83648] Monday, August 13, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lucianod

Total Points: 667
Total Questions: 106
Total Answers: 92

Location: Jordan
Member since Thu, Aug 5, 2021
3 Years ago
lucianod questions
;