What s the difference between console dir and console log

Question

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    gt  o     foo  1    gt  console log o   gt  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

User · Answer

Use console dir   to output a browse-able object you can click through instead of the  toString   version  like this   console dir obj this anything    How to show full object in Chrome console

User · Answer

Following Felix Klings advice I tried it out in my chrome browser   console dir  1 2   gives the following output   Array 2   0  1  1  2  length  2    proto    Array 0    While console log  1 2   gives the following output    1  2    So I believe console dir   should be used to get more information like prototype etc in arrays and objects

User · Answer

Difference between console log   and console dir     Here is the difference in a nutshell    console log input   The browser logs in a nicely formatted manner console dir input    The browser logs just the object with all its properties   Example   The following code   let obj    a  1  b  2   let DOMel   document getElementById  foo    let arr    1 2 3    console log DOMel   console dir DOMel    console log obj   console dir obj    console log arr   console dir arr     Logs the following in google dev tools

User · Answer

From the firebug site http   getfirebug com logging      Calling console dir object  will log an interactive listing of an object s properties  like   a miniature version of the DOM tab

User · Answer

I think Firebug does it differently than Chrome s dev tools  It looks like 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  and I think that s where the confusion might come from  Or it s just a bug in Chrome   In Chrome  both do the same thing  Expanding on your test  I have noticed that Chrome gets the current value of the object when you expand it    gt  o     foo  1    gt  console log o  Expand now  o foo   1  gt  o foo   2 o foo is still displayed as 1 from previous lines   gt  o     foo  1    gt  console log o   gt  o foo   2 Expand now  o foo   2   You can use the following to get a stringified version of an object if that s what you want to see  This will show you what the object is at the time this line is called  not when you expand it   console log JSON stringify o

User · Answer

Another useful difference in Chrome exists when sending DOM elements to the console     Notice    console log prints the element in an HTML-like tree console dir prints the element in a JSON-like tree   Specifically  console log gives special treatment to DOM elements  whereas console dir does not  This is often useful when trying to see the full representation of the DOM JS object   There s more information in the Chrome Console API reference about this and other functions

User · Answer

None of the 7 prior answers mentioned that console dir supports extra arguments  depth  showHidden  and whether to use colors   Of particular interest is depth  which  in theory  allows travering objects into more than the default 2 levels that console log supports   I wrote  in theory  because in practice when I had a Mongoose object and ran console log mongoose  and console dir mongoose    depth  null     the output was the same  What actually recursed deeply into the mongoose object was using util inspect   import   as util from  util   console log util inspect myObject   showHidden  false  depth  null

User · Answer

Well  the Console Standard  as of commit ef88ec7a39fdfe79481d7d8f2159e4a323e89648  currently calls for console dir to apply generic JavaScript object formatting before passing it to Printer  a spec-level operation   but for a single-argument console log call  the spec ends up passing the JavaScript object directly to Printer  Since the spec actually leaves almost everything about the Printer operation to the implementation  it s left to their discretion what type of formatting to use for console log

User · Answer

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    gt  console log  foo     foo    gt  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    gt  console log  1 2 3    1  2  3    gt  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

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

Examples related to javascript

Examples related to google-chrome

Examples related to console