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
You can use CSS Selectors in the Firefox Developer Tools Page Inspector search box. It’s really handy for:
- 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: name, hex, hsl and rgb. It works the same for angles, if you SHIFT + click the dot next to a rotate degree unit, it shifts representations between deg, rad, grad and 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:
- I’ve been using the Firefox DevTools every single day since they were being developed. Initially as the QA Owner for a bunch of them and after that in my day to day work as a JavaScript Developer on the open web.
- 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 @lakatos88 on Twitter, follow me there, that’s where the magic happens.
Top comments (5)
Nice! Firefox devtools needs more love!
I think that Firefox has more extra things than Chrome devtools, like the special tool for CSS grid layout and flexbox. It is definitely easier to use CSS grid in Firefox, rather than in Chrome's devtools.
Also, one of the function of Firefox devtools I love is that it can show event listeners besides the target div! You can even click on it and view those related listener functions. Quite useful when your addEventListener function doesn't work :)
I agree with you 100%, that's why this series was born and that's why I'm using Firefox DevTools as my default! TBH, I think the main reason I still use the Chrome ones from time to time is that I can't do live edits in the Debugger in Firefox, yet. I'm jumping the gun, but the next Inspector trick series is featuring the new Flexbox and Grid tools.
I didn't think of adding the event listeners bubble, but now I think I should.
Nice series! Bookmarked. Firefox deserves more love. Chrome does not have a color picker, right?
It does have one now, and an eyedropper tool. Even has the "Shift + click" thing for changing color representation now. The only difference is Firefox has a circle color icon, and Chrome has a square :)
Nice article, I didn't know about filtering attributes at the CSS tool.