Firefox for Developers: The Lean, Fast Setup That Stays Out of Your Way

Programmers have a well-known preference for clean, focused environments. The same principles that make terminal emulators and code editors great apply to browsers.

Here's how to configure Firefox for a development workflow that stays out of your way.

Strip the UI to the Minimum

Right-click the Firefox toolbar → "Customize Toolbar." Remove:

• Home button (use Alt+Home if needed)
• Flexible spacers you didn't intentionally place
• The Pocket button
• The Firefox Account button (unless you actively use Sync)

Aim for: back/forward, address bar, a few essential extension icons, and nothing else. Every icon you don't need is visual noise you glance at hundreds of times per day.

Keyboard Shortcuts Worth Internalizing

Navigation:

• Ctrl+L — focus the address bar (faster than clicking)
• Ctrl+K — focus the search bar
• Ctrl+T — new tab
• Ctrl+W — close tab
• Ctrl+Shift+T — reopen last closed tab
• Ctrl+Tab — next tab (set to most-recently-used in settings)
• Ctrl+1 through Ctrl+8 — jump to tab by position
• Ctrl+9 — jump to the last tab

DevTools:

• F12 or Ctrl+Shift+I — open DevTools
• Ctrl+Shift+K — browser console
• Ctrl+Shift+C — Inspector with element picker
• Ctrl+Shift+E — Network panel
• Ctrl+Shift+S — screenshot tool

Page:

• Ctrl+U — view source
• F9 — Reader View (for documentation pages you need to read carefully)
• Ctrl+F — page search
• Ctrl+P — print (useful for PDFs of documentation)

DevTools for Daily Development

The Firefox DevTools are legitimately excellent. Specific features worth knowing:

CSS Grid Inspector — better than Chrome's. Shows grid lines with clear labeling. Enable it from the Inspector panel when inspecting a grid element.

Responsive Design Mode (Ctrl+Shift+M) — device simulation. Firefox ships with a comprehensive device preset list and lets you define custom viewport sizes.

Network Throttling — in the Network panel, you can simulate slow connections (3G, offline). Useful for testing loading states.

Storage Inspector — shows cookies, localStorage, IndexedDB, and Cache API entries side by side. The Cookies panel shows which container each cookie belongs to (relevant if you use Multi-Account Containers).

Performance Profiler — about:profiling or the Performance tab. Firefox's profiler produces shareable profiles via profiler.firefox.com — you can share a flame chart URL with a colleague without giving them access to your machine.

about:performance for Tab CPU Usage

about:performance shows CPU usage per tab and extension. If Firefox is running slow:

1. Open about:performance
2. Identify high-CPU tabs or extensions
3. Close or disable the offending items

This is much more precise than Task Manager, which shows Firefox's total CPU usage.

Local Development Setup

For localhost development: Firefox's handling of localhost is sometimes different from production. Specifically:

• http://localhost doesn't trigger HTTPS-Only Mode warnings (unlike http:// external sites)
• ETP tracking protection has fewer false positives on localhost
• CORS and CSP rules still apply to localhost — Firefox is strict about these

If you're testing a local API server, Firefox's CORS error messages in the console are more descriptive than Chrome's. They'll usually tell you exactly which header is missing or misconfigured.

Extensions for Developers

The minimal set worth having:

• uBlock Origin — network request filtering. The Network panel view in uBlock shows what's being blocked
• Multi-Account Containers — keep work and personal accounts separate
• Weather & Clock Dashboard — replace the default new tab with weather + world clocks, so you have ambient time zone awareness during development

The guiding principle: install extensions that add capabilities rather than extensions that modify content. Content-modifying extensions can interfere with testing and make debugging harder.