Animate with an artist-friendly interface

Modify keyframes, edit timing precisely with cubic beziers, inspect the synchronized list of animations and transitions, scrub along the timeline, and more.

Beziers

devtools_bez-nar.original.png

Adjust timing functions

Keyframes

devtools_keyf-nar.original.png

Edit keyframes

Sync

devtools_animtrans-nar.original.png

Inspect animations

Scrub

devtools_animscrub-nar.original.png

Learn to use the animation DevTools

Learn about CSS animation on MDN

Precisely control your colors

With an experience more like your favorite graphics tool than a IDE, you can quickly

  • Match - Copy any color on the web with the eyedropper tool.
  • Inspect and adjust - Click the sample swatches for a CSS color rule or property to make adjustments in the color picker.
  • Recolor with filters - In the filter menu, add, remove, and stack color filter effects like saturation, brightness, hue and more

Match, adjust, select

devtools_clr-nar_LA9L33l.original.png

Learn to use DevTools' color features

Polish with post-processing effects

The filter menu makes it easy to adjust more than colors. Apply opacity, blur, drop shadow, or even point at a URL to use an effect saved in another file.

Filters

devtools_filter-nar.original.png

Learn to use DevTools' filtering features

Experiment with colors, filters and animations in the DevTools Challenger

Quickly lock in your layout

Want to get started using CSS grid for layout, but having a hard time visualizing how?

With the Grid Inspector, compose and adjust your two-dimensional layouts with ease. Understand flexbox layouts more effectively with the Flexbox Inspector, as well.

Missing the ruler from your favorite layout tool? Now you can measure the distances between elements for precise alignment.

Flexbox Inspector

devtools_flexbox-nar.original.png

Learn to use the Flexbox Inspector

Learn about Flexbox on MDN

Grid Inspector

devtools_gridinsp-nar.original.png

Learn to use the Grid Inspector

Learn about CSS Grid on MDN

Measuring tool

devtools_measure-nar.original.png

Learn to use the measurement tool

Integrate images elegantly

Used to print layout tools, and missing the ability to precisely adjust text wrapping around images? Firefox DevTools is here to help with the Shape Path Editor

Shape Path Editor

devtools_shape-nar.original.png

Learn to use the Shape Path Editor

Learn about CSS Shapes on MDN

Style fonts and typography with ease

Find out what header font they're using on your favorite website, or inspect all the fonts on the page. Adjust your fonts' size, line height, spacing weight, and emphasis. Can't decide which font to use? Preview text in multiple fonts simultaneously. And if you're using a variable font, adjust its properties exactly to your specifications in the same editor. DevTools even gives you the ability to adjust font values in a unit that makes sense to you, just like your favorite layout tools.

Font tools

devtools_font-nar.original.png

Learn to use the font tools

Learn about CSS font properties on MDN

Adapt seamlessly to different screens (and network speeds)

Want to adapt your content for phones, tablets, and even smartwatches? With Responsive Design Mode, easily create flexible, attractive layouts friendly to a variety of screen sizes and resolutions. Live preview how your content will appear on a variety of devices and edit it in realtime. Even create your own device parameters for testing, and simulate the effects of network throttling.

Responsive Design Mode

devtools_rdm-nar.original.png

Learn to use Responsive Design Mode

Learn about responsive design on MDN

Avoid compatibility headaches

Beyond screen resolution, different devices and browsers don't support the same features or have the same defaults. Access up-to-date compatibility data as you develop, based on the MDN BCD.

Compatibility menu

devtools_compat-nar.original.png

Learn about the MDN BCD

Debug faster

Broke your layout, and not sure when and what you changed? Wondering why your fixes aren't working?

Debugging is easier with track changes and inactive CSS tips.

Want to take a screenshot with one click? You can do that too.

Inactive CSS Tips

devtools_inac-nar.original.png

Track Changes

devtools_trackch-nar.original.png

Learn how to work with CSS in the Firefox DevTools

Learn to take a one-click browser screenshot