CODEWITHSUNDEEP
javascriptecmascript-6google-chrome-devtoolsweb-inspector
Manzur Khan
Manzur Khan

Reputation: 2486

Chrome console bug?

This question is not of any doubt or problem. Apparently it seems that I have stumbled upon a bug maybe on chrome console,

I use this code:

console.log("Before: ", this.selectedScorecard.scorecard_attributes);
let attribute = this.selectedScorecard.scorecard_attributes.find(item => item.id === null || item.id === undefined)

if(attribute) {
   let length = this.selectedScorecard.scorecard_attributes.length;
   this.selectedScorecard.scorecard_attributes.splice(length-1, 1);
   console.log("After: ", this.selectedScorecard.scorecard_attributes);
}

Okay so the attribute is an array and it's an array of length 2 initially. Now I'm splicing one item from the array and printing it's value before and after the splice.

In the chrome console in the snippet before the array it shows (2) indicating the length as 2 but in the array itself it shows the length as 1 and also only one item in the "Before console of the array" while things are obviously as expected in the "After console" I'm attaching an image for better understanding enter image description here

I'm curious, does anyone have any idea about this? Does anyone face this before or am I only the one noticing it?

Upvotes: 3

Views: 693

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85241

When console.log runs, chrome synchronously logs out a summary of what's there. The array has 2 elements, so the summary logs a (2). Chrome keeps a reference to the array in case you decide later on you want to see more data, but it does not clone the entire array.

Later on, when you click to expand the array, it shows more details, but it shows it based on what it looks like when you expand it, not when the log statement originally occurred. Since it has only 1 element, that's what it displays.

Upvotes: 7

Related Questions