Dennis Gaebel Design Technologist & Author that loves Open Source, CSS Architecture, SVG, Typography, Motion, Interaction, and Pattern-Based Design.

Firefox DevTools for CSS authors

8 min read 2344


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

Page inspector

The 3 pane DevTools page inspector from Firefox

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.

Docs

Shape path editor

Image courtesy of MDN docs.

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.

Jen Simmons announcement of the shape-path editor

You can watch Jen’s full video here and use the demo below to see it working in action first hand:

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

Shape Path outline via Firefox DevTools. Image Courtesy of MDN Docs

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

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.

CSS filters viewed from the Firefox DevTools. Photo courtesy of MDN

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.

CSS filter editor provided by Firefox DevTools. Image courtesy of MDN

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.

Saving a CSS filter from Firefox 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

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 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.

Animation tab of Firefox DevTools

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).

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

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.

Firefox DevTools Grid inspector

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:

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.

Highlight multiple grid regions in Firefox 64

Docs

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.

The Firefox DevTools Fonts tab

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.

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.

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 for further investigation.

Controls displayed for adjusting a Variable Font

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.

Docs:

Screenshots

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.”

Screenshot behavior options provided via DevTools settings

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.”

Firefox URL bar’s page actions menu

Screenshot option provided under page actions in Firefox’s URL bar

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.

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…

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

Eric Meyer also wrote a great post about the additional flags you can pass to the screenshot command in the console that I highly suggest reading.

Docs:

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.

Firefox DevTool Style Editor. Image courtesy of MDN docs

Options such as viewing, creating, and importing an entire stylesheet is just a few facets at your disposal.

Media Links triggered from Style Editor sidebar. Video courtesy of MDN Docs.

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.

Docs:

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.

Responsive Design Mode in Firefox DevTools. Image courtesy of MDN docs.

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:

Transforms

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

Transform visualization in Firefox DevTools. Image courtesy of MDN Docs.

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

Docs:

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.

Select “Show original sources” in the Style Editor settings. The link displayed next to CSS rules in the 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:

Plug: , a DVR for web apps

LogRocket 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.

.

Dennis Gaebel Design Technologist & Author that loves Open Source, CSS Architecture, SVG, Typography, Motion, Interaction, and Pattern-Based Design.

Leave a Reply