If you select an item with the inspector (Chrome or Firefox), you can now refer to that HTML element as $0 in the console.
Use console.log() like a pro (2020)
31–40 of 156 posts
Re: Use console.log() like a pro (2020)
#32Another 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.
If they're primitives most consoles will show you the values without expansion
Re: Use console.log() like a pro (2020)
#33console.table O_O Wow, since when it was in JS?
Since Chrome 27 and/or Firefox 34:
https://developer.mozilla.org/en-US/docs/Web/API/Console/tab...
Re: Use console.log() like a pro (2020)
#34Not 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:
Re: Use console.log() like a pro (2020)
#35Another little trick; instead of doing:
console.log("some label: " + JSON.stringify(someObj))
console.log("some label: ", someObj)
Re: Use console.log() like a pro (2020)
#36Another 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.
Or you can console.log(JSON.stringify(x, null, 2));
I think you misunderstood the intent of the GP
Re: Use console.log() like a pro (2020)
#37Not gonna lie, read this hoping to pat myself on the back for being a pro, twist: learned some cool stuff, console.memory()? Neato!
Another! If you inspect a console.logged function, DevTools shows you the scope it has access to.
Re: Use console.log() like a pro (2020)
#38My whole personal site[1] is one big console.log(), right down to theme matching :D Unfortunately I'm not sure anyone has actually noticed.
Re: Use console.log() like a pro (2020)
#39Earlier quoted context omitted.
Unfortunately that tends to print the object with collapsed values, requiring you to expand the object to actually see any of the values.
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.
Re: Use console.log() like a pro (2020)
#40Another 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.
Yes, I love this one!