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

61–70 of 156 posts

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

#61

Post by evan_ »

brundolf wrote: post #55
matja wrote: post #43

Earlier quoted context omitted.

I was just about to mention this, I wasted a solid hour or two on this until I realised what was happening.

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

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

#62

Post by ajcp »

nkrisc wrote: post #56
ajcp wrote: post #38

My whole personal site[1] is one big console.log(), right down to theme matching :D Unfortunately I'm not sure anyone has actually noticed. 1: https://itsokayitsofficial.io/

I just see a tree and a name, is that all it is? Not sure what you meant but I’m on my phone so I can’t really look at the console.

Go to the desktop version and open the dev tools console :)

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

#63

Post by simlevesque »

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

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

#64

Post by simlevesque »

aerovistae wrote: post #18

Let me save someone a few minutes of confusion: generally I use console.table instead of console.dir ever since I discovered console.dir is basically unpredictable. Try using it on an Error or anything that inherits from Error and you'll see it puts out what looks like an expandable stack trace. I have no idea how or why it's implemented to do that, but basically it just varies from one object to the next and I disli…

Thank you for this

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

#65

Post by jordan314 »

drhayes9 wrote: post #34
SavantIdiot wrote: post #11

Not gonna lie, read this hoping to pat myself on the back for being a pro, twist: learned some cool stuff, console.memory()? Neato!

Doesn't work in Firefox, unfortunately. :sadface:

Yeah, also it's console.memory not console.memory()

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

#66

Post by da39a3ee »

brundolf wrote: post #52
matja wrote: post #45

Earlier quoted context omitted.

But this way is easier to reconcile the output, because the values logged shown are what they where at the time of the console.log(), not at the time of expansion (later). Try this in a browser console: x={a:1,b:{c:1}};console.log(x);x.b.c=2; then 'expand' the object, 'c' will be logged as 2, not 1

The original commenter was creating the object at log-time, though, which means it wouldn't be shared by anything else. Unless x or y is an object, but in that case the issue is completely tangential to the original suggestion And anyway- JSON.parse(JSON.stringify(x)) would be preferable because you'd still get the browser's rich object exploration

> Unless x or y is an object, but in that case the issue is completely tangential to the original suggestion

Of course we have to assume that x and y may be objects!

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

#67

Post by eyelidlessness »

Since I don’t see it mentioned yet: my favorite thing to do if I’m console slumming is to use it as a comma-separated expression. You can use console.log(), foo as a single expression (eg as an arrow function return) the log is executed but its undefined return value discarded. This saves a lot of keystrokes where you’d otherwise have to wrap the function body in braces with an explicit return statement.

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

#69

Post by Lex-2008 »

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

yep, but then when I expand (click triangle) the {value: 0} line, it shows "value: 1" on the next line, only to rise the confusion.

To be fair, there is also an "i" in a square, reminding me about this behaviour.

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

#70

Post by Folcon »

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

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)
Post reply on HN