21–30 of 156 posts
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.
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.
Wow, since when it was in JS?
In Firefox any objects you pass to console.log are expandable, so you can say console.log("my hash", h). It seems to behave the same when you say console.log("my hash %o", h).
But there is a tricky thing that has really confused me in some debugging efforts: when expanded, the object display is "live", so it always shows the current properties of the object, not the properties as they were when you printed them. But the unexpanded view shows them as they were. So for example:
h = {foo: "bar"}
console.log(h)
▶ Object { foo: "bar" }
h.foo = "BAR"
▼ {..}
| foo: "BAR"
| ▶ : Object { .. }
%s, %i, %o, %f, etc.
`This is a string that has been printed ${someVar} times.`Wow there are some cool tricks here! In Firefox any objects you pass to console.log are expandable, so you can say console.log("my hash", h). It seems to behave the same when you say console.log("my hash %o", h). But there is a tricky thing that has really confused me in some debugging efforts: when expanded, the object display is "live", so it always shows the current properties of the object, not the properties as…
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.
Each tip has a textual explanation, and an animated gif if you're a visual learner (I know, I need to scrap gifs and move to regular videos).
There's a lot of tricks there which can hopefully improve your development and debugging workflows. Let me know if there are specific things you'd like to see. A few people have asked for how to find memory leaks.
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.