Use console.log() like a pro (2020)
markodenic.com
Use console.log() like a pro (2020)
1–10 of 156 posts
Re: Use console.log() like a pro (2020)
#2Another trick that might be more practical for actually debugging is using the object shorthand. For example, instead of...
console.log(x, y);
console.log({x, y});
Re: Use console.log() like a pro (2020)
#3I keep on coming back to debugging with print statements. I (embarrassingly) started using console.trace more often only recently.
Re: Use console.log() like a pro (2020)
#4Nice little article. Learned a new trick or two.
I'd love to see one on the step-thru debugger!
Re: Use console.log() like a pro (2020)
#5I often always do this to deep print my javascript object. console.log(JSON.stringify(myObject, null, 4));
Re: Use console.log() like a pro (2020)
#6[deleted]
Re: Use console.log() like a pro (2020)
#7I used to think `console.log` was only good for soothing and assuaging the limbs of trees. Now I know better!
Re: Use console.log() like a pro (2020)
#8All that text and no links to the reference docs to allow one to learn to fish and also learn about changes in the future: https://developer.mozilla.org/en-US/docs/Web/API/Console
Re: Use console.log() like a pro (2020)
#9I often always do this to deep print my javascript object. console.log(JSON.stringify(myObject, null, 4));
This is great trick because the console will keep a reference to your object, not a copy, so if it changes between the time it was logged and now then the log expando shows the new value, not the old value.
By printing out the object you get a point-in-time snapshot rather than a reference to a mutable object.
Re: Use console.log() like a pro (2020)
#10If you're using console.log to do debugging then it's worthwhile giving yourself a little more data to point at where a problem might lie - timings.
Open up devtools (cmd+option+j), then open the command palette (cmd+shift+P), and then search for "console", and then select "Console - Show Timestamps". Now every console output will have the high definition timestamp prepended to it. That can be really helpful if you don't want to go down the whole perf chart rabbit hole, or if you think things might be running in the wrong order due to some async weirdness.
(This probably only works in Chrome)