Live data from Hacker News

Use console.log() like a pro (2020)

markodenic.com

101–110 of 156 posts

Re: Use console.log() like a pro (2020)

#101
post #39

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.

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)

#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?

I could see both, but things like integer vs float couldn't be determined from the type, since you just have the single `number` type. That being said, you could just convert to an int on the value you're passing in rather than having the interpolation do it for you. Same thing with object vs string, you could pass in `obj.toString()` instead of just `obj` with an `%s`

Re: Use console.log() like a pro (2020)

#104
post #101

Earlier 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...

Fun story explaining this to the PR reviewers though :D

Re: Use console.log() like a pro (2020)

#106
post #94
post #28

I'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.

That’s interesting. I’m guessing console.log appends to the window object somewhere, which is a fairly common method of image preloading.

Re: Use console.log() like a pro (2020)

#107
post #2

Another 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.

On Node, console.dir(x, {depth: null}) will print the object fully expanded (even in cases where console.log by itself won't). Pass something other than `null` to `depth` and it'll recurse to that depth, as well.

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)

#108

Very 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.

do you know about util.inspect? https://nodejs.org/api/util.html#util_util_inspect_object_sh...

Re: Use console.log() like a pro (2020)

#110
post #39
post #27

Earlier 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.

You are not wrong. Is this a repl or a debugger? Because it seems to be mixture? How is that helpful?!
Post reply on HN