Firefox DevTools for CSS authors
Tags: frontenddev, firefox, css, programming
Published: 2019-07-08 17:58:36

---
title: Firefox DevTools for CSS authors
published: true
tags: front-end-developmen,firefox,css,programming
canonical_url: https://blog.logrocket.com/firefox-devtools-for-css-authors-1511f41d1e3
---

![](https://cdn-images-1.medium.com/max/1024/1*CH1pylIf1cFQsdozu0Kfmw.jpeg)

If you’re a developer, chances are there’s a set of tools you hold near and dear to your heart, and of course, any browser DevTool is numero uno on that list.

With Firefox releasing amazing improvements to their DevTools at a rapid rate, it’s a good time to investigate the powerful aspects specifically geared towards CSS authors.

In this article, I’ll explore these features to both assist you with your CSS authoring and inspecting in the browser. I’m certain what I’m about to share will make your appreciation towards Firefox DevTools expand in a positive way.

So without further ado…let’s start on our journey.

#### **Table of contents**

Page Inspector | Shape Path Editor | Filters | Animations | Grid | Fonts | Screenshots **|** Style Editor | Responsive Design Mode | Transforms | Working With Preprocessors | Variable Autocompletion | The Future | Links & Resources

[![](https://cdn-images-1.medium.com/max/1024/1*GPjaPKNNUYHU8EsA3Z0JGA.png)](https://logrocket.com/signup/)

### **Page inspector**

![](https://cdn-images-1.medium.com/max/1024/1*fxz-LUtVdYS18GYyJrnY-A.png)<figcaption>The 3 pane DevTools page inspector from Firefox</figcaption>

As of version 62, developers have the ability to inspect and modify the HTML and CSS of your page with the helpful layout of Firefox’s newly added 3 pane inspector.

This third pane grants insight into layout properties affecting particular nodes of your page such as box-sizing, position, display as well as other features like Animations, Computed, and Fonts. Visually speaking it’s a wonderful way to have all the information required so accessible and organized that assists in keeping your CSS workflow efficient.
{% twitter 992477510830100482 %}
**Docs**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector)

### **Shape path editor**

![](https://cdn-images-1.medium.com/max/1024/1*eMd-lTZpQUaS_wOMX520-A.png)<figcaption>Image courtesy of MDN docs.</figcaption>

The ability to create complex shapes such as a circle, rectangle, ellipse or a polygon is exactly what clip-path was made for. If you’re experimenting or using it today I’ve got great news because Firefox allows you to edit, and inspect shape paths right from their DevTools.
{% twitter 1006573790254338048 %}
*Jen Simmons' announcement of the shape-path editor*

You can watch Jen’s [full video here](https://youtu.be/w8pksaGhjfA) and use the demo below to see it working in action first hand:
{% codepen https://codepen.io/dudleystorey/pen/FvJDB %}
With the demo loaded and your Firefox DevTools open…

1. Select the element (the actual image in this case) using the DOM inspector
2. With the element selected via the DOM inspector, use the CSS Rules pane to find the elements shape value
3. Click this icon previously mentioned that’s next to the property value to highlight the shape path in the browser’s viewport. To deactivate the Shape Path Editor click on the icon again

![](https://cdn-images-1.medium.com/max/1024/1*7zO81NIuGGlvoCDHkTmqVA.png)<figcaption>Shape Path outline via Firefox DevTools. Image Courtesy of MDN Docs</figcaption>

Once the shape path is activated in the viewport you’ll be provided with additional aspects to help depict particular characteristics of your shape path; specifically solid and dashed lines.

These lines will possess handles you can even manipulate with your cursor to stretch the shape if further tweaks are desired.

Pretty cool huh?

**Docs**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Edit\_CSS\_shapes](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes)

### **Filters**

If you’re not familiar with filter it’s a nifty CSS property to create visual effects such as blur, saturate, and sepia along with many others. These filters are just like the filters you typically use in Photoshop but for the browser.

![](https://cdn-images-1.medium.com/max/1024/1*TYOKHvgqWVQ1u8DNk7paMA.png)<figcaption>CSS filters viewed from the Firefox DevTools. Photo courtesy of MDN</figcaption>

When inspecting CSS filters with Firefox a circle icon with a gray and white fill is displayed that’s also clickable in order to edit the property and its values to your liking.

![](https://cdn-images-1.medium.com/max/1024/1*gfK0Kl80ZIFbGkSC98uoJw.png)<figcaption>CSS filter editor provided by Firefox DevTools. Image courtesy of MDN</figcaption>

Clicking this swatch icon will open a filter editor giving you the power to add, remove, adjust, and change the order of your filters as order can skew the expected result.
{% youtube bHcfLlZE8T8 %}
*Saving a CSS filter from Firefix DevTools. Video courtesy of MDN*

When you create a filter and are satisfied with the result you can save it as a custom preset. To enable any saved filter preset select your element with the inspector, click the icon previously mentioned in the styles pane, and select your preset from the filter editor window.

**Docs**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Edit\_CSS\_filters](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters)

### **Animations**

You might have noticed animation is here to stay, and for good reasons. It’s a facet that’s been widely accepted as a method to help engage users and create a more dynamic way for interfaces to breathe life into an experience. The [animations view](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view) gives full details of animations applied to your selected element(s) along with controllers, and a timeline (with markers every 250 milliseconds) to handle playback for debugging/enhancing. You can also control any animations applied to pseudo elements such as ::before or ::after.

![](https://cdn-images-1.medium.com/max/1024/1*2gtEIkZJgWBjSK3bp3Z3IQ.png)<figcaption>Animation tab of Firefox DevTools</figcaption>

To begin using this feature locate the “ **Animations** ” tab of your DevTools. Take notice of the color coding to help assist developers to decipher what types of animations are being applied. A blue animation bar represents transitions, orange for @keyframes, and green for the Web Animations API. If a bar contains a lightning bolt icon it means the property was animated using the compositor thread. If the animation or transition had a delay it will be shown as a cross-hatched fill. Hovering over each bar displays a tooltip that provides info about the type of animation, duration, delay, and timing function (ease).
{% youtube 9fxRm3i_aDQ %}
*Animation Inspector. Video courtesy of MDN docs*

At the top of the animation pane, you’re provided with timeline controls for playback, pause, restart, as well as adjusting speed & time. A scrub bar is also present to manually adjust your playback to particular points of time for further analysis.

**Docs**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Work\_with\_animations](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations)

### **Grid**

I can only assume most of you reading have been following the tremendous enhancements that have come to CSS layout over the years, and particularly with Grid. Firefox was one of the first browsers to offer developers powerful tooling in order to inspect elements using Grid, and it only gets better with each day that passes.

![](https://cdn-images-1.medium.com/max/1024/1*rk9PnSmx9PHcGb_jYGC7hw.png)<figcaption>Firefox DevTools Grid inspector</figcaption>

To inspect elements with the grid property applied, the DOM inspector will display these elements marked with the word “ **grid** ” beside them. Within the styles pane, the element will also have an accompanying grid icon next to the property value. Clicking this icon will display a grid overlay on top of the element or region selected thereby displaying all the applied information to your grid region such as lines and tracks. Check out this demo below to see in further detail the power it provides for inspecting CSS Grid:
{% codepen https://codepen.io/GeorgePark/pen/bLLzJK %}
*Trello Board Layout with CSS Grid & Flexbox by George W. Park*

To further enhance an already powerful grid inspection system, Firefox provides options to display line numbers, area names, and extended lines that can be toggled on or off at your leisure along with the ability to customize highlight colors of your grid regions. A truly powerful feature from Firefox, and a trailblazer for us Grid fanatics.
{% twitter 1049402479618744320 %}
*Highlight multiple grid regions in Firefox 64*

**Docs**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Examine\_grid\_layouts](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)

### **Fonts**

I’m a huge fan of typography, and Firefox has certainly blown my mind with one of my favorite features to enter their DevTools; the Fonts tab.

![](https://cdn-images-1.medium.com/max/923/1*EOeHnjbNJW131_uHXAy3hg.png)<figcaption>The Firefox DevTools Fonts tab</figcaption>

The Fonts tab grants developers the ability to inspect, view, and manipulate the fonts you’ve applied to your page along with other aspects such as line-height, weight, font-family, and font-style. You’re also provided with deeper information such as URL paths of fonts in use, @font-face declarations, and a text sample of the font-family.
{% twitter 994002082356178944 %}
*Gain immediate insight on what fonts are in use for your stack*

As of version 62 variable fonts are also supported thereby allowing you to inspect them live in the browser.
{% codepen https://codepen.io/jpamental/pen/PebXEX %}
*Explore variable fonts with Firefox by Jason Pamental*

If you’re not familiar with variable fonts they allow a font designer to include multiple variations of a typeface inside a single font file. If you’re curious about variable fonts, check out [this resource](https://v-fonts.com/) for further investigation.

![](https://cdn-images-1.medium.com/max/889/1*od3W-0GEmZlHHh-n9vLaTQ.png)<figcaption>Controls displayed for adjusting a Variable Font</figcaption>

If a variable font is in use, the Fonts tab will provide additional controls for the axes implemented allowing you to control & alter the value of each one. This is useful in order to discover what axes are available as they can vary drastically since designers can implement a wide array of options.

You can adjust the axes individually, or if the font designer has included defined instances, you can select one from the “ **Instance** ” drop-down list, and view the updates live on your page. If you‘re fond of fonts then Firefox DevTools is your jam. Check out this wonderful variable fonts playground as well [http://play.typedetail.com](http://play.typedetail.com/).
![](https://thepracticaldev.s3.amazonaws.com/i/7nzsubhkg37l2k8igwrz.png)
{% twitter 1052229783726247939 %}
**Docs** :

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Edit\_fonts](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts)

### **Screenshots**

![](https://cdn-images-1.medium.com/max/1024/1*8QCoS5EuHbikoi-2QzPHQw.png)

If your work requires documenting an interface in static form, Firefox has done a wonderful job implementing clever ways to document your work visually. Along with the ability to take full page screenshots, you can also select partial page regions, and even individual nodes (a handy feature for authors developing isolated components/modules).

There are a few ways to accomplish screenshots with Firefox; through the DevTools itself, or using the browser bar. If you’re using the DevTools directly select “ **Settings,** ” locate the column titled “ **Available Toolbox Buttons** ,” and locate the toggle “ **Take a screenshot of the entire page**.”

![](https://cdn-images-1.medium.com/max/224/1*xWlNdgXUo3_xo67n007yAA.png)<figcaption>Screenshot behavior options provided via DevTools settings</figcaption>

Under “ **Screenshot Behavior** ” you’ll find additional options to control the…wait for it…behavior. With these options selected the DevTools menu bar will display a camera icon in the upper right allowing you to click on the viewport, and take a screenshot of your entire page. If you don’t desire a shot of the entire page you can also capture individual elements using your HTML inspector pane by right-clicking on your node of choice and selecting “ **Screenshot Node**.”

![](https://cdn-images-1.medium.com/max/852/1*M3XykTuKYnH33da7gCXYKA.png)<figcaption>Firefox URL bar’s page actions menu</figcaption>

![](https://cdn-images-1.medium.com/max/382/1*B3YTjDRjzRt4jDV8QM3Rhw.png)<figcaption>Screenshot option provided under page actions in Firefox’s URL bar</figcaption>

The other option for obtaining screenshots is selecting the **page actions** in your browser’s URL bar represented by the 3 dots. When clicking these three dots you’ll notice a dropdown menu that displays the text “ **Take a Screenshot**.” This option grants the ability to take a full page shot, the visible region, or using the cursor to highlight individual elements.

![](https://cdn-images-1.medium.com/max/1024/1*L423p1_LtK9CHP2i06poEg.png)

Once a screenshot has been captured you can copy it to your clipboard, download directly, share as a URL, or save to the browser. If you’re saving locally to the browser you can select a period of time to expire the screenshot or keep it indefinitely. If you need to access your saved shots click the library icon in your browser bar, and select “ **Screenshots**.” If the console is preferred for creating screenshots you can run the following command…

```jsx
screenshot <your-desired-filename.png> — fullpage
```

[Eric Meyer also wrote a great post](https://meyerweb.com/eric/thoughts/2018/08/24/firefoxs-screenshot-command-2018/) about the additional flags you can pass to the screenshot command in the console that I highly suggest reading.

**Docs:**

- [https://screenshots.firefox.com](https://screenshots.firefox.com/)
- [https://developer.mozilla.org/en-US/docs/Tools/Taking\_screenshots](https://developer.mozilla.org/en-US/docs/Tools/Taking_screenshots)

### Style editor

The Style Editor isn’t anything new, but it’s as valuable as any other feature I’ve mentioned so far. Most CSS authors will eventually need to inspect entire files, or even save changes back to disk.

![](https://cdn-images-1.medium.com/max/809/1*jcZbJGfpZ1cVQzySakxtWQ.png)<figcaption>Firefox DevTool Style Editor. Image courtesy of MDN docs</figcaption>

Options such as viewing, creating, and importing an entire stylesheet is just a few facets at your disposal.
{% youtube XeocxoW2NYY %}
*
The sidebar to the right is specifically for those pesky @media rules that provide a link to the stylesheet where the rule is defined, as well as the ability to import a custom style sheet or create a new one.
{% twitter 1055459007933104129 %}
**Docs:**

- [https://developer.mozilla.org/en-US/docs/Tools/Style\_Editor](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor)

### Responsive design mode

Responsive Design is nothing new to developers as it’s something we deal with on a daily basis; especially when it comes to our CSS. Having the ability to investigate screen size, devices, and even network speeds is certainly one of the most important aspects of developing a web page.

![](https://cdn-images-1.medium.com/max/1024/1*bMF00aDI05tgVnYYh4HObg.png)<figcaption>Responsive Design Mode in Firefox DevTools. Image courtesy of MDN docs.</figcaption>

Firefox has taken great care to provide developers with powerful tooling to inspect a sites responsive aspects, and has taken great direction from Chrome over recent years. Choose from various aspects CSS authors care deeply about such as devices, pixel ratio, user-agent, custom screen sizes, orientation, network throttling, and of course obtaining screenshots. You can even click on a @media rule to apply it in Responsive Design Mode automagically.

**Docs:**

- [https://developer.mozilla.org/en-US/docs/Tools/Responsive\_Design\_Mode](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)

### Transforms

Wouldn’t it be nice to see exactly how your transforms are situated without guessing? With Firefox DevTools you can!

![](https://cdn-images-1.medium.com/max/1024/1*10u86THSU_UFX1rpX-954A.png)<figcaption>Transform visualization in Firefox DevTools. Image courtesy of MDN Docs.</figcaption>

To see this visualization hover over any transform property and you'll see the transform as an overlay on your page.

**Docs:**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Visualize\_transforms](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms)

### Working with preprocessors

This is a feature we know very well these days, but it’s worth repeating. Many of us CSS authors are using some form of a preprocessor language like Sass or LESS and why it’s equally as important to work with these files and have changes saved back to disk locally.
{% youtube zu2eZbYtEUQ %}
Select “Show original sources” in the [Style Editor settings](https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor). The link displayed next to CSS rules in the [Rules view](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Rules_view) will link to the original sources in the Style Editor. Make sure you have Source Maps enabled for your language of choice as this feature will not be available for any abstracting languages not supporting Source Maps.

**Docs:**

- [https://developer.mozilla.org/en-US/docs/Tools/Style\_Editor#Source\_map\_support](https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_map_support)
- [https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools](https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/)

### Variable autocompletion

CSS Variable names finally have the ability to auto-complete depending on the variables defined from your CSS. As you type var( into a property value followed by a dash (-), any variables defined in your CSS will appear in the autocomplete list as well as a color swatch providing a visual indication as to what color each variable is storing.

![](https://cdn-images-1.medium.com/max/546/1*HUsso7Wq32eOaU_Om8rt7w.png)<figcaption>CSS Variables autocompletion in Firefox DevTools. Image courtesy of MDN Docs.</figcaption>

In addition to the autocomplete functionality, hovering over any CSS variable name displays a tooltip showing what color value is stored.

**Docs:**

- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Examine\_and\_edit\_CSS#CSS\_variable\_autocompletion](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#CSS_variable_autocompletion)

### The future

The Firefox DevTools team has no intention of slowing down their progress when it comes to enhancements, and improvements. The future is bright with many exciting aspects coming down the pipeline. Here are just a few improvements to mention that still pertains to CSS authoring.

{% twitter 959411692596793344 %}

#### Ch-Ch-Ch-Changes

CSS change-tracking is a feature that will display recent changes made from the DevTools in order to keep track of your progress. As of this writing, the **Changes** panel is hidden behind a flag under about:config in Firefox Nightly.

```jsx
devtools.inspector.changes.enabled 
```

Once the flag is enabled you can visualize your changes compared against your original lines of code. These changes are denoted with either a plus or minus icon to relay what has been added/deleted, and what stylesheet the declarations are pertaining to. I can only hope line numbers will also be included in the future.

{% twitter 1057749744032743425 %}

{% twitter 1062297806247997441 %}

#### Flexbox Inspector

![](https://cdn-images-1.medium.com/max/250/1*JxMjwYDjBQ7MLNRoeXPWWQ.png)<figcaption>Flexbox inspector view via Firefox DevTools.</figcaption>

If you’re using flexbox, chances are you’ve encountered a moment in time when things aren’t so clear, and that’s why this next feature (currently in Nightly as of this writing) has me excited.

{% twitter 1060917496734195715 %}

Do you have a need to understand how your flex items are laid out? With the new visualizer, it’s as simple as a quick glance to understand the why and how.

{% twitter 1048216264928362496 %}

#### Share your input

The Firefox DevTools cares deeply and wants your voice to be heard. Here’s a great article that asks for [**your input**](https://hacks.mozilla.org/2018/11/new-experimental-web-design-tools-feedback-requested) **.**

{% twitter 1032740771764436992 %}

Other ways to offer feedback or assistance can be done through the team’s active [slack channel](https://devtools-html-slack.herokuapp.com/) along with their [discourse](https://discourse.mozilla.org/c/devtools). There are plenty of folks, paid and volunteered, pouring their efforts, and love into the Firefox DevTools. If there are specific areas you’re having trouble with you can also tweet at [@FirefoxDevTools](https://twitter.com/FirefoxDevTools) or [get involved](https://firefox-dev.tools.).

### Parting thoughts

No matter what your choice is for a DevTool the facts are clear; any time a DevTool improves or desires to change for the good, we benefit as a community. With cross-browser testing so important it only makes sense to have a DevTool at our grasp that helps improve workflow and continue to make day-to-day tasks less strenuous allowing our focus to stay on track as to what really matters; debugging, inspecting, saving, and adjusting on the fly.

Here are some helpful links to other vendors so they can hear your voice as well:

- **Edge** : [https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide#feedback](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide#feedback)
- **Chrome** : [https://developers.google.com/web/tools/chrome-devtools/#community](https://developers.google.com/web/tools/chrome-devtools/#community)
- **Safari**  : [https://developer.apple.com/bug-reporting](https://developer.apple.com/bug-reporting/)
- **Opera**  : [https://developers.google.com/web/tools/chrome-devtools/#community](https://developers.google.com/web/tools/chrome-devtools/#community)

### **Links & Resources**

- [https://developer.mozilla.org/en-US/docs/Tools](https://developer.mozilla.org/en-US/docs/Tools)
- [https://developer.mozilla.org/en-US/docs/Tools/Tips](https://developer.mozilla.org/en-US/docs/Tools/Tips)
- [https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Examine\_and\_edit\_CSS](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS)
- [https://github.com/devtools-html/ux](https://github.com/devtools-html/ux)
- [https://twitter.com/FirefoxDevTools/status/974685361342484480](https://twitter.com/FirefoxDevTools/status/974685361342484480)
- [https://logrocket.com/blog/ultimate-web-design-tool](https://logrocket.com/blog/ultimate-web-design-tool)

### Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps

[![](https://cdn-images-1.medium.com/max/1024/1*s_rMyo6NbrAsP-XtvBaXFg.png)](https://logrocket.com/signup/)<figcaption><a href="https://logrocket.com/signup/">https://logrocket.com/signup/</a></figcaption>

[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

[Try it for free.](https://logrocket.com/signup/)

* * *