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

Advanced console.log Tips and Tricks (2020)

medium.com

Post reply on HN
Print view View original

21–30 of 73 posts

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

#21

Post by andra_nl »

tdy_err wrote: post #13
hardwaresofton wrote: post #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 o…

All the shit is cross-browser supported

Also, none of this stuff should ever be used in production code, only during development (at least IMHO). So even if some things were browser specific, it shouldn't hurt anyone but yourself if you run into incompatibilities while using any of it.

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

#22

Post by NegativeLatency »

repsilat wrote: 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?

And the old version with json.stringify

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

#24

Post by theshrike79 »

beebeepka wrote: post #3

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

Linters actually consider .log to be an error nowadays by default. They only accept debug/info/warn/error.

I take advantage of this so that my .log lines are stuff I need while developing but they shouldn't get committed, that's what the actual named log lines are for.

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

#26

Post by MindTwister »

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

Are you lamenting that you reach for `console.log` first, instead of using the `debugger` statement, or are you wishing there was a `debugger` statement, because there absolutely is a `debugger` statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

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

#27

Post by alessioalex »

metafunctor wrote: post #23

One thing to watch out is that console.log is asynchronous. If the objects to be printed change between console.log() and the actual printing, the output you see may not represent the state when console.log() was called.

Very useful advice. In those situations if you're trying to log an object just do `JSON.stringify(obj, null, 2)` to be sure of the state at that time.

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

#28

Post by Stratoscope »

metafunctor wrote: post #23

One thing to watch out is that console.log is asynchronous. If the objects to be printed change between console.log() and the actual printing, the output you see may not represent the state when console.log() was called.

console.log is not asynchronous. For example, this code:

  let a = "hello";
  console.log( a );
  let a = "goodbye";
will always reliably print "hello", not "goodbye".

What you're referring to is the fact that when you expand an object or array in the console, then you see the contents of that object or array at the time you expand it, not as it originally existed when console.log() was called.

This is why alessioalex's sibling comment is so useful. By logging the output from JSON.stringify(), you are logging a string whose value will not change.

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

#29

Post by Liquidor »

e67f70028a46fba wrote: post #2

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.

You can also use monitor(func), debug(func) and inspect(func) and more :) https://developer.chrome.com/docs/devtools/console/utilities...

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

#30

Post by faichai »

An historic problem with logging is that if you wanted to create a logging library, every time you logged you would lose the line number of the log statement as it would just show that of the library rather than the call point.

This is solved by separating out your log library into a separate file, and then blackboxing it. Voila, original call points are preserved making debugging easier and your logs more useful.

Post reply on HN