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

If you click on the dashed box after a more general rule, you'll get all matching elements highlighted.

Here, I highlight all <p> elements of that toot.

In the Inspector, Ctrl+F jumps to the search box that allows you to find a tag or some content.

I was always annoyed that F3 doesn't go to the next result. Turns out that the shortcut for that is:

Enter!

In the Inspector, Ctrl+F jumps to the search box that allows you to find a tag or some content.

I was always annoyed that F3 doesn't go to the next result. Turns out that the shortcut for that is:

Enter!

As you start modifying the CSS rules, and arrive at something you like, you can switch over to the "Changes" tab to find a summary of what you changed!

You can also copy all of that into your clipboard, and then integrate it into the original CSS that you're working on!

Until now, I always made changes in my source CSS files directly, and used some auto-refresh tool to preview it. But this workflow of modifying it directly, and copying out the required changes might be a bit smoother!

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*!

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.

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/

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.

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.

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*!

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?

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

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

@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!

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.

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.