Why Do Console Logs Show Different Values in Chrome, Firefox, and Safari?

Console Object Value Differences in Chrome, Firefox, and Safari

In JavaScript, objects are stored by reference, meaning that console.log calls with object arguments log an object reference. This can lead to surprising behavior when viewing the object in the console.

In Firefox's Firebug, logging an object consistently shows the correct values:

Object { bar=1111 }
1111

Object { bar=2222 }
2222

However, in Chrome's and Safari's consoles, a different behavior is observed:

Object { bar=2222 }                      // Object shows updated value
1111                                      // Attribute value remains unchanged

Object { bar=2222 }                      // Object shows updated value
2222                                      // Attribute value is correct

This inconsistency stems from the design decision in Chrome (and Safari, as it uses WebKit) to cache the object after the first console.log call. The cached value is used for all subsequent console.log calls, even if the object is updated in the meantime.

To avoid this confusion, it's recommended to use non-object methods to log object values, such as:

console.log(JSON.stringify(foo));      // Serializes the object into a JSON string

Alternatively, you can use Chrome's toJSON and valueOf methods, which provide similar functionality:

console.log(foo.toJSON());                // Invokes the object's `toJSON` method (if defined)
console.log(foo.valueOf());               // Invokes the object's `valueOf` method (if defined)

By using these techniques, you can ensure that the values displayed in the console are consistent with the actual state of the object.

The above is the detailed content of Why Do Console Logs Show Different Values in Chrome, Firefox, and Safari?. For more information, please follow other related articles on the PHP Chinese website!