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

51–60 of 156 posts

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

#51

Post by ajcp »

duxup wrote: post #42
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 really like how that plays out as a sort of text only alternative to a site, very cool ;)

Hey thanks! I love the sense of discovery the dev console provides. When you go to someone's site and hit `F12` to see what's going on and BOOM, your confronted with a message, like they were waiting for you personally. It's those little bits of hidden magic the internet can provide.

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

#52

Post by brundolf »

matja wrote: post #45
brundolf wrote: post #36

Earlier quoted context omitted.

I think you misunderstood the intent of the GP

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

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

#53

Post by throwanem »

shp0ngle wrote: post #21

Another tip I found very useful lately You can use `$("selector")`, even without jQuery, in console. (not sure if with firefox, works with safari and chrome) And also `$x("path")` for xpath. But note, this works only in console, it’s not available from javascript.

Yep, it's an alias for document.querySelector. $$ aliases document.querySelectorAll, too.

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

#54

Post by sfink »

shp0ngle wrote: post #21

Another tip I found very useful lately You can use `$("selector")`, even without jQuery, in console. (not sure if with firefox, works with safari and chrome) And also `$x("path")` for xpath. But note, this works only in console, it’s not available from javascript.

Looks like Firefox gives you `document.getElementById` with `$`. You need $$("selector") for `document.querySelectorAll`. Or rather, it looks like it does something like `[...document.querySelectorAll(arg)]` (it returns an `Array` not a `NodeList`.)

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

#55

Post by brundolf »

matja wrote: post #43
pjerem wrote: post #39

Earlier quoted context omitted.

Then, one day, after 12 hours chasing a race condition bug, you learn that when you expand objects from console.log, it shows you the current value of properties and not the values at the time of the console log. Because the values are evaluated when you click on the arrow. Then you quit web development and start a new career.

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

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

#56

Post by nkrisc »

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.

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

#57

Post by boredpandas777 »

I didn't know about .memory, .trace() and .assert(), all of which are very helpful. Up till now, I've had to add a try-throw-catch to get a stack trace and be able to follow synchronous execution flow leading up to a given function call, but console.trace will do that for me, so yay.

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

#59

Post by newsbinator »

pjerem wrote: post #39
ollien wrote: post #27

Earlier quoted context omitted.

I much prefer it being collapsed. When dealing with large objects, the firehose can be annoying.

Then, one day, after 12 hours chasing a race condition bug, you learn that when you expand objects from console.log, it shows you the current value of properties and not the values at the time of the console log. Because the values are evaluated when you click on the arrow. Then you quit web development and start a new career.

Rite of passage for every web developer. The moment when you realize this is the moment when the universe makes sense again... after long hours of total confusion.
Post reply on HN