Live data from Hacker News

Advanced console.log Tips and Tricks (2020)

medium.com

11–20 of 73 posts

Re: Advanced console.log Tips and Tricks (2020)

#11
If it's not on all the browsers, please don't use any of this shit. Every time you use a chrome-specific browser you encourage the eventual death of all the non-chromium browsers which might be great for you right now, but is bad for the ecosystem in the long term.

Also, please stop writing tech blogs on medium. That well paid tech people of all people would be constrained to a paywall-middleman is an indictment of our entire field.

Re: Advanced console.log Tips and Tricks (2020)

#13

If it's not on all the browsers, please don't use any of this shit. Every time you use a chrome-specific browser you encourage the eventual death of all the non-chromium browsers which might be great for you right now, but is bad for the ecosystem in the long term. Also, please stop writing tech blogs on medium. That well paid tech people of all people would be constrained to a paywall-middleman is an indictment of o…

All the shit is cross-browser supported

Re: Advanced console.log Tips and Tricks (2020)

#14
post #13

If it's not on all the browsers, please don't use any of this shit. Every time you use a chrome-specific browser you encourage the eventual death of all the non-chromium browsers which might be great for you right now, but is bad for the ecosystem in the long term. Also, please stop writing tech blogs on medium. That well paid tech people of all people would be constrained to a paywall-middleman is an indictment of o…

All the shit is cross-browser supported

Awesome, glad that's the case. Guess I have to hold my breath for a future where technologists stop putting their knowledge behind paywalls then.

Re: Advanced console.log Tips and Tricks (2020)

#15
post #12

console.table() is a favorite of mine for a variety of reasons, but one of the most important to me is that it's really easy to quickly find a giant table in a wall of text if I'm logging a bunch of other stuff.

For this I use console.error (red) or console.warn (yellow).

Re: Advanced console.log Tips and Tricks (2020)

#16
post #6

My dumb dead-simple trick that you've probably independently invented yourself: when I want to log variables x,y,z I write console.log({x,y,z}) not console.log(x,y,z) Who needs pretty-printing, formatting libraries, string interpolation etc?

Yep, I have "invented" this myself as well :)

Re: Advanced console.log Tips and Tricks (2020)

#17

Not directly console.log related, but you can use the console-only monitorEvents() method to log all the events triggered on an element: https://developers.google.com/web/updates/2015/05/quickly-mo... Very useful when you are wiring events together on the front end. Surprised there isn’t a standard way to do this in the DOM.

> Not directly console.log related

Don't worry, neither is the article. Words don't mean much I guess.

Re: Advanced console.log Tips and Tricks (2020)

#18
post #6

My dumb dead-simple trick that you've probably independently invented yourself: when I want to log variables x,y,z I write console.log({x,y,z}) not console.log(x,y,z) Who needs pretty-printing, formatting libraries, string interpolation etc?

Same here.

Re: Advanced console.log Tips and Tricks (2020)

#19
post #10

Practically every time I do a 'console.log' to see the value of something in the current page state I actually wanted a 'debugger' statement instead. Pausing execution so I can look at other things around what I wanted to log often proves very useful and let's me get to the root cause of a problem faster.

This is really missing at the moment.

I wish there was a "debugger snapshot" functionality that does not pause execution and creates a snapshot of the current DOM and state.

Probably a performance nightmare but being able to continue and inspect what happened in retrospect is what makes console.log a powerful debugging tool IMO.

You could extrapolate this to the time-traveling debuggers we've seen for Redux and other tools. That stuff is super powerful.

Re: Advanced console.log Tips and Tricks (2020)

#20
A small extra trick:

If you use arrow functions without a body you can log and fallback to the original statement.

Example starting point, you're wondering what message is. ``` const upperCase = (message) => message.upperCase() ```

Don't add a body, just log and continue:

``` const upperCase = (message) => console.log(message) || message.upperCase() ```

Post reply on HN