Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

markodenic.com

Post reply on HN
Print view View original

91–100 of 156 posts

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

#91

Post by drinchev »

pjerem wrote: post #39
ollien wrote: 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.

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.

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

#92

Post by maddyboo »

paweladamczuk wrote: post #90

I think the very fact that you have to rely on things like that when debugging speaks volumes about the language deficiencies. Or maybe it's just the tooling or environments where JS is executed? In any case, the debugging experience is probably the biggest reason why I dislike modern web dev and tend to steer my career towards back-end.

I don’t understand your comment. Firefox and Chrome both have actual debuggers as well, but many times console.log is a faster way. What are the deficiencies you speak of?

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

#93

Post by elwell »

simlevesque wrote: post #63
brundolf wrote: post #35

Another little trick; instead of doing: console.log("some label: " + JSON.stringify(someObj)) pass it as a separate parameter: console.log("some label: ", someObj) and you'll get interactive expansions/manipulation in the console

No, this is totally different. In the second version, if someObj changes after it was logged, when you'll expand it you'll see the updated value. JSON.stringify freezes the value. To get the same as the first example, but interactive, you have to do: console.log("some label: " + JSON.parse(JSON.stringify(someObj)))

It's only different if you don't treat objects as immutable.

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

#94

Post by Felk »

umaar wrote: 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.

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

#95

Post by ajcp »

freeopinion wrote: post #79
ajcp wrote: post #38

My whole personal site[1] is one big console.log(), right down to theme matching :D Unfortunately I'm not sure anyone has actually noticed. 1: https://itsokayitsofficial.io/

Fun But you should proofread it for typos.

Thanks! My IDE is a terrible spell-checker

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

#97

Post by sdfhbdf »

paweladamczuk wrote: post #90

I think the very fact that you have to rely on things like that when debugging speaks volumes about the language deficiencies. Or maybe it's just the tooling or environments where JS is executed? In any case, the debugging experience is probably the biggest reason why I dislike modern web dev and tend to steer my career towards back-end.

You don't have to "rely" on it just like you don't have the rely on `fmt.Println()` in golang for debugging.

A language/runtime/framework gives you options and you pick your poison, browsers offer you step by step debuggers and REPL out of the box and I actually think it's awesome in terms of debugging, you can of course only use console.log(), and it's a good place to start. When you're ready to move on there are many more useful tabs in the browser devtools to debug with.

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

#98

Post by sdfhbdf »

I_am_tiberius wrote: post #68

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.

Have you tried `jq`? https://stedolan.github.io/jq/

Maybe you can skip a step with pasting online.

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

#99

Post by Kaze404 »

My (newly discovered) favorite trick is using the comma operator. Using it, you can (admittedly horribly) log anything in the middle of any expression.

This for example will call `console.log(myVar)` and still call `someFunction(myVar, someOtherArgument)`.

  myVar = "12345"
  someFunction((console.log(myVar), myVar), someOtherArgument);
Pretty handy sometimes :)

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

#100

Post by sdfhbdf »

swyx wrote: post #60

for what its worth i have this guy blocked on twitter - all he does is repost basic APIs you can get from MDN. classic grift playbook.

Not everybody have already learned everything. Sure, documentation is a really good source of truth, but for some people simpler introduction than a whole whitepaper's worth of information, which you get in MDN, might be more digestible.

I don't think closing on people just starting to learn is a good way to expand the field of software engineering.

Post reply on HN