Chrome Developer Tools console - log stacking, how do I see re-logged stuff [Screenshot Inside]?

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 happens because you're logging the same exact object twice. Even if this didn't result in stacking, you'd only see `num' being 4, as the console does not - to the best of my knowledge, at least - grab copies of the objects you log. This is occasionally somewhat inconvenient, I agree.

One way I just thought of of ensuring that you'll get separate logs - but with added memory usage - is to do something like

console.log(JSON.parse(JSON.stringify(obj)));

(This should work, at least.) If your object is relatively simple to interpret by eye, you could just omit the JSON.parse there and use the JSON string form of your object for logging.

I also suggest looking into the debugger; statement - whenever encountered in a JS program, it'll make the environment halt execution of code and break out to the script debugger. It may or may not be more apt for whatever you're debugging.

Answer 2

According to the documentation, message stacking can be turned off by enabling timestamps in the general console settings:

Answer 3

This has happened to me before too. The only solution I could find was to output something in between the two output calls. So for example, if you have this:

console.log(var);
...
console.log(var);

make it:

console.log(var);
console.log('asdf');
...
console.log(var);

Answer 4

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. :)