title: What's the difference between console.dir and console.log?
body: <p>In Chrome the <code>console</code> object defines two methods that seem to do the same thing:</p>
  
  <pre><code>console.log(...)
  console.dir(...)
  </code></pre>
  
  <p>I read somewhere online that <code>dir</code> takes a copy of the object before logging it, whereas <code>log</code> 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.</p>
  
  <p>Try this in the Chrome console (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd>) to see what I mean:</p>
  
  <pre><code>&gt; o = { foo: 1 }
  &gt; console.log(o)
  &gt; o.foo = 2
  </code></pre>
  
  <p>Now, expand the <code>[Object]</code> beneath the log statement and notice that it shows <code>foo</code> with a value of 2.  The same is true if you repeat the experiment using <code>dir</code> instead of <code>log</code>.</p>
  
  <p>My question is, why do these two seemingly identical functions exist on <code>console</code>?</p>