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

61–70 of 73 posts

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

#61

Post by bryanrasmussen »

mrblampo wrote: post #53
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.

Maybe my debugger skills aren't strong enough, but I find that when I'm trying to reason about how some complicated code is executing, a debugger statement forces me to wade through tons of internals in libraries I don't care about. Some well-placed console logs give me much less information overload.

The same here, also in my case at least 90% of the time when there is a problem I know where the problem is I just need to look at a couple things and confirm which of a couple scenarios could be causing the problem.

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

#62

Post by yawaworht1978 »

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.

This is amazing, does it point to the event handler as well?

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

#63

Post by knute »

jakub_g wrote: post #56
Liquidor wrote: post #29

Earlier quoted context omitted.

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

My favorites: - `$0` to refer to last selected DOM node - `copy(obj)` to copy something to clipboard (that might be hard to copy manually; for example long strings are often cut when selecting manually for copying)

`copy(JSON.stringify(foo))` is something I use all the time for pulling large objects into a text editor for easy browsing and searching.

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

#64

Post by koolba »

jakub_g wrote: post #56
Liquidor wrote: post #29

Earlier quoted context omitted.

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

My favorites: - `$0` to refer to last selected DOM node - `copy(obj)` to copy something to clipboard (that might be hard to copy manually; for example long strings are often cut when selecting manually for copying)

$r is great if you have the react dev tools installed.

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

#65

Post by alessioalex »

bouncycastle wrote: post #58
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.

Nonsense. Console.log does not accept a callback and does not return any promise, therefore it's expected to work synchronously.

you're being ironic, right?

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

#66

Post by hibbelig »

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.

Interesting. I feel the opposite. Reading through multiple log lines somehow tells me something about the problem (program) that I don’t get when I use the debugger.

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

#67

Post by dotlog »

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

console.table doesn't work in IE6

DON'T YOU FEEL STUPID NOW?!

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

#68

Post by hinkley »

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.

I spent too long on one occasion trying to figure out why my logs looked like they were in the wrong order for a NodeJS application.

It was because one message was console.info and another was console.error, which was going to stderr and so getting flushed differently.

A couple months ago I fell for it again.

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

#69

Post by bouncycastle »

alessioalex wrote: post #65
bouncycastle wrote: post #58

Earlier quoted context omitted.

Nonsense. Console.log does not accept a callback and does not return any promise, therefore it's expected to work synchronously.

you're being ironic, right?

Nope, sarcastic.

If JavaScript devs don't know if a function is async or sync it just gives more evidence that JS is a monkey-language. LOL!

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

#70

Post by throwaway_2047 »

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.

I used a bookmarklet on chrome

> javascript:(function(){console.log("monitor event"); window.addEventListener('message', (e) => {console.log(e);});})();

that way I can click the bookmark and start monitoring events whenever I want

Post reply on HN