Firefox DevTools' CSS Inspector is one of its strongest features. The interface for viewing, editing, and understanding styles is more powerful than it looks. Here's a practical guide.
The Inspector Basics
Ctrl+Shift+I → Inspector tab (or right-click an element → Inspect).
The layout:
- Left: DOM tree (the HTML structure)
- Right: CSS Rules panel (styles applied to selected element), Computed panel (final values), and Layout panel (box model, grid, flexbox)
CSS Rules Panel — What to Actually Use
Inline editing
Click any CSS value to edit it inline. Type a new value and press Enter — the page updates in real time. Press Escape to revert.
For properties that accept keyword values (display, position, etc.), typing reveals autocomplete suggestions.
Adding new properties
Click the empty space at the end of a rule, or click the + button to add a new property to an existing selector. Changes are instant.
Overriding values
Crossed-out properties (strikethrough) are overridden. Click the property to see which rule overrides it (the cascade in action). Hover over a property to see a tooltip showing which file and line set it.
Toggling properties
Click the checkbox next to any property to disable it temporarily. Useful for debugging: disable properties one by one to isolate which causes the issue.
Following the source
Each rule shows filename:lineNumber. Clicking this opens the Debugger to that exact location in the CSS file. Essential for finding where styles are actually defined in large codebases.
The Computed Panel
The Computed panel shows the final, resolved value for every CSS property after cascade, inheritance, and custom property resolution.
Why this matters: A property might be 1rem in the source but 16px computed. A custom property might be var(--primary) in source but #3498db computed.
Filter by property name: Type in the filter box to find specific computed properties quickly.
Box model visualization: At the top of the Computed panel, the box model diagram shows the actual pixel values for:
- Content width/height
- Padding (all four sides)
- Border (all four sides)
- Margin (all four sides)
Click any value in the box model to highlight that area in the page.
The Layout Panel
Switch to the Layout tab in the right panel for grid and flexbox tools.
CSS Grid Inspector
Firefox's grid inspector is genuinely excellent for debugging grid layouts:
- Select a grid container element
- In the Layout panel, click the overlay toggle next to the element
- A colored overlay appears on the page showing grid lines, cells, and gaps
Options in the grid overlay controls:
- Display line numbers (column 1, 2, 3... row 1, 2, 3...)
- Display named grid areas
- Extend grid lines beyond the container
Multiple grids can be overlaid simultaneously with different colors — useful when grids are nested.
Practical use: You can see exactly which cells are occupied and where items are placed without guessing at the grid definition.
Flexbox Inspector
For flex containers:
- The Layout panel shows the flexbox overlay toggle
- Colored overlay visualizes the main axis, cross axis, and flex items
- Shows flex-grow/shrink proportions visually
Flex item information: Click on a flex item and the Layout panel shows its computed flex basis, grow factor, and actual size.
Fonts Panel
Fonts tab (in the right sidebar section):
- Shows all fonts used on the selected element
- Which CSS rules applied each font
- Rendered text sample
- Variable font axis controls (if the font supports variable fonts)
For diagnosing "why is this using Times New Roman": the Fonts panel immediately shows whether the web font failed to load and fell back to the system serif.
Changes Tracking
DevTools → Changes panel (might need to enable in the … menu).
The Changes panel tracks all CSS changes you've made in this session. When you've been editing CSS experimentally, the Changes panel shows:
- Exactly which properties changed
- Before and after values
- File and line references
Copy the changes to apply them to your actual CSS files. This workflow — edit in DevTools, copy changes, apply to source — is faster than edit-save-reload cycles for style work.
Animations Panel
Right-click the Inspector → "Show Animation Inspector" or use the Animations tab.
The Animation inspector shows:
- Running/paused CSS animations and transitions
- Timeline for each animation
- Duration, delay, fill mode
- Easing curve visualization
You can pause/resume animations and scrub the timeline, which is invaluable for debugging animation states.
Accessibility Panel
Inspector → Accessibility tab.
Shows the accessibility tree for the page:
- How screen readers interpret the DOM
- ARIA roles and properties
- Contrast ratio calculator for text
- "Check for issues" to flag accessibility problems
For text: click a text element → Accessibility tab → Contrast ratio shows the actual ratio and whether it passes WCAG AA/AAA.
The Filter Bar
The Inspector's filter/search:
-
Ctrl+Fin the Inspector panel opens search - Search by element type, class, ID, attribute
- Highlights matching elements in the DOM tree and on the page
Color Picker
Click any color value in the CSS rules — a color picker appears.
- HEX, RGB, HSL, HWB modes
- Eyedropper tool to pick any color from the page
- Swatch of similar colors from the stylesheet
The eyedropper tool captures colors from anywhere on screen, including outside the browser window.
Selector Specificity
Hover over a CSS selector in the Rules panel:
- A tooltip shows the specificity (e.g.,
0,1,1for.class element) - Higher specificity wins when properties conflict
- Understanding this is essential for avoiding the
!importanttrap
Firefox DevTools' CSS tools reward spending a few hours learning them — the payoff in debugging speed is significant for anyone doing regular web development work.
Top comments (0)