title: JavaScript logging object with mutating state
body: <p>This JavaScript code...</p>
  
  <pre><code>var o = {};
  console.dir(o);
  o.foo = "bar";
  console.dir(o);
  </code></pre>
  
  <p>...results in the same interactive tree output shown twice:<br>
  <img src="https://i.stack.imgur.com/2XOBH.png" alt="Two objects with foo:&quot;bar&quot; shown"><br>
  This issue is discussed as a bug <a href="https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays">here on Stack Overflow</a>, logged as a <a href="http://code.google.com/p/chromium/issues/detail?id=45623" rel="nofollow noreferrer">Chromium bug</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=35801" rel="nofollow noreferrer">WebKit</a> (and I imagine elsewhere).</p>
  
  <p>I understand the implementation reason that this is the case, but it makes debugging stateful objects hard (without using the interactive debugger). What strategy do you use for logging in such situations, where you need to see the differing states of the object in each log call? <code>JSON.stringify()</code>? Is there a console method for serialization that can be used?</p>