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
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.
Stu Robson on Twitter: “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 / Twitter”
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
Docs
Shape path editor
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.
Learn more →Jen Simmons on Twitter: “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 / Twitter”
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
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…
- Select the element (the actual image in this case) using the DOM inspector
- With the element selected via the DOM inspector, use the CSS Rules pane to find the elements shape value
- 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
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.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to use the React children prop with TypeScript
- Explore creating a custom mouse cursor with CSS
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
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.
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 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.
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).
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.
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:
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.
Gabriel on Twitter: “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 / Twitter”
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
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 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.
Jenna Hines on Twitter: “TIL @FirefoxDevTools underlines the font that is being used in your font stack. pic.twitter.com/IJxX82VlrZ / Twitter”
TIL @FirefoxDevTools underlines the font that is being used in your font stack. pic.twitter.com/IJxX82VlrZ
As of version 62 variable fonts are also supported thereby allowing you to inspect them live in the browser.
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.
https://twitter.com/beep/status/1052229783726247939
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.”
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.”
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.
Options such as viewing, creating, and importing an entire stylesheet is just a few facets at your disposal.
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.
Firefox DevTools on Twitter: “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 / Twitter”
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.
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!
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:
