Question

I’ve just started using the console in Chrome Developer Tools (pretty new to Javascript in general). I noticed that when I consecutively log the same variable twice (an object in this case), that the log stacks this and places a little number icon next to it. I click on this thinking that I’ll be able to see the object twice (as it’s been updated twice), however nothing happens.

Image for more clarification:

As you can see there’s a little “2” in a blue circle next to the Object drop-down. The first log would’ve had Object.num at 3, and the second at 4, however all I can see is the second.

Any answers as to how to see both logs would be appreciated.

:).

Answer 1

This custom log function will log a “snapshot” of the object, so in your example you’ll see the updated “num” property of your object reflected in every call to log.

It sort of cheats by manually logging each property of the object into a “console group.” But, it ends up looking pretty close to the normal console.log output (without the weird behavior you point out in your question).

Also, it probably only works in Chrome.

function log(obj) {
    console.groupCollapsed(({}).toString.call(obj).split(' ')[1].split(']')[0]);
    for (var k in obj) obj.hasOwnProperty(k) && console.log(k + ': ', obj[k]);
    console.log('__proto__: ', obj.__proto__);
    console.groupEnd();
}​

Try it out here.

---

Excellent question, by the way. I just learned a lot about the console I didn’t know before. 🙂