Does console.log() Always Show the Initial Values of Arrays and Objects in Google Chrome?

Google Chrome's Console.log() Behavior with Objects and Arrays

Issue:

In Google Chrome, when a nested array or object is logged using console.log(), the subsequent modification of the array or object's values leads to the console output displaying the updated values, rather than the values at the time of logging.

Solution:

This behavior is caused by a bug in Google Chrome's console.log() functionality.

Explanation:

Webkit, the underlying rendering engine used by Chrome, has a known bug where the expansion of logged objects and arrays in the console does not always produce an accurate representation of the object's state at the time of logging.

Impact:

This inconsistency can lead to confusion and debugging difficulties, especially when relying on the console to inspect intermediate values.

Reproducing the Issue:

To reproduce the issue, follow these steps:

1. Add the following script to a web page:

   <code class="js">var greetings=['hi','bye'];
   console.log(greetings);
   setTimeout(function(){
       greetings.push('goodbye');
   },3000);</code>

   Copy after login

2. Open the page in a new window:

   • With the console already open: The console.log() output will display the initial value of the array (i.e., two items).
   • With the console initially closed: The console.log() output will display the updated value of the array (i.e., three items) when the console is opened after the page loads.

Bug Status:

The bug has been fixed in Webkit, but it has not yet been pulled into Google Chrome.

The above is the detailed content of Does console.log() Always Show the Initial Values of Arrays and Objects in Google Chrome?. For more information, please follow other related articles on the PHP Chinese website!