How to Open Firefox Browser Toolbox to Inspect the UI

This article provides a step-by-step guide on how to enable and open the Browser Toolbox in Mozilla Firefox. Unlike the standard Web Developer Tools used for inspecting regular websites, the Browser Toolbox allows users to inspect and modify the DOM elements and CSS classes of the Firefox user interface itself. Below, you will learn how to enable the required developer settings, launch the toolbox, and begin inspecting the browser's interface.

Step 1: Enable the Browser Toolbox

By default, the Browser Toolbox is disabled for security reasons. You must enable two specific settings in the standard Developer Tools before you can access it.

  1. Open Firefox and launch the standard Web Developer Tools by pressing F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on macOS).
  2. Open the Developer Tools Settings by pressing F1, or by clicking the three-dot menu icon in the top-right corner of the Developer Tools pane and selecting Settings.
  3. Scroll down to the Advanced settings section on the bottom right.
  4. Check the box next to Enable browser chrome and add-on debugging toolboxes.
  5. Check the box next to Enable remote debugging.
  6. Close the standard Developer Tools pane.

Step 2: Open the Browser Toolbox

Once the settings are enabled, you can launch the Browser Toolbox using a keyboard shortcut or the application menu.

Using the Keyboard Shortcut:

  • Windows and Linux: Press Ctrl + Alt + Shift + I
  • macOS: Press Cmd + Option + Shift + I

Using the Firefox Menu:

  1. Click the Application Menu (the three horizontal lines) in the top-right corner of the browser.
  2. Select More tools.
  3. Click Browser Toolbox.

Step 3: Approve the Connection and Inspect Elements

  1. When the Browser Toolbox launches, a separate window will pop up with an "Incoming Connection" prompt.
  2. Click OK to allow the connection.
  3. The Browser Toolbox window will now load the DOM and styles of the Firefox interface.
  4. Click the Inspect Element icon (a cursor inside a box) in the top-left corner of the Browser Toolbox window.
  5. Hover your mouse over any part of the main Firefox window—such as the address bar, tabs, or bookmark toolbar—and click it.

The Browser Toolbox will immediately highlight the corresponding DOM node in the Inspector tab and display its associated CSS classes and rules in the Rules pane, allowing you to view and test changes to the Firefox UI in real time.