This is the first post in a series of productivity tips and tricks to help you debug web applications with Firefox Devtools. It shows you 5 tips & tricks for working with the Page Inspector in the Firefox Developer Tools.
CSS Selector Search in the Page Inspector
- elements with a
z-indexthat you can’t directly right-click onto
- looking for generic text elements that you know the selector of
- finding elements that are visually the same but have a specific class/selector
Filter Styles in the Rules view
You can filter the CSS rules in the Styles view of the Inspector by any selector or property. For selectors, it hights the selectors in the rules list, and for the properties it expands all the properties containing your filter inside (e.g. the border shorthand has border-color in it), it highlights the properties containing your filter and it hides the rules that don’t. It’s really handy when you’re using competing selectors in a framework, focuses just the things that are related. Or when you have composed properties like border or background, because it expands them into the composing properties that have the filtered property in it.
Color Picker & Eyedropper tool in the Rules view
Click on the colored dot next to any color property and it opens a color picker with a handy eyedropper tool. The eyedropper has magnification when you hover the page, so it’s easier to pick the color from a specific pixel. Really handy if you’re a visual person and want to fiddle with the color in place or if you want to use colors from a different part of the page without changing between the rules to get the color.
Color Representation in the Rules view
SHIFT + Click on any colored dot next to a color property and it changes between the 3 or 4 (not all colors have a name, so you’d have only 3 representations for those colors) color representations available for the color:
rgb. It works the same for angles, if you SHIFT + click the dot next to a
rotate degree unit, it shifts representations between
turn. Really handy when your style guide asks for HEX colors but you’re more familiar with hsl or rgba.
Timing Function Bezier Editor in the Rules view
You can click on the curved line dot next to any property with a timing function (e.g transition, animation), and it opens up a set of pre-defined transitions plus a bezier curve editor. Really handy to test out transitions, there is an animated slider that shows you the timing, and especially handy if you want a custom functions, it calculates the cubic bezier curve for you.
It’s a weekly thing
If you wonder why this came to be, the reasons are simple enough:
- The Chrome DevTools get a lot more love on the internet, but Firefox DevTools have an amazing engineering team behind them with a lot of useful features. Some are on par with Chrome, some are better and some aren’t even in Chrome yet. Of course some are better in Chrome (I’m looking at you, Debugger), and I’ll be sure to point out the differences for the tricks I’m showing when there is a difference between the two.
I’m trying to make this into a weekly thing, I’ve gathered so many tricks over the years. If you’ve liked this or want to see more, I’m @avolakatos on Twitter, follow me there, that’s where the magic happens.