Advertisement
  1. Web Design
  2. Firefox
Webdesign

9 Things You Didn’t Know About Firefox Dev Tools

by
Difficulty:BeginnerLength:ShortLanguages:

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.

Note: a couple of the newest features need Firefox Nightly, but most are available now in regular Firefox.

1. CSS Grid Inspector

CSS Grid is beginning to radically change how web design layouts are made, and for the better. As far as I know, at present the only inspector for CSS Grid is found in Firefox’s dev tools.

Among other things, the grid inspector can:

  • Identify all grids on a page
  • Give you an overlay showing how a grid is laid out
  • Display grid lines and their numbers
  • Display named grid areas
  • Visualize the effects of transforms applied to the grid container

If you’ve yet to play with CSS Grid you’re going to love it, and the process of working with it is made all the more smooth with Firefox’s grid inspector tools.

Read more at hacks.mozilla.org.

2. CSS Animation Inspector

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!

Read more at developer.mozilla.org.

3. Developer Toolbar

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.

Read more at developer.mozilla.org.

4. Responsive Design Mode

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.

Read more at developer.mozilla.org.

5. Rulers

Keep an eye on the dimensions of your designs by using page rulers, similar to those you’d find in a graphic design application.

Click the Rulers icon on the top bar of the dev tools to activate, or in the Developer Toolbar enter the command rulers.

Read more at developer.mozilla.org.

6. Eyedropper

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.

Read more at: developer.mozilla.org.

7. Screenshot Tool

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.

Read more at developer.mozilla.org.

8. Measure Tool

Grab a quick measurement on any part of the page 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.

If you haven’t checked out Firefox Dev Tools yet, go give them a run!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.