Firefox's DOM Inspector (the Inspector tab in DevTools) is one of the most powerful tools for understanding and debugging web pages. While it looks similar to Chrome's Elements panel at first glance, it has several features that Chrome lacks — especially around CSS, animations, and accessibility. Here's a thorough guide.
Opening the Inspector
-
F12→ Inspector tab -
Ctrl+Shift+C→ opens Inspector in pick mode (click an element to inspect it) - Right-click any element → Inspect
The Inspector shows the HTML structure on the left and CSS rules on the right.
HTML Panel
Keyboard navigation: when the HTML panel is focused, arrow keys navigate the tree. Tab moves between the HTML and CSS panels.
Search: Ctrl+F inside the HTML panel opens a search bar that finds text, CSS selectors, XPath expressions, and attribute values.
Edit HTML inline: double-click any text, attribute, or tag name to edit it directly. Press Enter to apply. Useful for testing copy changes without editing the source.
Drag to reorder: drag elements within the HTML tree to reorder them. Firefox reorders the DOM live — you can see the visual effect immediately.
Expand all / subtree: right-click a node → "Expand all" expands the entire subtree. Useful for large components.
Copy: right-click any node to copy it as HTML, CSS selector, or XPath. The "CSS Selector" copy gives you the shortest unique selector for the element — useful for tests.
Pseudo-class toggle: right-click a node → "Use in Console" sends the element to $0 in the Console tab. The "Toggle Pseudo-Class" submenu lets you force :hover, :focus, :active, :visited, :focus-within, or :focus-visible states — without needing to hover or focus in real time.
CSS Rules Panel
Active rules: shows all CSS rules affecting the selected element, sorted by specificity. Overridden rules are struck through.
Filter: the search box at the top of the rules panel filters to show only rules with matching properties or values.
Inline editing: click any property value to edit it live. Press Tab to move to the next value, Shift+Tab to go back.
Color picker: click any color swatch to open a color picker. It shows the hex, HSL, and RGB representations and includes a contrast ratio check for the text-on-background combination.
Computed panel: the "Computed" view (next to "Rules") shows all final computed values. Filter helps narrow down — type padding to see all padding values. The arrows next to computed values expand to show which rule set them.
Animations: if the element has CSS animations or transitions, the Animations panel (accessible from Inspector) shows them on a timeline with play/pause controls.
Layout panel: shows the element's box model visually (margin, border, padding, content) with pixel measurements. Click any dimension to edit it.
Accessibility Panel
The Accessibility panel (Inspector → Accessibility tab) shows the accessibility tree — the structure screen readers see. For each element:
-
Role: the ARIA role (e.g.,
button,heading,listitem) -
Name: the accessible name (from
aria-label,<label>, text content, etc.) -
Properties:
aria-expanded,aria-checked, etc. - Contrast: color contrast ratio for text elements
The "Show Tabbing Order" button overlays the keyboard tab order on the page — numbered badges show which order Tab will focus elements. Invaluable for accessibility testing.
Check for issues: the Accessibility panel has a "Check for issues" feature that scans the current page and flags contrast failures, missing names, and keyboard focus issues.
Flexbox Inspector
When an element has display: flex, a "flex" badge appears in the HTML panel. Clicking it activates the Flexbox Inspector:
- Overlay: highlights the flex container and items with colored guidelines
- Properties inspector: shows current flex properties and lets you adjust them interactively
- Alignment visualization: shows justify-content and align-items effects visually
This is more visual than Chrome's flex inspector and includes an "Alignment Edge" option that shows exactly where align-start/end boundaries are.
Grid Inspector
display: grid elements get a "grid" badge. The Grid Inspector:
- Overlays grid lines on the page
- Shows grid area names (from
grid-template-areas) - Numbers the grid lines
- Highlights cells when you hover them in the inspector
Multiple grids on a page can have different overlay colors. Settings → Toggle in CSS rules to enable/disable each grid overlay independently.
Finding Event Listeners
Right-click any element → "Show Event Listeners" opens a panel showing all event listeners attached to that element. Expandable to see the handler source code, with a link to jump to it in the Debugger.
Or in the Rules panel, the ev badge on elements in the HTML tree indicates event listeners. Click it to see them.
Scrollable Overflow Indicator
Firefox's Inspector shows a "scroll" badge on elements with overflow scrolling. Click the badge to toggle a visual overlay showing the scrollable area and scroll position indicator.
Screenshot of Node
Right-click any node in the HTML panel → "Screenshot Node" — captures just that DOM element as a PNG at its actual rendered size. Better than a full-page screenshot when you only need one component.
Font Inspector
The "Fonts" tab in the Inspector shows every font being used on the selected element:
- Font family, weight, style, size
- Source file or system font
- Characters from the current font
- Font editor: sliders for variable font axes (weight, width, slant) if the font supports variable font features
Console Integration
$0 in the Console refers to the currently selected element in the Inspector. Type $0.style.background = 'red' to test style changes via console.
inspect(element) in the Console selects and scrolls to that element in the Inspector.
getEventListeners($0) isn't built into Firefox console but can be approximated by using the DOM's built-in EventTarget methods or the Event Listeners panel.
Inspector Keyboard Shortcuts
| Shortcut | Action |
|---|---|
H |
Toggle visibility: hidden on selected node |
Delete |
Delete selected node (press Esc to undo) |
Ctrl+C |
Copy selected node's outer HTML |
F2 |
Start editing HTML inline |
Ctrl+Z |
Undo last inspector change |
Top comments (0)