I recently decided to switch back to Firefox, having been a Chrome user for a number of years. When I had last used Firefox in earnest, working with dev tools was all about the Firebug extension. Firefox did have some in built tools, but at the time they weren’t as strong as Firebug or Chrome’s dev tools. On my return I found things have changed!
Firefox’s own dev tools have come a long way, and they are still being continually upgraded. They are now definitely on the same level as any other dev tools and boast some fantastic features, including a few you won’t find anywhere else at present.
If it’s been a while since you used Firefox for development too, check out these features in Firefox Dev Tools you might not know about.
Firefox dev tools now include an in-depth CSS Animation inspector that will automatically detect animations on a selected element, as well as any animations on its child elements. For each animated element, it shows you a timeline with a scrubber you can control, and gives you the ability to pause, speed up or slow down animations.
With an animation selected you can modify its properties in the Styles tab and see the effect of your changes in real time, a feature that is very helpful for the process of tweaking things like easing functions.
The way animations are pictured in the dev tools also helps you determine the make up of each animation, something we’ll go into in more depth in another article coming up very soon. So if you’re into CSS animation, stay tuned!
The Developer Toolbar is a very handy way to quickly activate and control the features included in Firefox’s dev tools. It’s a relatively simple command line interface through which you can interact with just about everything dev tools can do. For example, you can use it to take a quick screenshot, to get a responsive preview of your site in specific dimensions, or to grab a color from the page.
Hit SHIFT + F2 to open the toolbar, then enter the command help to learn about all the commands you have at your disposal.
Responsive Design Mode helps you simulate different devices; their dimensions, interaction methods and typical connection speed. You can choose from a list of predefined dimensions, add your own size definitions to the list, or freely resize the preview.
To activate it click the Responsive Design Mode icon in the dev tools. Or, in the Developer Toolbar, enter resize on to activate this mode, resize to <width> <height> to test a specific size, resize off to turn it off again, or resize toggle to toggle it off and on.
Easily grab any color from a page with the eyedropper, which will magnify whatever you hover over with your mouse to make color picking easier. You can specify the format you want your color code to be given in, or have it use the authored format.
Activate from the Web Developer menu, or in the Developer Toolbar enter the command eyedropper.
Firefox has a super handy screenshot tool in built; no need for any more screen capture extensions.
In normal mode you can use the screenshot tool to capture a drag-to-define area, or you can click on individual page elements to capture them. When in Responsive Design mode you can click a little button at the top right of the preview to capture a screenshot of how your site looks on a particular device.
Activate the screenshot tool from the main toolbar in Firefox 57 (nightly), from the top right of the dev tools, or from the Developer Toolbar with the command screenshot.
Grab a quick measurement on any part of a by activating the measure tool and dragging out a rectangle. You’ll get the height, width, and diagonal distance between corners.
9. Dark, Light or Firebug Theme
Firefox’s dev tools come with three themes: a light (white) theme, dark (blue) theme, and in a nice nod to the original dev tools of Firefox, a Firebug theme.
Whether you have your desktop setup in light or dark coloring, you’ll have a theme to match.
Go Try It!
Firefox is getting better and better by the day, especially with the major changes in the upcoming version 57. And the feature set now available in Firefox dev tools makes Firefox very appealing not just for browsing, but for development as well.