Firefox is my browser of choice for anything involving web development. The developer edition comes with a plethora of tools and niceties which make working, with CSS especially, a breeze.
While everyone raves about tools like the fantastic Grid and Flex Inspectors, or the fonts and changes panels, I felt like there was a gap in my knowledge of the browser to use it to its full potential. So I embarked on a journey of reading all the entries about Firefox on MDN and found cool features which could enhance your development experience.
This is the first part of a series where we will take a look at each of the tools within Firefox.
For now we will focus on the Inspector tool, a best friend of mine.
Shift-Click on the color swatch to change the displayed format
Color formats can be tricky to work with when making small changes for accessibility in particular. An HEX value doesn't tell us much about a specific color besides its hue, thankfully we can toggle between different formats right in the browser.
If the color in question is used as a foreground color, the color picker menu also provides the contrast rating based on WAI-ARIA.
Move the location of Absolutely positioned elements
The joke about centering an element being difficult in CSS might not be longer true with all the introduction of flex and grid properties, but absolutely positioned elements can still be tricky to work with.
You can go about nudging numbers, but why not do it optically? Clicking the target icon in the layout panel allows you to do just that.
Talking about nudging numbers, you can use Shift + Up / Down to increment by a factor of 10, Alt + Up / Down to increment values by 0.1, and Shift + Page up / Page down to increment values by 100.
Editing filters
Clicking on the gray and white swatch next to a filter property in the Rules View will open a filter editor displaying all the effects applied by that filter individually. You can also add, remove, reorder effects, and even save some for later using the drop-down menu at the bottom.
Editing timing functions
When defining an animation or a transition, the timing function might need some tweaks. In the past I would have to use a website like this one to define a better one and update my code before testing it again within the browser.
Thankfully there is a tool in Firefox which allows you to set them directly by clicking the cubic Bézier swatch. You can decide to try modify the current curve or try one of the presets as a starting point. Neat, uh?
Monitoring animations
The animations panel is really useful when working with complex animations that involve a number of elements and properties.
Clicking on an element will open a bottom panel from which we can analyze the components of the running animation. Animation properties which are optimized through the compositor have a lighting bolt icon next to them while hovering on the animation. If they aren't, a message explaining the cause will appear instead.
If your CSS animations seem to stutter, or lack in smoothness, taking a look there might be a good idea.
Restict matches when searching
It is sometimes helpful to search for a particular property name or rule in the Rules view to filter styles. By default, the search will highlight all the items containing the query. For example, if you wanted to look for the flex keyword, you'd obtain all results including flex-direction or flex-flow.
But what if you only wanted to highlight the flex shorthand property instead. You can surround the query with backticks to restrict the match. Et voilà!
Toggling classes
Classes that have been assigned to an element can be quickly toggled using the .cls selector on top of the Rules view. It's so useful and easy to access, I don't know why I don't see it used often enough.
Manipulating Shapes
This feature is so awesome and complex that it would need an entire article to cover it. But it is just too good not to mention.
Using the Shape Path Editor when using either the shape-outside or clip-path properties allows for easy creation of simple to complex shapes within your CSS.
8 little videos about the Firefox shape path editor
Quick referencing
I don't know about you but I only go to the computed panel when something is going very wrong in the cascade. Well, selecting an element in the Computed panel and pressing F1 will open its reference page in MDN. How cool is that?
Re-using the element picker
Using the element picker Shift + Cmd + C, the default behavior exits the tool right after a single selection.
It is possible to continue selecting elments by holding the Shift key. The tool will return to its default behavior once you let go of the key.
And that's it for today. Next, we'll talk about my other best friend, the console panel.
I hope you found something useful, what's your favorite thing about the inspector tool that I haven't mentioned?
Top comments (0)