How to Inspect Element on Firefox?

To inspect an element in Firefox, right-click anywhere on the page and choose Inspect, or press F12 (also Ctrl + Shift + I on Windows and Linux, or Cmd + Option + I on Mac). This opens the Firefox DevTools with the Inspector tab selected. To go straight into pick-an-element mode, press Ctrl + Shift + C (Windows and Linux) or Cmd + Option + C (Mac). Once the Inspector is open, hover to highlight any node and click it to view and edit its HTML and CSS live.

What Inspecting an Element in Firefox Means

Inspecting an element opens the Firefox DevTools Page Inspector, which exposes the live DOM and the styles applied to it. Unlike viewing page source, which shows the raw HTML the server sent, the Inspector shows the current, rendered DOM after JavaScript has run, so it reflects exactly what the browser is displaying right now.

The Firefox Inspector is split into the HTML pane on the left and several style panels on the right, including Rules, Computed, and Layout. You can edit markup and CSS in place to debug spacing, colors, fonts, and responsiveness without touching your source files. Edits are temporary and disappear on reload, which makes the Inspector a safe place to experiment.

Method 1 - Right-Click and Select Inspect

This is the fastest way to jump directly to a specific element on the page.

• Open the web page you want to inspect in Firefox.
• Right-click the element you care about, such as a button, heading, or image.
• Select Inspect from the context menu. Older Firefox builds label this Inspect Element.
• The DevTools open with the Inspector tab active and the element you clicked already selected in the HTML pane.

Method 2 - Open With a Keyboard Shortcut

Shortcuts are the quickest route when your hands are already on the keyboard:

• F12: Toggles the DevTools open and closed, opening on the last panel you used.
• Ctrl + Shift + I (Windows and Linux): Opens the DevTools with the Inspector tab. On Mac, use Cmd + Option + I.
• Ctrl + Shift + C (Windows and Linux): Opens the DevTools directly in element-picker mode so your next click on the page selects that node. On Mac, use Cmd + Option + C.

The picker (Ctrl + Shift + C) is handy when you want to choose an element visually instead of right-clicking it, and it works even on hover-only menus if you freeze them first.

Method 3 - Open From the Firefox Menu

Use this route when you prefer the mouse or when a right-click is intercepted by the page.

• Click the ≡ hamburger menu in the top-right corner of Firefox.
• Choose More Tools.
• Click Web Developer Tools to open the DevTools.
• Select the Inspector tab if another panel opens first.

Firefox Inspector Keyboard Shortcuts

These are the shortcuts you will reach for most while inspecting elements in Firefox.

Using the Firefox Inspector

Once the Inspector is open, the real work begins. Here is what each part does and how to use it.

• HTML pane: Browse the live DOM tree, expand nodes, and hover to highlight the matching element on the page. Click any node to select it for editing.
• Edit HTML: Double-click a node, or right-click it and choose Edit As HTML, to rewrite markup. You can also drag nodes to reorder them or press Delete to remove one.
• Rules panel: Shows the CSS declarations applied to the selected element and where each comes from. Click a value to edit it, toggle a declaration with its checkbox, or use Add new rule to create one.
• Computed panel: Lists the final resolved value of every property after the cascade, which is the best place to find out why an element looks the way it does.
• Layout panel: Displays the box model and offers Flexbox and Grid overlays so you can visualize spacing, padding, and alignment directly on the page.
• Color picker: Click the swatch next to any color value in Rules to open the picker and eyedropper, then sample any pixel on screen.
• Responsive Design Mode: Press Ctrl + Shift + M (Cmd + Option + M on Mac) to test the page at different device sizes, pixel ratios, and network speeds while the Inspector stays open.

Inspect a Page on Firefox for Android

Firefox lets you inspect a page that is running on a real Android device using remote debugging over USB. This is useful when a layout breaks only on mobile.

• On the Android phone, enable Developer options and turn on USB debugging.
• In Firefox for Android, open Settings and enable Remote debugging via USB.
• Connect the phone to your computer with a USB cable and accept the authorization prompt on the device.
• In desktop Firefox, type about:debugging in the address bar and open the page.
• Select the connected device, then click Inspect next to the tab you want to debug to open DevTools against the mobile page.

When you need to confirm a fix across many Firefox versions and operating systems without keeping local installs, you can open Firefox on real browsers and devices in the cloud and inspect elements live with Live Interactive Cross Browser Testing, which runs the same DevTools-style inspection from your browser.

Frequently Asked Questions

What is the keyboard shortcut to inspect an element in Firefox?

Press F12 or Ctrl + Shift + I on Windows and Linux, or Cmd + Option + I on Mac, to open the DevTools with the Inspector tab active. To jump straight into element-picker mode, use Ctrl + Shift + C on Windows and Linux or Cmd + Option + C on Mac.

Why can't I see the Inspect option when I right-click in Firefox?

Developer tools may be disabled by an enterprise policy, or you right-clicked an element that shows its own context menu, such as an embedded player or a custom JavaScript menu. Open the Inspector from the hamburger menu under More Tools and then Web Developer Tools, or simply press F12 instead.

How do I edit HTML and CSS in the Firefox Inspector?

Select a node in the HTML pane, then double-click it or right-click and choose Edit As HTML to change the markup. To change styles, click any value in the Rules panel and type a new one, toggle a declaration with its checkbox, or use Add new rule. Changes apply live and reset when you reload the page.

What is the difference between the Rules, Computed, and Layout panels?

Rules shows the editable CSS declarations that apply to the selected element and where each one comes from. Computed shows the final resolved value of every property after the cascade. Layout shows the box model plus Flexbox and Grid overlays so you can see spacing and alignment visually.

How do I inspect a page in Firefox for Android?

Enable USB debugging on the Android device and Remote debugging via USB in Firefox for Android, connect the phone over USB, then open about:debugging in desktop Firefox, select the connected device, and click Inspect next to the tab you want to debug.

How do I check responsiveness while inspecting in Firefox?

Open Responsive Design Mode with Ctrl + Shift + M on Windows and Linux or Cmd + Option + M on Mac. It lets you switch device sizes, change the device pixel ratio, throttle the network, and simulate touch while the Inspector stays open for editing.

• How to Open Inspect Element on Chrome?
• How to Open Chrome Developer Tools?
• How to Inspect Elements on Discord?