CODEWITHSUNDEEP
google-chromedeveloper-tools
user3871
user3871

Reputation: 12718

Chrome displays different object contents on expand

Why does Chrome display two differing datasets depending on if you have the object view expanded?

In contracted view, my object has two properties:

enter image description here

In expanded view, my object has three properties:

enter image description here

Upvotes: 12

Views: 11167

Answers (4)

Yuchao Wu
Yuchao Wu

Reputation: 383

You can get a real hard copy object by using this module. It will give you the snapshot of the object at moment when you call it.

https://www.npmjs.com/package/nest-object-deep-copy

const nestedHardCopy = require('nest-object-deep-copy');

console.log(nestedHardCopy(obj));

Upvotes: 0

Jehong Ahn
Jehong Ahn

Reputation: 2386

You can clone your object to prevent re-evaluate.

console.log(Object.assign({}, obj));

Upvotes: 3

Kwan
Kwan

Reputation: 73

@Gideon Pyzer is right. the properties were caculated and added after expanding the object in the console.

Just add one line code above your debug code and reopen the chrome dev tool, you will see the differences.

obj = Object.freeze(obj);  //add this line before your console.log
console.log(obj);

Before:

enter image description here

After:

enter image description here

one similar question of mine: Why can't I access the attr of the javascript object shown in chrome dev tool

Upvotes: 3

Gideon Pyzer
Gideon Pyzer

Reputation: 24028

The object you see in the console is a snapshot of the object at a particular point in time - the time when you logged it. When you expand the object, it will evaluate the properties again.

In the example below, I have created an object with two array properties. I logged it the console, and then I added a third property, c to it.

Snapshot

Only the first two properties are showing still, even though I just added a third property. After expanding the object in the console, I can see the third one. It is the latest state of the object.

Evaluated

If you hover over the little blue i icon, it explains what it has done:

Value below was evaluated just now.

Upvotes: 10

Related Questions