CODEWITHSUNDEEP
javascript
user5372
user5372

Reputation: 175

Inconsistent Object Displayed in Google Dev Tools

I console.log an object and I am confused, because in the first line the x- and y-value are different from the values that are displayed inside. What is wrong?

JS

{ 
 x: ...
 y: ...
 x-home: ...
 y-home: ....
}

screenshot of dev tools

Upvotes: 0

Views: 24

Answers (1)

Dan Prince
Dan Prince

Reputation: 29989

Chrome dev tools won't freeze the object when you log it. When it renders the first time it checks the values and that's what you see on the preview line.

If you type.

var a = { b:3, c: 4, d: 5, e: 6, f: 7, g: 8 };

You'll get 

Object {b: 3, c: 4, d: 5, e: 6, f: 7…}

Change one of the properties:

a.b = 10;

Then expand the preview of the last log and the dev tools will render the current state of the object with a.b === 10, even though it had already shown you the preview with a.b === 3.

So if your x property changes between you logging it and you expanding the preview, that should explain why.

Upvotes: 1

Related Questions