javascript - console.log inconsistent with JSON.stringify - Stack Overflow

admin管理员组

文章数量:1203220

I have reason to believe console.log and JSON.stringify can produce inconsistent views of the same object even if it was created in a straightforward manner (see notes).

Situation

In both Google Chrome developer tools and Firebug, I had an object obj which console.log printed out as { players: {0: ...}, ...}, while JSON.stringify reported { players: {}, ...}. obj.players was {} under both functions, so it seems that console.log is the culprit. Could it be asynchronous/non-deterministic in some way?

Additional notes

I'm afraid I won't be able to provide much more context, since the code is lengthy and for a client, but I can try if there is something that could help get to the bottom this. For the moment, I am forced to stay away from console.log for inspection.

It might be useful to know that the object is formed merely from an object literal by setting properties by hand, e.g., obj.players = {}; obj.players[0] = ....

Code

A sample of what I mean can be observed at /.

I have reason to believe console.log and JSON.stringify can produce inconsistent views of the same object even if it was created in a straightforward manner (see notes).

Situation

In both Google Chrome developer tools and Firebug, I had an object obj which console.log printed out as { players: {0: ...}, ...}, while JSON.stringify reported { players: {}, ...}. obj.players was {} under both functions, so it seems that console.log is the culprit. Could it be asynchronous/non-deterministic in some way?

Additional notes

I'm afraid I won't be able to provide much more context, since the code is lengthy and for a client, but I can try if there is something that could help get to the bottom this. For the moment, I am forced to stay away from console.log for inspection.

It might be useful to know that the object is formed merely from an object literal by setting properties by hand, e.g., obj.players = {}; obj.players[0] = ....

Code

A sample of what I mean can be observed at http://jsfiddle.net/9dcJP/.

• javascript
• firebug
• google-chrome-devtools

Share Improve this question Follow edited Jan 4, 2012 at 20:58 Peteris asked Jan 4, 2012 at 20:50 PeterisPeteris 3,75644 gold badges3131 silver badges4646 bronze badges 7

• 4 Why not just console.log(JSON.stringify(obj)); ? – Matt H Commented Jan 4, 2012 at 20:51
• Without providing the code, you could copy the JSON object and the two calls to a jsfiddle to show it reproduced in the simplest case. – RSG Commented Jan 4, 2012 at 20:52
• Sorry, console.log(JSON.stringify(obj)) was what I meant by using JSON.stringify. – Peteris Commented Jan 4, 2012 at 20:54
• 1 possible duplicate of Why does javascript object show different values in console in Chrome, Firefox, Safari? – davin Commented Jan 4, 2012 at 21:02
• 1 console.log does have some asynch issues in Chrome if you pass it an object and then modify that object immediately. You can work around it by reducing what you pass to console.log to a string first since strings are immutable, nothing gets changed before it's output. – jfriend00 Commented Jan 4, 2012 at 21:09

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 17

Why don't you just use console.dir(obj) instead? Or use console.log(obj) and then click on the output / expand it?

Also when I try the following code:

var obj = {};
obj.players = {};
obj.players[0] = {color: "green"};
obj.players[1] = {color: "blue"};
obj.world = "xyz";
console.log(JSON.stringify(obj));

I always (Firefox, Chrome, Opera) get this as output:

{"players":{"0":{"color":"green"},"1":{"color":"blue"}},"world":"xyz"}

Furthermore it looks like your players object is actually an array. So you should better create it as such.

Update: I just saw that you added a link to a JSFIDDLE demo, which empties the players object right after logging it. To my knowledge all web dev tools use some kind of asynchronous display, which results in an empty players object when using console.log(obj) or console.dir(obj). Firebug thereby offers the best results by displaying the object correctly using console.dir(obj).

To answer the question - yes, console.log operations are asynchronous so can't be relied upon to print accurate values in the console - especially if you modify the printed object straight after the console.log call (like you are doing).

If you take away the line:

obj.players = {};

then both the differences between the plain console.log and the JSON.stringify dissappear.

Bearing in mind that there is a difference between logging a real object in a developer tools console (console.log(obj) and printing the stringified version of the object (console.log(JSON.stringify(obj))). So the representation of the object will still be different.

本文标签： javascriptconsolelog inconsistent with JSONstringifyStack Overflow