Earlier quoted context omitted.
Then, one day, after 12 hours chasing a race condition bug, you learn that when you expand objects from console.log, it shows you the current value of properties and not the values at the time of the console log. Because the values are evaluated when you click on the arrow. Then you quit web development and start a new career.
Yeah I don't remember how I found about this, but I remember it involved some `console.log(JSON.stringify(...))`. It's tricky to notice.
Use console.log() like a pro (2020)
101–110 of 156 posts
Re: Use console.log() like a pro (2020)
#102%s – string %i or %d – integer %o or %O – object %f – float Why were these ever specific types, instead of just one option that looks at the parameter type?
Re: Use console.log() like a pro (2020)
#103Re: Use console.log() like a pro (2020)
#104Earlier quoted context omitted.
Yeah I don't remember how I found about this, but I remember it involved some `console.log(JSON.stringify(...))`. It's tricky to notice.
And then you can't repro the bug anymore because it was related to Mobx observables or whatever and that JSON.stringify suddenly made it work so you just... leave it there...
Re: Use console.log() like a pro (2020)
#105Re: Use console.log() like a pro (2020)
#106I've put over 200 tips like that on my website: https://umaar.com/dev-tips/ Each tip has a textual explanation, and an animated gif if you're a visual learner (I know, I need to scrap gifs and move to regular videos). There's a lot of tricks there which can hopefully improve your development and debugging workflows. Let me know if there are specific things you'd like to see. A few people have asked for how to find me…
Speaking of memory leaks, I once had to debug a memory leak caused by console log entries. Objects that are logged to the console are prevented from being garbage collected, even if the console was never opened. That includes DOM nodes or I think also handles to WebGL textures.
Re: Use console.log() like a pro (2020)
#107Another trick that might be more practical for actually debugging is using the object shorthand. For example, instead of... console.log(x, y); which contains the information you need, but lacks any useful context, try... console.log({x, y}); ...which will print out like an object, including the key names.
Unfortunately that tends to print the object with collapsed values, requiring you to expand the object to actually see any of the values.
Doesn't help on browser, though; the options arg to console.dir isn't part of the standard there.
Re: Use console.log() like a pro (2020)
#108Very important for backend is %j (e.g.: console.log('%j', variable); which can output complex json objects to the terminal. I often write it to the terminal and then copy it to an online json viewer so it is formatted in a viewable format.
Re: Use console.log() like a pro (2020)
#109Re: Use console.log() like a pro (2020)
#110Earlier quoted context omitted.
I much prefer it being collapsed. When dealing with large objects, the firehose can be annoying.
Then, one day, after 12 hours chasing a race condition bug, you learn that when you expand objects from console.log, it shows you the current value of properties and not the values at the time of the console log. Because the values are evaluated when you click on the arrow. Then you quit web development and start a new career.