Why Does Chrome's JavaScript Console Show Inconsistent Object Values Compared to Firefox?

Chrome's JavaScript Console: Lazy Object Evaluation Enigma

In the realm of debugging tools, the JavaScript console is an invaluable asset. However, users have encountered inconsistencies between Chrome and Firefox when logging objects.

The Issue

Consider this code:

var s = ["hi"];
console.log(s);
s[0] = "bye";
console.log(s);

In Firefox, the console accurately logs the array as:

[ "hi" ]
[ "bye" ]

However, Chrome's JavaScript console (version 7.0.517.41 beta) inexplicably logs both statements as:

[ "bye" ]
[ "bye" ]

Bug or Lazy Evaluation?

The question arises, is this a bug or a peculiarity of Chrome's console?

Investigating the Bug

Upon searching, an existing unconfirmed Webkit bug was discovered (https://bugs.webkit.org/show_bug.cgi?id=35801) that explains this exact issue.

Debating the Severity

The bug's severity is a matter of debate. Some argue that it constitutes a genuine bug, while others maintain that it falls within the tolerable range.

Avoiding the Issue

Despite the debate, there's a simple solution to avoid this behavior in your code:

var s = ["hi"];
console.log(s.toString());
s[0] = "bye";
console.log(s.toString());

By converting the object to a string representation (via toString), you effectively create a static image that won't be affected by subsequent modifications. The console will then output this snapshot:

hi
bye

The above is the detailed content of Why Does Chrome's JavaScript Console Show Inconsistent Object Values Compared to Firefox?. For more information, please follow other related articles on the PHP Chinese website!