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

51–60 of 73 posts

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

#51

Post by metafunctor »

MatthewMob wrote: post #38
metafunctor wrote: post #37

Earlier quoted context omitted.

That's... what asynchronous means. The call to console.log() will return before the console output is actually produced.

No. It means that when you invoke `console.log` in a browser it "logs" a reference to an object instead of serialising it. This log is still synchronous, but when you expand it in the console its properties are dereferenced and may be different from when the original log was made. The log, however, is still instantaneous and synchronous.

OK, agreed. That's an important distinction. The console log will synchronously receive a reference to an object; later if you expand something in the log window it shows you the current state.

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

#52

Post by mrblampo »

onion2k wrote: post #39
MindTwister wrote: post #26

Earlier quoted context omitted.

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

I'm lamenting that I reach for console.log first and then regret it. Every single time.

Huh, why do you think you do that? Do you forget about the debugger statement, or is there some other reason you think console logging might work well?

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

#53

Post by mrblampo »

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.

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

#54

Post by mjbrusso »

MatthewMob wrote: post #38
metafunctor wrote: post #37

Earlier quoted context omitted.

That's... what asynchronous means. The call to console.log() will return before the console output is actually produced.

No. It means that when you invoke `console.log` in a browser it "logs" a reference to an object instead of serialising it. This log is still synchronous, but when you expand it in the console its properties are dereferenced and may be different from when the original log was made. The log, however, is still instantaneous and synchronous.

I would say the argument is lazy evaluated.

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

#56

Post by jakub_g »

Liquidor wrote: post #29
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...

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)

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

#57

Post by jakub_g »

Something useful about logging that maybe not everyone knows about:

If you can't or don't want to pollute your code with `console.log` for debugging (can't edit original code; too long to rebuild; etc.):

You can add "log points" (Chrome and Firefox at least) directly in source view of devtools at specific lines of code

https://www.thedevelobear.com/post/logpoints/

You can also use "conditional breakpoint" to do conditional logging with `console.log`, again, without leaving devtools.

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

#58

Post by bouncycastle »

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.

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

#60

Post by Accacin »

Griffinsauce wrote: post #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() ```

I do something similar in React too:

const foo = () => console.log &&

That stops the body rendering, and you can use '||' if you want the body and the log.

Post reply on HN