Here's a thread of cool things I found exploring the #Firefox Developer Tools!

[blinry@chaos.social]

Next, I looked at the Console.

I learned that it has some predefined helper functions! You can use `$(selector)` as an abbreviation for `document.querySelector(selector)`.

Similarly, `$$(selector)` is short for `document.querySelectorAll(selector)`!

Even though this reeks of jQuery, I think these are fantastic in this context and I might use them *a lot*!

[blinry@chaos.social]

There are more "Console Helpers" in #firefox:

$_ is a shortcut to the result of the last expression you executed, allowing you to do some neat step-by-step exploration.

And $0 refers to the currently-inspected element on the page.

[blinry@chaos.social]

There's a couple more, like copy(), which copies its argument to your clipboard, or keys(), an abbreviation for Object.keys().

If you ever forget these console helpers, you can run :help to open the page of the documentation that explains them!

https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/

[blinry@chaos.social]

There's a built-in multi-line editing mode! Press Ctrl+B to turn it on. Seems useful to write longer expressions.

This mode shares its history with the regular one-line mode.

[blinry@chaos.social]

But also, I learned that the one-line mode tries to guess whether your command is incomplete when you press Enter, and then allows you to type a second line.

You can force a new line using Shift+Enter.

[blinry@chaos.social]

That's all cool things I found in the Firefox DevTools today! Looking forward to check out the other tabs some other time.

It's kind of eye-opening for me how many convenient things a tool like that has. So far, when I opened the Toolbox, I usually quickly wanted to get something specific done, and didn't take the time to wander & explore…

What are your favorite built-in dev tools in Firefox? What did I miss in "Inspector" and "Console" today?

[adamhotep@infosec.exchange]

@blinry what is the difference between $$(…) and $$$(…)? I didn't know about $$(…)

[blinry@chaos.social]

Ohh, the CSS pane helps you debug values of the "transform" property by showing you the box before and after the transformation!

[nicolaschevobbe@mastodon.social]

@adamhotep @blinry $$$ will retrieve éléments in the shadow dom, which is not the case for $$ (see https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/ for the full doc)

[blinry@chaos.social]

@nicolaschevobbe @adamhotep I also had to look that up, but here's an example where a shadow DOM is used: In MDN's web dev playground, they want to isolate the CSS you write to only act on "your" HTML, not on the entire site. So they put it in a shadow root.

So $$ doesn't access the <h1> here, but $$$ does!