Advanced console.log Tips and Tricks (2020)

Post by Stratoscope » Wed, Jun 16, 2021, 7:27 AM UTC

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() ```

  const upperCase = (message) => {
    console.log(message);
    return message.upperCase();
  };

Post by genezeta » Wed, Jun 16, 2021, 7:50 AM UTC

Griffinsauce wrote: post #32

Stratoscope wrote: post #31

Earlier quoted context omitted.

That will work, because console.log() returns undefined. It is a bit subtle for my taste, though. My suggestion for clarity is to go ahead and make the function have a body with {}: const upperCase = (message) => { console.log(message); return message.upperCase(); }; Of course you may disagree, but no argument there, as I said it's a matter of taste. (BTW backticks, either triple or single, do not work on HN. Indent…

Yeah, I'm working on the assumption that this code is not committed but for a quick debug. Any code that is shared shouldn't rely on that, I agree. Thanks for the tip!

Post by skywal_l » Wed, Jun 16, 2021, 7:57 AM UTC

wonnage wrote: post #34

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() ```

You can also use the comma operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... `const upperCase = (message) => (console.log(message), message.upperCase())` The function body needs to be in parens. Maybe not the most useful for this case, but I've used this when setting logpoints in Chrome to log a variable and save it to a global for further inspection.

  const result = array
    .map(someFunction)
    .filter(someOtherFunction)
    .map(x => (console.log(x), x)) // debug here
    .map(stillAnotherFunction);

Post by metafunctor » Wed, Jun 16, 2021, 8:05 AM UTC

Stratoscope wrote: post #28

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 s…

Post by onion2k » Wed, Jun 16, 2021, 8:16 AM UTC

MindTwister wrote: post #26

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