Unlock the Power of Firefox DevTools for CSS Authors
Page Inspector: A Triple Pane Powerhouse
With Firefox’s newly added 3-pane inspector, you can inspect and modify HTML and CSS with ease. The third pane provides valuable insight into layout properties, such as:
- box-sizing
- position
- display
This feature makes your CSS workflow more efficient.
Shape Path Editor: Create Complex Shapes with Ease
Firefox’s Shape Path Editor allows you to edit and inspect shape paths directly from the DevTools. Create complex shapes like:
- circles
- rectangles
- polygons
and manipulate them with ease.
/* Example CSS for creating a circle shape */
clip-path: circle(50% at 50% 50%);
Filters: Visual Effects Made Easy
Firefox’s filter editor gives you the power to create and adjust visual effects like:
- blur
- saturate
- sepia
With a simple click, you can add, remove, and adjust filters to achieve the desired result.
/* Example CSS for applying a blur filter */
filter: blur(5px);
Animations: Bring Your Interface to Life
The animations view provides full details of animations applied to your elements, along with controllers and a timeline to handle playback. You can even control animations applied to pseudo-elements like:
- ::before
- ::after
/* Example CSS for creating an animation */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Grid: Inspect and Customize with Ease
Firefox was one of the first browsers to offer powerful tooling for inspecting elements using Grid. With the ability to display:
- line numbers
- area names
- extended lines
you can customize your grid inspection system to fit your needs.
/* Example CSS for creating a grid layout */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
Fonts: Typography Made Easy
The Fonts tab grants developers the ability to inspect, view, and manipulate fonts applied to their page. With additional controls for variable fonts, you can adjust axes individually or select defined instances.
/* Example CSS for applying a font */
font-family: 'Open Sans', sans-serif;
Screenshots: Document Your Work Visually
Firefox provides clever ways to document your work visually, including:
- full page screenshots
- partial page regions
- individual nodes
You can even capture screenshots using the DevTools menu bar or the browser bar.
Style Editor: Inspect and Edit Stylesheets
The Style Editor allows you to view, create, and import entire stylesheets. With the ability to import custom stylesheets or create new ones, you can solve problems more efficiently.
/* Example CSS for creating a new stylesheet */
body {
background-color: #f2f2f2;
}
Responsive Design Mode: Test and Refine
Firefox’s Responsive Design Mode provides powerful tooling to inspect a site’s responsive aspects. Choose from various:
- devices
- pixel ratios
- user-agents
- custom screen sizes
- orientation
- network throttling
to test and refine your design.
Transforms: Visualize and Understand
With Firefox DevTools, you can visualize transforms without guessing. Hover over any transform property to see the transform as an overlay on your page.
/* Example CSS for applying a transform */
transform: rotate(45deg);
Working with Preprocessors: Seamless Integration
Firefox DevTools allows you to work seamlessly with preprocessors like Sass or LESS. Select “Show original sources” in the Style Editor settings to link to the original sources in the Style Editor.
// Example SCSS code
$primary-color: #333;
body {
background-color: $primary-color;
}
The Future of Firefox DevTools
The Firefox DevTools team is committed to continuous improvement, with exciting features like:
- CSS change-tracking
- flexbox inspector
- and more
on the horizon. Share your input and help shape the future of Firefox DevTools.
Join the Conversation
Want to make your voice heard? Join the Firefox DevTools community, tweet at @FirefoxDevTools, or get involved in their active Slack channel and discourse. With your input, we can create a better DevTool for everyone.