Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 396
CuriousSuperhero Avatar asked Jul 15 '15 08:07

CuriousSuperhero


People also ask

How do you get all properties of a JavaScript function in console we use?

The dir() method displays an interactive list of the properties and methods of the specified JavaScript object.

Which JavaScript property is used to add new properties and methods to objects?

Prototype is used to add new properties and methods to an object.

How do you add a property that is a function to an object JavaScript?

One way is to add a property using the dot notation: obj. foo = 1; We added the foo property to the obj object above with value 1.

Can we change the value of object in JavaScript?

Using the same method, an object's property can be modified by assigning a new value to an existing property. At this point, if we call the object, we will see all of our additions and modifications. Through assignment operation, we can modify the properties and methods of a JavaScript object.


1 Answers

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:

example image

Try it yourself here (JSFiddle).

like image 157
SDekov Avatar answered Oct 16 '22 02:10

SDekov