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: