I seem to have stumbled upon an inconsistency in Chrome DevTools.

Above is a screenshot from the DevTools. At first, I am told that the printed object contains a Body and a Head. The head should be an array of length 1. When I expand, this array suddenly bees length 2.

When expanding the array in question I get the following:

So there seems to be an empty string in the array as well. This empty string is what is causing some problems with my code which is what prompted me to investigate.

I am mostly concerned with the DevTools output though, can anybody think of a reason why DevTools would give two different lengths for the same array?

Does DevTools automatically parse the content of an array of length one to a separate variable? I would have expected Head: [Array[2]] in that case.

I am using console.log to output the listed screenshot in Chrome DevTools on an Ubuntu VirtualBox.

I seem to have stumbled upon an inconsistency in Chrome DevTools.

Above is a screenshot from the DevTools. At first, I am told that the printed object contains a Body and a Head. The head should be an array of length 1. When I expand, this array suddenly bees length 2.

When expanding the array in question I get the following:

So there seems to be an empty string in the array as well. This empty string is what is causing some problems with my code which is what prompted me to investigate.

I am mostly concerned with the DevTools output though, can anybody think of a reason why DevTools would give two different lengths for the same array?

Does DevTools automatically parse the content of an array of length one to a separate variable? I would have expected Head: [Array[2]] in that case.

I am using console.log to output the listed screenshot in Chrome DevTools on an Ubuntu VirtualBox.

• javascript
• arrays
• google-chrome
• google-chrome-devtools
• console.log

1 Answer 1

This is because the initial display, the one with this format:

Object {Body: Array[20], Head: Array[1]}

Is generated when the console first logs it. After expanding, it loads all of the object's properties, and if the properties have changed in between logging it and opening it, it will show different values.

You can hover over the light-blue i that shows behind the object to see what Chrome says about this itself.