Advanced console.log Tips and Tricks (2020) • Hacker News Board

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

#41

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

metafunctor wrote: post #37

Stratoscope wrote: post #28

Earlier quoted context omitted.

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…

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

To add to the MatthewMob's explanation, see this: https://imgur.com/a/vUTCumu

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

#42

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

Haven't seen this mentioned, but here's one:

const dog = { name: "Dog" }

console.log(dog) VM287:1 {name: "Dog"}

console.log({dog}) VM305:1 {dog: {…}}dog: {name: "Dog"}__proto__: Object

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

#43

Post by voiper1 » Wed, Jun 16, 2021, 9:28 AM UTC

genezeta wrote: post #41

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.

To add to the MatthewMob's explanation, see this: https://imgur.com/a/vUTCumu

Thanks! I figured it meant that, but nice to see it without having to mess around.

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

#44

Post by ngcazz » Wed, Jun 16, 2021, 9:32 AM UTC

pawelduda wrote: post #42

Haven't seen this mentioned, but here's one: const dog = { name: "Dog" } console.log(dog) VM287:1 {name: "Dog"} console.log({dog}) VM305:1 {dog: {…}}dog: {name: "Dog"}__proto__: Object

What did you mean to emphasize here? Cos what I'm seeing is the language feature (ES6's "shorthand properties"), not something inherent to `console`.

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

#45

Post by vbezhenar » Wed, Jun 16, 2021, 9:39 AM UTC

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

Is there any web standard mandating support of console API?

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

#46

Post by pawelduda » Wed, Jun 16, 2021, 9:44 AM UTC

ngcazz wrote: post #44

pawelduda wrote: post #42

Haven't seen this mentioned, but here's one: const dog = { name: "Dog" } console.log(dog) VM287:1 {name: "Dog"} console.log({dog}) VM305:1 {dog: {…}}dog: {name: "Dog"}__proto__: Object

What did you mean to emphasize here? Cos what I'm seeing is the language feature (ES6's "shorthand properties"), not something inherent to `console`.

The second example effectively prints an object with it's name. I often have multiple console.log statements and by utilizing that I know what each one is referring to just by typing 2 more characters.

EDIT: perhaps a better description by someone else https://news.ycombinator.com/item?id=27524164

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

#47

Post by jansan » Wed, Jun 16, 2021, 9:55 AM UTC

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.

console.log(JSON.stringify(myValue, null, 2)) could be what you are looking for.

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

#48

Post by Cthulhu_ » Wed, Jun 16, 2021, 9:56 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() ```

I should remember that one, I use a lot of console.log debugging still.

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

#49

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

jansan wrote: post #47

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.

console.log(JSON.stringify(myValue, null, 2)) could be what you are looking for.

That's just a prettier console log. I almost always want to use the debugger.

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

#50

Post by Blahah » Wed, Jun 16, 2021, 10:18 AM UTC

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.

You can filter the console by info/debug/warn/error which makes info pretty useful imo.