Advanced console.log Tips and Tricks (2020)
1–10 of 73 posts
Re: Advanced console.log Tips and Tricks (2020)
#2Not 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.
Re: Advanced console.log Tips and Tricks (2020)
#3What pains me that browsers no longer put blue icon with console.info. Like, what's the point of having it if it's going be virtually indistinguishable from .log?
It annoying.
Re: Advanced console.log Tips and Tricks (2020)
#4console.time{,Log,End} take an optional argument to label the timers, changing the "default" text to the label but also allowing multiple timers running simultaneously
Re: Advanced console.log Tips and Tricks (2020)
#5"upgrade to see more" paywalled story...
Re: Advanced console.log Tips and Tricks (2020)
#6My 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?
Re: Advanced console.log Tips and Tricks (2020)
#7What pains me that browsers no longer put blue icon with console.info. Like, what's the point of having it if it's going be virtually indistinguishable from .log? It annoying.
Firefox shows a little “i” in a circle to signify “info” but it’s subtle and I didn’t realize what it was for a long time.
Re: Advanced console.log Tips and Tricks (2020)
#8It mentions the CSS-styling formatting specifier, but skips over the more mundane "printf-style" ones.
const obj = {objection: 'overruled'}; console.log( 'console.log is the #%d %s API ever written %f\% no arguing! %o %O !!!', 1, 'greatest', 100, obj, obj);
I've tried to keep my example compliant but it's still a very tiny loosy-goosy standard, for example at least in Firefox you can write %.0f to skip printing the fractional part of the float, but the standard doesn't mention this.
Re: Advanced console.log Tips and Tricks (2020)
#9Not 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.
I did not know this. Thanks!
Re: Advanced console.log Tips and Tricks (2020)
#10Practically 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.