I had a moment the other day while I was trying to understand how a feature was working from another team. I console logged an object that was being sent to a function to see those properties. When I expanded this object in Chrome's devtools, I knew that some of those values were not correct.
After going round and round for about an hour, I finally saw a little icon next to the object when it was expanded. I hovered over it and things finally made sense.
...oh.
When you console log an object like a string, number, or something with a value that can be shown in the small preview line, that will be the value that it was when the log happened. The console keeps a reference to that value if it's an object that we can expand to see its various properties. When you expand, Chrome reaches into that object and builds out the log at that particular moment so if any modifications happened between the console log and the user expanding the object, those modifications will be shown.
If this is something you need to get around and see the values of some of the underlying properties, log the various properties individually instead of the parent object.
It's a small thing, but something to be aware of when you're trying to figure out how something works. It's easy to miss.
Top comments (0)