Different property value is displayed when JavaScript object is expanded in Chrome console

Question

I'm doing some JavaScript debugging with Chrome dev tools and found the following oddity.

How is it possible that date has a different value when the object is expanded?

Answer 1

You should be careful with chrome console when printing objects. Please note that chrome does evaluations when printing / expanding objects as well as it does it asynchronously (meaning other code may execute in the meantime and change the object). Always try to print to String for debugging, rather than printing the object itself.

I made a very simple example to illustrate the problem.

<div id="foo"></div>

console.log($('#foo')); //expected output [div#foo...]
$('#foo').attr('id','hello');

The actual output in the chrome console is:

Try it yourself here (JSFiddle).