Examinar e editar HTML

Pode examinar e editar as páginas HTML no Painel HTML.

Navegar no HTML

"Breadcrumbs" de HTML

At the bottom on the HTML pane is a breadcrumbs toolbar. 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.

Hovering over a breadcrumb highlights that element in the page.

A barra de breadcrumbs tem os seus próprios atalhos de teclado.

Note that before Firefox 48, the breadcrumbs toolbar was at the top of the markup pane.

Pesquisar

Starting in Firefox 45, the Page Inspector's search box matches all markup in the current document and in any frames.

To start searching the markup, click in the search box to expand it or press Ctrl + F , or Cmd + F on a Mac.

As you type, an autocomplete popup shows any class or ID attributes that match the current search term:

Press Up and Down to cycle through suggestions, Tab to choose the current suggestion, then Enter to select the first node with that attribute.

If you just enter the search term without selecting an autocomplete value, then the search term will be applied to the full text of the document, including all attribute names and values and the text content of nodes.

To cycle through matches, press Enter . From Firefox 48 onwards you can cycle backwards through matches using Shift + Enter .

Árvore HTML

The rest of the pane shows you the page's HTML as a tree (this UI is also called the Markup View). Just to the left of each node is an arrow: click the arrow to expand the node. If you hold the Alt key while clicking the arrow, it expands the node and all the nodes underneath it.

Moving the mouse over a node in the tree highlights that element in the page.

Nodes that are hidden using display:none are shown faded (as are nodes that aren't rendered like <head> for example).

::antes e ::depois

A partir do Firefox 35, pode inspecionar pseudoelementos adicionados, utilizando ::antes e ::depois:

Menu de contexto da janela de Elemento

You can perform certain common tasks on a specific node using a popup context menu. To activate this menu, context-click the element. The menu contains the following items — click on the links to find the description of each command in the Context menu reference:

Edit As HTML
Create New Node
Duplicate Node
Delete Node
Atributos
- Add Attribute
- Edit Attribute
- Remove Attribute
:hover
:active
:focus
Copiar
- Inner HTML
- Outer HTML
- CSS Selector
- Image Data-URL
Colar
- Inner HTML
- Outer HTML
- Before
- After
- As First Child
- As Last Child
Expand All
Collapse
Scroll Into View
Screenshot Node
Use in Console
Show DOM Properties
Open Link in New Tab *
Open File in Debugger *
Open File in Style-Editor *
Copy Link Address *

* These options only appear in certain contexts, for example the "Open File in Style-Editor" option only appears when you context-click over the top of a link to a CSS file.

Referência de menu de contexto

Note: The context menu was significantly reorganised from Firefox 49 onwards, to make it more compact. Don't worry if your menu structure differs slightly to that shown above — the same options will still be available.

Editar como HTML	Editar os elementos HTML.
(Copiar) Inner HTML	Copy the inner HTML for the element.
(Copiar) Outer HTML	Copy the outer HTML for the element. Pressing `Ctrl` + `C` (or `Cmd` + `C` on a Mac) also performs this action.
Copiar Seletor Único/Selector CSS	Copy a CSS selector that uniquely selects the element.
Copiar Dados de Imagem-URL	Copy image as a data:// URL, if the selected element is an image.
Mostrar Propriedades de DOM	Open the split console and enter the console command "`inspect($0)`" to inspect the currently selected element.
Utilizar na Consola	New in Firefox 43 Assigns the currently selected node to a variable named `temp0` (or `temp1` if `temp0` is already taken, and so on), then opens the split console, enabling you to interact with that node using the console's command line.
Expandir Tudo	New in Firefox 44 In the tree view, expand the current element and all the elements underneath it. This is equivalent to holding the `Alt` key and clicking the disclosure triangle next to an element.
Ocultar	New in Firefox 44 In the tree view, collapse the current element. This is equivalent to clicking the disclosure arrow next to an element that's expanded.
(Colar) Inner HTML	Paste the clipboard contents into the node as its innerHTML.
(Colar) Outer HTML	Paste the clipboard contents into the node as its outerHTML.
(Colar) Antes	Paste the clipboard contents into the document immediately before this node.
(Colar) Depois	Paste the clipboard contents into the document immediately after this node.
(Colar) As First Child	Paste the clipboard contents into the document as the first child of this node.
(Colar) As Last Child	Paste the clipboard contents into the document as the last child of this node.
Deslizar para Ver	Scrolls the web page so the selected node is visible. From Firefox 44, pressing the keyboard shortcut `S` will also scroll the selected node into view.
Nodo de Captura de Ecrã	Takes a screenshot of the selected node, saved to your Downloads directory.
Criar Novo Nodo	Create a new empty <div> as the last child of the currently selected element. See Inserting new nodes.
Duplicar Nodo	New in Firefox 44 Create a copy of this element, and insert the copy immediately after this element.
Eliminar Nodo	Delete the element from the DOM.
Atributo/Adicionar Atributo	New in Firefox 44 Add an attribute to the element.
Atributo/Editar Atributo	New in Firefox 44 (only when invoked on an attribute) Edit the attribute.
Atributo/Remover Atributo	New in Firefox 44 (only when invoked on an attribute) Remove the attribute.
Open Link in New Tab	(only when invoked over a link, such as an href attribute) Opens the linked item in a new tab.
Open File in Debugger	(only when invoked over a link to a JS source) Opens the linked source in the Debugger.
Open File in Style-Editor	(only when invoked over a link to a CSS source) Opens the linked source in the Style Editor.
Copy Link Address	(only when invoked over a URL) Copy the URL.
:hover	Set the :hover CSS pseudo-class.
:active	Set the :active CSS pseudo-class.
:focus	Set the :focus CSS pseudo-class.

Editar HTML

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

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.

Copiar e colar

You can use the popup menu to copy nodes in the HTML tree and paste them into the desired location.

Arrastar e largar

You can edit HTML by moving nodes in the HTML tree. Just click and hold on any element and drag it up or down in the tree. When you release the mouse button, the element will be inserted at the corresponding position:

Starting in Firefox 44, you can cancel the drag and drop by pressing the Esc key.

Inserir novos nodos

New in Firefox 48

Starting in Firefox 48, there's a "+" icon at the top of the markup view:

Click this icon to insert an empty <div> into the document as the last child of the currently selected element. You can then edit the new node's content and styling just as you would any other node in the document.

You can access the same functionality using the "Create New Node" popup menu item.

Note that this button is disabled if the selected element's type is such that adding a last-child would have no effect (for example, if is is an <html> or an <iframe> element). However, it is enabled in places where it is not valid to insert a <div>, such as <style> or <link>. In these cases the element is added as text.