Why does javascript object show different values in console in Chrome, Firefox, Safari?
In Chrome (WebKit, so Safari also), console.log
calls with object arguments log an object reference. Once the object tab is clicked and opened, the internals remain constant (presumably a cache of sorts) and are no longer related to the object initially referred to (so if at a later stage the object changes, this will not be reflected). However until that point the object remains "uncached". So when you log an object multiple times then open each logged object, they all point to the same object in memory, whose value is the most current updated one.
It's a well known "issue", although the behaviour is a result of a design decision (see comments on the first link), and so isn't considered a bug by the dev team.
Easy workarounds are any means to get a non-object value of the object, so any serialisation method (e.g. console.log(JSON.stringify(foo));
).
https://bugs.webkit.org/show_bug.cgi?id=35801
http://code.google.com/p/chromium/issues/detail?id=44720
http://code.google.com/p/chromium/issues/detail?id=50316
Question regarding Console.log in Chrome and Firefox
It is not a problem, it is how the console.log
works in some browsers. It is printing a link to the object, and once you open this object in the console it shows a current version of the object. See docs:
Don't use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).
This way you are sure you are seeing the value of obj at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change. This may not be what you want.
To see the version of the object in the moment of console logging try this:
let data = [
{A: 100232},
{A: 223434},
{A: 233434},
{A: 645455},
{A: 212334},
{A: 34343},
{A: 743434},
];
console.log(JSON.stringify(data));
data.sort(function(a, b){return b.A - a.A});
console.log(JSON.stringify(data));
Why is chrome inspector showing one thing for an array but another when expanded | Vanilla JS
There have been answers to similar questions here and here.
Essentially the object printed to the console is "lazily" evaluated when you expand the object, so if a reference to that same object somewhere else in the code makes a change to the object, the values you see in the console upon expanding the object will reflect that change. This is assuming you're using the Chrome debugger which your screenshot looks like.
new Date() shows differents results in Chrome or Firefox
This is just the behavior of the debug console. The two date values you showed are both the same, and are the correct value. You're just seeing the local time in Chrome, while Firefox chooses to show the UTC time in the debug console.
More accurately, Chrome, IE, and most other browsers simply call .toString()
on the object, while Firefox is calling .toISOString()
.
Note that Firefox has a bug that us showing the wrong name of the time zone (Standard instead of Daylight), but you can see the debugger value matches the ISO8601 UTC value.
Related Topics
Settimeout and "This" in JavaScript
Cancel a Vanilla Ecmascript 6 Promise Chain
What's the Fastest Way to Loop Through an Array in JavaScript
Jquery.Parsejson Single Quote VS Double Quote
How to Get All Selected Values from <Select Multiple=Multiple>
How to Save Image from Canvas with CSS Filters
Jquery Mobile - $.Mobile.Changepage Not Loading External .Js Files
How to Auto-Scroll to End of Div When Data Is Added
Get Caret Index in Contenteditable Div Including Tags
JSON Object Undefined in Internet Explorer 8
Why Can't I Add Properties to a String Object in JavaScript
Recursively Looping Through an Object to Build a Property List
Redirect Parent Window from an Iframe Action
Jquery Submit Form and Then Show Results in an Existing Div
JavaScript Function Name Cannot Set as Click