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
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.
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.
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…
- 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.
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.
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
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).
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.
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 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.
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.”
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.
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:
- 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
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.
In addition to the autocomplete functionality, hovering over any CSS variable name displays a tooltip showing what color value is stored.
Docs:
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.
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.
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.
Flexbox Inspector
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.
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.
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 .
Other ways to offer feedback or assistance can be done through the team’s active slack channel along with their discourse. 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 or get involved.
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
- Chrome : https://developers.google.com/web/tools/chrome-devtools/#community
- Safari : https://developer.apple.com/bug-reporting
- Opera : 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/Tips
- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
- https://github.com/devtools-html/ux
- https://twitter.com/FirefoxDevTools/status/974685361342484480
- https://logrocket.com/blog/ultimate-web-design-tool
Plug: LogRocket, 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.
Top comments (0)