All Articles

Evaluating Chrome Devtools

While debugging with some console.log statements I noticed that the values logged seemed to differ from what they initially said. Upon uncollapsing the log entry it would consistently show a NaN value for some property values while it clearly stated the proper value above it.

Console output

As it turns out this is caused by Chrome re-evaluating the object with the data it has at the moment you uncollapse it rather than just showing you what the values were at that moment in time. There is a small info icon that does aim to explain this behaviour but its wording does not really clarify the most important aspect, which is that it re-evaluates it without the original context.

We can quickly verify this behaviour ourselves by defining an object, logging it and making a change to the object prior to uncollapsing:

Declaring an object

Change a value on the object:

Change property value

If we now uncollapse the previous log statement, we can see it got re-evaluated based on our current context

Uncollapse log statement

Interestingly it looks like the evaluation is only done on the first collapse: subsequent alterations to the property and collapsing/uncollapsing does not change the existing log statement.

Published 19 Jan 2019

Unearthing curious .NET behaviour
Jeroen Vannevel on Twitter