Toolbox

The Toolbox provides a single home for most of the developer tools that are built into Firefox.

There are three main ways to open the Toolbox:

  • Right-click a mouse on any element in the page, and select Inspect from the popup menu.

  • Open the Hamburger menu {{ image1 }} and select More tools > Web Developer Tools.

  • Press Ctrl + Shift + I on Windows and Linux, or Cmd + Opt + I on OS X. See also keyboard shortcuts.

By default, the window appears docked to the bottom side of the Firefox window, but you can detach it if you like. This is what it looks like when it’s docked:

../../_images/toolbox.png

The window itself is split into two parts: a toolbar along the top, and a main pane underneath:

../../_images/toolbox-labelled.png

Note

You can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish.

Docking mode

By default, the Toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in toolbar.

../../_images/docking-mode.png

Toolbar

The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.

../../_images/toolbox-toolbar-labelled.png

Node picker

On the far left there’s a button to activate the node picker. This lets you select a page element for inspection. See Selecting elements

Toolbox-hosted tools

Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools: