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

Use console.log() like a pro (2020)

markodenic.com

Post reply on HN
Print view View original

71–80 of 156 posts

Re: Use console.log() like a pro (2020)

#71

Post by bobbylarrybobby »

jchw wrote: post #2

Another trick that might be more practical for actually debugging is using the object shorthand. For example, instead of... console.log(x, y); which contains the information you need, but lacks any useful context, try... console.log({x, y}); ...which will print out like an object, including the key names.

I really like this method but unfortunately most debuggers print objects with keys in alphabetical order so there’s no way to get the keys you care about most at the top. Is there a way to rectify this?

Re: Use console.log() like a pro (2020)

#72

Post by dekerta »

tshaddox wrote: post #15
jchw wrote: post #2

Another trick that might be more practical for actually debugging is using the object shorthand. For example, instead of... console.log(x, y); which contains the information you need, but lacks any useful context, try... console.log({x, y}); ...which will print out like an object, including the key names.

Unfortunately that tends to print the object with collapsed values, requiring you to expand the object to actually see any of the values.

You could do console.table({x, y}) if you really want to see them initially expanded

Re: Use console.log() like a pro (2020)

#73

Post by Lex-2008 »

Folcon wrote: post #70
evan_ wrote: post #61

Earlier quoted context omitted.

We can actually just test this. Here's some code: const x = {value: 0}; console.log(x); console.log({x}); x.value = 1; Running that in the latest Chrome javascript console, we see that the first version prints `{value: 0}` and the second prints `{x: {...}}`. When you expand the second one, it will show `{x: {value: 1}}`.

The really fun part is doing this :)... Evaluate the expression: const x = {value: 0}; console.log(x); console.log({x}); x.value = 1; You get this: {value: 0} {x: {…}} Expand the first arrow of the `x:`: v {x: {…}} > x: {value: 1} Now evaluate: x.value = 3 Then expand the second arrow: v {x: {…}} > x: value: 3 Now if you unexpand the arrow, you get 1, but if you expand it you get 3 =)... (Well at least in chrome)

> Now if you unexpand the arrow, you get 1, but if you expand it you get 3 =)...

Moreover, if you expand arrow next to {value: 0}, you will see literally this:

    v {value: 0} [i]
        value: 3

Re: Use console.log() like a pro (2020)

#75

Post by brundolf »

evan_ wrote: post #61
brundolf wrote: post #55

Earlier quoted context omitted.

As I pointed out in another comment: console.log({x, y}); the wrapping object is being created at log time, so its values will never be changed after the fact. That could still happen with the contents of x or y themselves, but then it's no different from the original way (console.log(x, y);)

We can actually just test this. Here's some code: const x = {value: 0}; console.log(x); console.log({x}); x.value = 1; Running that in the latest Chrome javascript console, we see that the first version prints `{value: 0}` and the second prints `{x: {...}}`. When you expand the second one, it will show `{x: {value: 1}}`.

> its values will never be changed after the fact

By this I mean, the x and y in the output will never themselves change value. They may be mutated, but they cannot be reassigned in the printed object. The printed object is exclusively referenced by the console itself, even if the nested objects within it may be referenced elsewhere.

> That could still happen with the contents of x or y themselves, but then it's no different from the original way (console.log(x, y);)

By this I mean exactly what you demonstrated, the point being that it had nothing to do with the original suggestion made by jchw.

Re: Use console.log() like a pro (2020)

#76

Post by brundolf »

simlevesque wrote: post #63
brundolf wrote: post #35

Another little trick; instead of doing: console.log("some label: " + JSON.stringify(someObj)) pass it as a separate parameter: console.log("some label: ", someObj) and you'll get interactive expansions/manipulation in the console

No, this is totally different. In the second version, if someObj changes after it was logged, when you'll expand it you'll see the updated value. JSON.stringify freezes the value. To get the same as the first example, but interactive, you have to do: console.log("some label: " + JSON.parse(JSON.stringify(someObj)))

> you have to do

Technically you'd have to do

  console.log("some label: ", JSON.parse(JSON.stringify(someObj)))
> In the second version, if someObj changes after it was logged, when you'll expand it you'll see the updated value

Yes, this is something to be aware of (and is getting beaten to death throughout this comments section), but if like me you mostly use plain objects in an immutable way, you generally don't have to bother with cloning. Just keep this in the back of your head and know when it won't do what you want in a particular context.

Re: Use console.log() like a pro (2020)

#77

Post by aardvarkr »

bobbylarrybobby wrote: post #71
jchw wrote: post #2

Another trick that might be more practical for actually debugging is using the object shorthand. For example, instead of... console.log(x, y); which contains the information you need, but lacks any useful context, try... console.log({x, y}); ...which will print out like an object, including the key names.

I really like this method but unfortunately most debuggers print objects with keys in alphabetical order so there’s no way to get the keys you care about most at the top. Is there a way to rectify this?

This is going to make it significantly more janky but why not just put it into a list inside the curly brackets? That should preserve order while still triggering the object debugging feature

Re: Use console.log() like a pro (2020)

#78

Post by turdnagel »

Console.group is one of my favorite features but Chrome does not handle filtering it very well. Basically, if you want to filter on a certain term, all the groups will remain, even if nothing from those groups (title, subfields, otherwise) matches. There has been a Chromium bug open since 2014: https://bugs.chromium.org/p/chromium/issues/detail?id=363796
Post reply on HN