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.

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.

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.

Page inspector

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 .

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.

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.

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.

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.

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

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.

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

I’m proud to show you the next in series of design tools – the Firefox Shape Path Editor. Take a look: https://t.co/7dXaycRI5P pic.twitter.com/80F4ptdatH

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.

I am _loving_ this triple pane view in @FirefoxNightly’s developer tools …when we get multi-select of grid layout on a page it’ll be even more useful.Great @FirefoxDevTools work going on right now. pic.twitter.com/o2jRImBIBK

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.

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.

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.

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.

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

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.

No Title You will be able to highlight multiple grid starting tomorrow in @FirefoxDevTools (will ship in 64). The current limit is set to 3 for performance reasons, however, you can always bump that up in about:config under the devtools.gridinspector.maxHighlighters pref 🥳 pic.twitter.com/PJfNgWyAW0

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 .

No Title TIL @FirefoxDevTools underlines the font that is being used in your font stack. pic.twitter.com/IJxX82VlrZ

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.

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.

No Title i am deeply smitten with the new fonts panel in firefox, yes that’s right i am deeply smit pic.twitter.com/04MDQFWCRk

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.

No Title Do you use the Style Editor panel in Firefox DevTools? And if so what problems are you trying to solve with it?We would love your input in this 3-questions survey: https://t.co/YiPwHEayWGThanks! pic.twitter.com/DOjQJs6l8e

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: