Weird behaviour in chrome object console.log

Question

When I try to console.log an object in Chrome, it states in the first line of the console.log (where you see Object { small summary here } that my posts array is of length 0 (posts: Array[0]).

However when I expand the post it shows that it has 27 items in it (which is what I need).

This happens to me randomly and I got no idea why it is happening, anybody experienced this before?

Screenshot:

Update: This happens in all browsers, so it is probably not chrome related

Answer 1

The debugger can't know if an object has been altered, this is why the posts attribute's rendering (in your example) has not been updated. Even if the debugger would be able to know when a attribute has been changed updating it every time (and all "loggings") would be too expensive.

So the debugger will check the attribute only when accessing it explicitly.

Chrome in this case will do this even only once:

p = []; window.x = {x: p}; 
Object {x: Array[0]}
x: Array[0]
__proto__: Object
x.x.push(1);
1
x.x.push(2);
2

Klicking x, the Array updates

p = []; window.x = {x: p}; 
Object {x: Array[2]}
x: Array[2]
   0: 1
   1: 2
   length: 2
   __proto__: Array[0]
__proto__: Object

Adding one item more to the array and toggleing x again, the size and entries remain

x.x.push(3)
3


x: Array[2]
   0: 1
   1: 2
   length: 2
   __proto__: Array[0]

In my opinion it's not necessary for the logger to update the object value since the variable watch has this function already. There you can always update the current value of a variable.

This works in Firebug and Chrome. Here's an example for Chrome: