The three quickest ways to open dev tools in Firefox are right-clicking and selecting "Inspect," using a keyboard shortcut, or navigating through the Firefox menu. These methods give you instant access to the built-in Firefox Developer Tools for inspecting and debugging web pages.
Right-click and inspect an element
For the most intuitive method, simply right-click any part of a webpage, a heading, an image, a button, or even empty space, and choose "Inspect" from the context menu. This opens the Developer Tools panel with the HTML code of the exact element you clicked already highlighted in the Inspector tab. It’s the fastest way to jump straight to the markup that matters to you, whether you’re checking a layout issue, verifying a CSS rule, or identifying the structure of a component.
Use a keyboard shortcut
If you prefer speed above all, keyboard shortcuts are the way to go. On Windows or Linux, press Ctrl + Shift + I or F12 to toggle the Developer Tools open or closed. On macOS, use Cmd + Opt + I. For the element inspector specifically, the tool that lets you hover over any part of the page and see its code, press Ctrl + Shift + C on Windows/Linux or Cmd + Opt + C on macOS. These shortcuts work instantly, no matter where you are on the page, and they’re the most efficient way to start debugging without lifting your hands from the keyboard.
Open through the Firefox menu
If you prefer a visual, menu-driven approach, click the hamburger menu (☰) in the top-right corner of Firefox. From there, go to More tools and select Web Developer Tools. This opens the same full Developer Tools panel. Alternatively, if you have the classic menu bar enabled (via Alt or F10), you can go to Tools > Web Developer > Web Developer Tools. Both menu paths lead to the identical set of tools, so choose whichever feels more natural to your workflow.
What you can do with dev tools
Once the Developer Tools are open, you’ll see a set of panels that let you examine, edit, and debug HTML, CSS, and JavaScript on the live page. The Inspector shows the page’s full DOM structure, and you can click any element to view its styles, edit CSS values in real time, or add new attributes. The Console lets you run JavaScript commands, log messages, and see errors or warnings as they happen. The Debugger provides a full JavaScript debugging environment where you can set breakpoints, step through code, and inspect variables. The Network panel records every request the page makes, showing timing, headers, and responses, useful for diagnosing slow loading or failed resources. These tools work together to give you a complete picture of how a page is built and behaves. Note that the old Scratchpad tool, which was a separate environment for experimenting with JavaScript, was removed in Firefox 72; the Console now serves that purpose directly.
