We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

Use the Inspector to examine and modify the structure and layout of a page.

Opening the Inspector

There are several ways to open the Inspector:

  • choose the "Inspector" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac)
  • press Ctrl-Shift-C (Cmd-Option-C on the Mac OS X and Linux)
  • right-click an element on a web page and select "Inspect Element"

The Toolbox will appear at the bottom of the browser window, with the Inspector activated.

If you invoked the Inspector by clicking "Inspect Element", then the element will already be selected and the Inspector will look and behave as it does in "Selecting Elements" below.

Otherwise, as you move your mouse around the page, the element under your mouse is highlighted with a dotted border and an annotation displays its HTML tag. At the same time, its HTML definition is displayed, in context, in the Inspector's left-hand pane. From Firefox 30, grid lines for the element and its box model are also displayed:

Clicking on the element selects it: after you've selected an element, the Inspector will look and behave as it does in "Selecting Elements" below.

Selecting elements

When an element is selected, its markup is highlighted in the HTML pane on the left of the Inspector, and the CSS pane on the right of the Inspector shows its style information:

The way element selection works changed significantly in Firefox 29, and from Firefox 30 the Inspector shows the box model for elements in the page.

Before Firefox 29

Once you select an element by clicking on it in the page, the Inspector's display is locked on this element, so you can move the mouse around without the Inspector switching to a new element.

The annotation for the element gets a button on the left and a button on the right. The button on the left unlocks the element, enabling you to select a new element in the page. The button on the right displays a popup menu for the element.

Firefox 29

In Firefox 29 the dotted border around the element in the page, and the annotation for it, are no longer shown once an element has been selected. Also, the Inspector is no longer locked on the selected element: as you move the mouse around the markup in the HTML pane, the dotted border is shown around the corresponding element. To select a different element in the web page, click the "Select element" button, which now appears in the Toolbox toolbar:

Firefox 30 onwards

From Firefox 30, the selection behavior is the same as in Firefox 29, but the Inspector also shows the box model and grid lines for elements in the page:

Element popup menu

You can perform certain common tasks on a specific node using a popup menu. To activate this menu context-click the element in the HTML pane:

The menu gives you options to:

Copy image as data URL

Copy as Data URL is new in Firefox 29.

From Firefox 29 onwards, if the currently selected element is an image, then the popup menu includes an option to copy the image to the clipboard as a data URL:

Editing HTML

To edit an element's outerHTML, activate the element's popup menu and select "Edit As HTML". You'll see a text box in the HTML pane:

You can add any HTML in here: changing the element's tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.

HTML pane

The HTML pane shows you the page's HTML as a tree, whose nodes are collapsible. The start and end tags for the selected element are highlighted with a grey background.

You can edit the HTML - tags, attributes, and content - directly in this pane: click the element you want to edit, change it, and press Enter to see the changes reflected immediately.

Context-clicking an element displays a popup menu for working with that element.

HTML pane toolbar

Above this pane is a dedicated toolbar split into three sections:

From Firefox 29 onwards, the "Select element" button has moved to the Toolbox.

  • Select element: if you click this button, you can then select a different element by mousing around in the browser window.
  • HTML breadcrumbs: this shows the complete hierarchy through the document for the branch containing the selected element. If you click and hold on one of the elements in the bar, a popup menu appears that lets you select one of that element's siblings. Clicking the small arrow icons at the left and right ends of the bar will scroll the bar if it's wider than the available space.
  • Search tags: search the page for the tag you type. Pressing "Enter" finds the next occurrence.

CSS pane

The CSS pane shows information about the styles applied to the currently selected element. There are four separate views: "Rules", "Computed", "Fonts", and "Box Model". You can switch between them using the toolbar at the top of the pane:

Rules view

This view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:

The Rules view lists pseudo-elements, and the rules they apply.

Rule display

It displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.

Rules that are overridden by later rules are crossed out. If you mouse over a declaration, a checkbox appears next to it: you can use this to toggle the rule on or off.

At the top-right of each rule the source filename and line number is displayed as a link: clicking it opens the file in the Style Editor.

From Firefox 29 onwards, the Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the Style Editor settings, then the link will take you to the original source, not the generated CSS:

Read more about CSS source map support in the Style Editor documentation.

Color samples

From Firefox 27 onwards, you'll see a color sample appear next to color values:

Color picker

From Firefox 28 onwards, if you click the color sample, you'll see a color picker you can use to change the color. By default this will change hex values to RGB values.

background-image preview

You'll see a preview of images specified using background-image if you hover over the rule:

transform visualisation

This is new in Firefox 29.

From Firefox 29 onwards, if you hover over a transform property in the Rules view, you get a tooltip which visualises the transformation it performs:

font-family tooltip

This is new in Firefox 30.

From Firefox 30 onwards, if you hover over a font-family property in the Rules view, you get a tooltip with a sample of that font:

Editing rules

If you click on a declaration you can edit its property or value, and see the results immediately. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears under the declaration.

Any changes you make are temporary: reloading the page will restore the original styling.

Tip: You can use the arrow keys to increase/decrease numeric rules while editing. Up arrow will turn "1px" to 2px, and Shift+up/down will increment by 10. Alt+up/down change values by 0.1, and shift+Page up/down will add or subtract 100 from the value.

Computed view

This view organizes the style of the element by property. It lists all CSS properties which have been applied to this element in alphabetical order: it shows the calculated value that each CSS property has for for the selected element:

Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:

By default, it only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.

Fonts view

This shows all the fonts in use by the selected element. Note that it shows the font used on your system, which may be different than the fonts specified in the css:

The text in the font view is "Abc" by default but this is actually a text area and can be freely edited.

Box model view

This shows a graphical representation of the box model as it's applied to this element. From Firefox 30, while the mouse is in the box model view, grid lines and the box model for the element in the page are displayed:

Box model view detail

Before Firefox 30, the box model view looks like this:

  • At the top-left is the total space taken by the element on the page.
  • The outside numbers tell you the margin size on each side of the element.
  • The numbers in squares on the borders tell you how wide each side's border is.
  • The next layer in shows the padding size on each side of the element.
  • Finally, in the center, is the size of the element's content.

From Firefox 30, it's simplified:

  • The top-left still shows the size taken up by the element in the page (content + padding)
  • The center still shows the size of the content
  • the top-right shows the value of its position property
  • the individual values for padding, border, and margin are where you would expect

Using the Page Inspector with the Web Console

The element that's currently selected in the Page Inspector, if any, can be referenced in JavaScript in the Web Console using the variable $0.

Additionally, from Firefox 30, if you hover over that element in the Web Console output, it's highlighted on screen:

Developer API

Firefox addons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:


defined in inspector-panel.js. Attributes and functions:

  • .selection - information about the inspector's selection:
    • .isNode() - returns true if selection is node.
    • .node - returns the actual element from the page
    • .window - the window object of the frame the selection is in.
  • .markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.

Bindable events using on:


Called when the left panel has been refreshed, after page change.


Called on first markuploaded.


Called after toggle of a pseudoclass.


"low-priority change event for things like paint and resize."

Keyboard shortcuts

  Windows Mac OS X Linux
Open the Inspector Ctrl + Shift + C Cmd + Opt + C Ctrl + Shift + C

HTML pane

These shortcuts work while you're in the Inspector's HTML pane.

  Windows Mac OS X Linux
Delete the selected node Delete Delete Delete
Undo delete of a node Ctrl + Z Cmd + Z Ctrl + Z
Redo delete of a node Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Move to next node (expanded nodes only) Down arrow Down arrow Down arrow
Move to previous node Up arrow Up arrow Up arrow
Expand currently selected node Right arrow Right arrow Right arrow
Collapse currently selected node Right arrow Right arrow Right arrow
Step forward through the attributes of a node Tab Tab Tab
Step backward through the attributes of a node Shift + Tab Shift + Tab Shift + Tab
Start editing the selected attribute Enter Enter Enter
Hide/show the selected node H H H
Focus on the search box in the HTML pane Ctrl + F Cmd + F Cmd + F
Edit as HTML F2 F2 F2

CSS pane

These shortcuts work when you're in the Inspector's CSS pane.

  Windows Mac OS X Linux
Step forward through properties and values Tab Tab Tab
Step backwards through properties and values Shift + Tab Shift + Tab Shift + Tab
Increment selected value by one Up arrow Up arrow Up arrow
Decrement selected value by one Down arrow Down arrow Down arrow
Increment selected value by 10 Shift + Up arrow Shift + Up arrow Shift + Up arrow
Decrement selected value by 10 Shift + Down arrow Shift + Down arrow Shift + Down arrow
Increment selected value by 0.1 Alt + Up arrow Opt + Up arrow Alt + Up arrow
Decrement selected value by 0.1 Alt + Down arrow Opt + Down arrow Alt + Down arrow

Global shortcuts

These shortcuts work in all tools that are hosted in the toolbox.

  Windows Mac OS X Linux
Increase font size Ctrl + + Cmd + + Ctrl + +
Decrease font size Ctrl + - Cmd + - Ctrl + -
Reset font size Ctrl + 0 Cmd + 0 Ctrl + 0

Document Tags and Contributors

 Contributors to this page: Sheppy
 Last updated by: Sheppy,