Here's a thread of cool things I found exploring the #Firefox Developer Tools!
-
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.
-
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!
-
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!
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!
-
P Seth of the Fediverse shared this topic
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register LoginWelcome To Podcasting.Chat!
This forum is for podcasters, podcast guests, and podcast enthusiasts alike to share tips, tricks, and their love of the medium.
This forum is fully federated, so you are able to contribute to any discussion here through your own software of choice (e.g. Mastodon, Misskey, Lemmy, Piefed, etc.). So you can sign up for an account here and it federates around the Fediverse. You can also follow feeds and topics from your other Fedi-enabled accounts.
Recent Posts
-
Do not eat: Milo snack bars recalled nationwide
#PSA #Recall #MiloBars #Australia
(www.thenewdaily.com.au)
-
https://www.europesays.com/uk/767540/ Households and the Reserve Bank’s official cash rate decision #audio #Business #CurrentAffairs #Economy #News #Podcasts #PublicRadio #RadioNewZealand #RNZ #UK #UnitedKingdom
-
The final proofread has begun ...
-
@phillycodehound @julian I have now updated my profile page.
I am interested in being a moderator in the future. I was a moderator for BizSugar (part of Small Business Trends) for almost 20 years.
