Firefox Developer Tools Shortcuts

Opening Developer Tools (F12 or Ctrl+Shift+I on Windows/Linux, Cmd+Option+I on Mac) brings up the full DevTools panel, opening to whichever specific panel (Inspector, Console, Network, and so on) was last active in your previous session, rather than always resetting to a single default tab. Firefox's Inspector panel is specifically worth knowing about for its CSS Grid and Flexbox overlay tools, which visually highlight grid lines, gaps, and flex item boundaries directly on the rendered page when you select an element using either layout system — genuinely useful for debugging a layout that isn't behaving as expected without needing to mentally trace through CSS values in the styles panel alone. This is one of the areas Firefox's DevTools have maintained a real edge over Chrome's equivalent tooling for web developers who work with complex CSS layouts regularly. Toggling Responsive Design Mode (Ctrl+Shift+M on Windows/Linux, Cmd+Option+M on Mac) opens Firefox's device emulation toolbar, simulating a range of preset screen sizes and orientations for responsive testing — conceptually the same idea as Chrome's device toolbar, but worth noting the Mac shortcut specifically differs from Chrome's near-identical-looking Cmd+Shift+M, since Firefox substitutes Option where Chrome uses Shift in that particular modifier combination, a small but genuinely easy mix-up for anyone regularly switching between the two browsers' DevTools during cross-browser testing. Viewing page source (Ctrl+U / Cmd+U) opens the raw, unrendered HTML of the current page in a new tab — a fast way to check static markup, verify meta tags, or confirm what content actually shipped in the initial page load without needing to open the full DevTools panel just for that one check. Opening the Web Console directly (Ctrl+Shift+K on Windows/Linux, Cmd+Option+K on Mac) jumps straight to DevTools' Console panel specifically, rather than opening to whichever panel happened to be active last — useful when you already know you specifically need to check for logged errors or run a quick script in the console, skipping the extra step of navigating to that specific panel once DevTools has already opened elsewhere. Firefox's DevTools also include some distinct panels and tools without a direct one-to-one Chrome equivalent worth knowing exist even without a dedicated keyboard shortcut of their own — the Accessibility Inspector for auditing a page's accessibility tree, and a Fonts panel for inspecting exactly which fonts are actually being used and from where, both reached by clicking their respective tabs once DevTools is already open rather than via a separate keystroke. A genuinely practical workflow for anyone doing cross-browser testing regularly: keeping both Firefox's and Chrome's DevTools open side by side on the same page, using F12/Ctrl+Shift+I to quickly toggle each browser's own panel, catches layout and rendering differences between the two engines that testing in only one browser would miss entirely — particularly relevant for CSS Grid and Flexbox work specifically, given the two browsers' historically different quality of built-in inspection tooling for those layout systems. Worth understanding how DevTools panel state persists (or doesn't) across sessions: Firefox generally remembers which specific panel was last active and reopens to that same panel the next time you trigger F12, which is convenient for a workflow that mostly lives in one panel (the Console, for instance) but can be mildly disorienting if you expect DevTools to always default back to the Inspector and it instead opens wherever you left it last time — Ctrl+Shift+K's direct jump to the Console specifically exists in part to sidestep this uncertainty when you know exactly which panel you need regardless of where DevTools last left off. Firefox's Network panel, reached by clicking its tab once DevTools is open rather than a dedicated keyboard shortcut of its own, is worth a brief mention for anyone doing performance or API debugging work — it shows every request the page makes, with timing waterfalls and response inspection, conceptually similar to Chrome's Network panel but with some differences in exactly which columns and filters are surfaced by default, another small but genuine divergence worth knowing about if you regularly move between the two browsers' tooling for the same debugging task.