Here's a thread of cool things I found exploring the #Firefox Developer Tools!
Uncategorized
22
Posts
5
Posters
1
Views
-
This is probably common knowledge, but I wasn't aware of it so far:
The sun & moon icons in the "Rules" tab allow you to quickly force the site into light mode/dark mode! ☀️🌙
You can open the web console in a split view by pressing Esc!
This is the same console as in the "Console" tab. And this works in any tab, not just the Inspector! Super useful if you wanna see more things at once!
-
You can open the web console in a split view by pressing Esc!
This is the same console as in the "Console" tab. And this works in any tab, not just the Inspector! Super useful if you wanna see more things at once!
In the CSS pane, there's this little dashed box icon after CSS rules. Click it to permanently highlight the matching elements on the page!
Here, I highlight a specific <p> element. The colors that are used correspond to the colors in the "Layout" tab, and show you the size of the margin, border, padding, and content area.
-
In the CSS pane, there's this little dashed box icon after CSS rules. Click it to permanently highlight the matching elements on the page!
Here, I highlight a specific <p> element. The colors that are used correspond to the colors in the "Layout" tab, and show you the size of the margin, border, padding, and content area.
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.
-
undefined oblomov@sociale.network shared this topic
-
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!
@blinry Not very intuitive
-
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!
-
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*!
-
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 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 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.
-
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.
-
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.
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?
-
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 what is the difference between
$$(…)and$$$(…)? I didn't know about$$(…) -
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?
Ohh, the CSS pane helps you debug values of the "transform" property by showing you the box before and after the transformation!
-
@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)
-
@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!
-
undefined paoloredaelli@mastodon.uno shared this topic
Gli ultimi otto messaggi ricevuti dalla Federazione
-
l’IA sta falsando sondaggi e ricerche online?
-
British Museum removes the term #Palestine from certain Middle East exhibits
The museum told The Jerusalem Post that the term Palestine no longer holds a neutral designation and may be understood in reference to political territory.
-
Oh, no. They still use autotune in the 23rd century. Hate it.
I once liked goofy musical episodes, but autotune has ruined that for me. Let me hear them struggle a little. They're actors, it's OK if they're a little pitchy.
-
I dumped tea on my keyboard a little bit ago...and, the "2", "w", and "s" keys broke. I congratulated myself on having spare switches on-hand. Turns out, it isn't the switches...gonna leave it to dry for a bit more and hope for the best.
-
I asked him for it, it’s part of my blogroll.
So if you want to comment on something that came from my linkblog feed, I will see it.
two-way rss.
.
-
Stragi sul lavoro: il 16 febbraio incontro…
@anarchia
… a Bologna della Rete Nazionale Lavoro Sicuro. A due anni dalla strage della Esselunga. 16 febbraio 2026 secondo anniversario della strage del cantiere ESSELUNGA di Firenze Dalla ESSELUNGA A CRANS MONTANA : LE STRAGI SUL LAVORO NON FINISCONO MAI...Vedi https://www.rivoluzioneanarchica.it/stragi-sul-lavoro-il-16-febbraio-incontro/
-
@eff It doesn't work for small websites that are registered in US states without strong anti-SLAPP laws and who don't have enough funds to hire a lawyer. Case in point: RationalWiki, censored by an out-of-court settlement with eugenics activists.
