Here's a thread of cool things I found exploring the #Firefox Developer Tools!
-
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*!
-
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!
-
@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!
-
@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!
@blinry @nicolaschevobbe while I've got your attention, do you know how to inject helper JS code (just some functions) into a document for the Console? I only know how to do it in a UserScript, which means it's not available from the Console.
-
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.
@blinry you can right-click an element and "Use in Console" will create a temporary variable with that element
-
R ActivityRelay shared this topic
