Firefox DevTools Features Developers Often Miss
Firefox DevTools are as capable as Chrome's, and in a few areas they're better. Here are the features worth knowing about.
CSS Grid Inspector
Open DevTools → Inspector tab → click any element with display: grid
You'll see a grid overlay on the page showing column/row lines, areas, and gaps. Click the grid icon in the Rules panel next to any display: grid rule to toggle different overlay options.
This is more detailed than Chrome's grid inspector. You can see:
- Explicit vs implicit grid lines (different colors)
- Line numbers and area names
- Both column and row tracks simultaneously
For debugging grid layouts, this is the main reason to use Firefox DevTools specifically.
Flexbox Inspector
Same panel, for display: flex elements. Shows flex container properties and item sizes visually.
Click the flexbox icon in the Rules panel. The overlay shows the main axis direction, item sizes after flex grow/shrink, and gaps.
CSS Variables Autocomplete
In the Style Editor (Shift+F7), when you type var(, Firefox autocompletes from all defined CSS custom properties on the page. This includes custom properties defined in :root and in component scopes.
Useful for exploring what CSS variables a design system exposes, especially on sites you didn't build.
Network Tab: Blocked Requests
DevTools → Network → click the "Blocked" icon in the toolbar
Shows which requests were blocked and by what. Firefox's Enhanced Tracking Protection blocks some requests; uBlock Origin blocks others. When debugging a site that's broken for you but works in incognito, the blocked requests list usually shows what's missing.
JavaScript Debugger: Blackboxing
Debugger tab → right-click any source file → "Ignore source"
Blackboxed files are skipped by the debugger when stepping through code. Add React internals, vendor bundles, and test framework files to blackbox so you only step through your own code.
Chrome calls this "Ignore list" — same concept, different name.
Performance Profiler: Flame Chart
Firefox's performance profiler (devtools or profiler.firefox.com) uses a flame chart that shows call stacks over time. The profiler.firefox.com version is a standalone web app that profiles Firefox itself — useful for profiling heavy JavaScript.
The standalone profiler at profiler.firefox.com is particularly good for:
- Finding long tasks that block the main thread
- Identifying which functions are called most frequently
- Comparing before/after performance of changes
You can export profiles as JSON and share them with collaborators.
Responsive Design Mode
F5 or the phone icon in the toolbar opens Responsive Design Mode.
Features:
- Throttle network speed to simulate 3G/4G
- Simulate touch events
- Take screenshots at specific viewport sizes
- Set exact pixel dimensions with a text input (not just dragging)
The touch simulation is useful for testing mobile interactions on desktop.
Inspector: Computed Tab
Rules tab shows declared styles. Computed tab shows the final resolved value after inheritance and specificity.
The computed tab has a filter box — type any property name to see its resolved value immediately. Useful for debugging why an element isn't the color/size you expect.
about:debugging for Extensions
If you're building Firefox extensions:
about:debugging#/runtime/this-firefox loads unpacked extensions directly (no ZIP required). You can:
- Load a local extension folder during development
- Reload it after changes (Ctrl+Shift+R in the debugging page)
- See extension errors and logs in the browser console
Chrome equivalent: chrome://extensions with developer mode → load unpacked.
Managing Tabs During Development Sessions
For developers who work with many tabs (running server, docs, staging, local preview), Tab Manager & Session Saver saves the full tab set as a named session. Useful for switching between different project contexts without losing your dev setup.
Not a DevTools feature, but practically useful if you switch between multiple projects in the same browser.
Top comments (0)