DevTools tips — day 5: the curious case of console.log
part of the “Advent calendar for front-end developers” series
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve finished with 15th tip, today we will only have one, but quite a surprising one:
16. That logged object is not what you think it is
Ok, this one can really throw you off balance and make a console.log-based debugging session a confusing experience at least or failure at worst:
An object that you log into the console is stored there by a reference until its content is displayed.
What this means is that if you e.g. log an object, then mutate it and log again — and then look at the console, you will see that the first log (before the mutation)… has the same value as the second one!
If this description still doesn’t make sense to you, don’t worry, take a look at this sequence in the video below and it should be clearer:
Now imagine if this had happened while you were trying to figure out a moment where a that object was mutated 🤯
How to deal with that? Well, you can log the copy (a new reference) of an object or… in serious debugging use breakpoints and the Sources panel instead! Which, rest assured, we will talk about in the calendar too.
That’s it for today. As usual, if you’ve learned something new, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 6th day is already published, read it here:
