Utilize o Inspector para analisar e modificar a estrutura e layout de uma página.

Abrindo o Inspector

Há várias maneiras de abrir o Inspector:

  • Abrir o "Inspector" pelo menu "Web Developer" (no Mac "Web Inspector" é um submenu do menu "Tools")
  • Precione Ctrl-Shift-C (Cmd-Option-C no Mac OS e Linux)
  • Click com o botão direito em um elemento na página, depois click esquerdo em "Inspecionar elemento"

Toolbox vai aparecer na parte inferior da janela do seu navegador, com o Inspector ativo.

Se você abrir o Inspector clicando em "Inspect Element", algum elemento já estará selecionado e o Inspector vai funcionar conforme demonstrado na seção abaixo chamada "Selecionando Elementos".

Outro caminho é mover o mouse por toda a página: o elemento abaixo do mouse fica em destaque e com uma borda pontilhada e são exibidas as informações sobre a sua tag HTML. Ao mesmo tempo, do lado esquedo da janela do Inspector, é exibida sua definição HTML contextualizada. Para quem usa o Firefox 30, serão exibidos também os grid lines do elemento seu modelo de caixa, conforme a imagem a seguir:

Após selecionar um elemento, o Inspector funcionará conforme demonstrado na próxima seção "Selecionando Elementos".

Selecionando elementos

Quando um elemento é selecionado, seu HTML é destacado do lado esquerdo do Inspector e suas informações de estilo são exibidas no painel de CSS que fica ao lado direito:

A forma como funciona a seleção de elementos teve mudanças significativas no Firefox 29 e, no Firefox 30 , o Inspector mostra o modelo de caixa de cada elemento da página.

Antes do Firefox 29

Quando você seleciona um elemento clicando sobre ele na página, o painel do Inspector fica travado neste elemento. Assim, mesmo se você mover o mouse para outro lugar na página, o Inspector não muda sua exibição para outro elemento. 

Ao clicar sobre o elemento selecionado, dois botões são exibidos: o do lado esquerdo desbloqueia o Inspector do elemento e permite que você selecione outro elemento na página. O do lado direito mostra um menu popup sobre o elemento.

Firefox 29

No Firefox 29, a borda pontilhada ao redor do elemento e suas anotações são mostradas quando você passa o mouse sobre o elemento na página e não apenas quando o mesmo for selecionado. Além disso, o Inspector não fica travado no elemento selecionado: ele exibe as informações do elemento correspondente ao que o mouse está em cima. Para selecionar um elemento diferente na página, clique no botão "Select element" que aparece na Barra de ferramentas do Toolbox:

A partir do Firefox 30

Aqui, o comportamento de seleção é o mesmo do Firefox 29, mas o Inspector também mostra o modelo de caixa e as grid lines para o elemento selecionado na página:

 

Você pode executar algumas tarefas específicas no menu popup. Para ativá-lo, clique no contexto do elemento no painel de HTML:

O menu oferece as seguintes opções para você:

  • editar o elemento HTML
  • copiar um código HTML externo ou inter para o elemento (Copy inner / Outer HTML)
  • copiar o seletor CSS que seleciona apenas o elemento
  • deletar o elemento
  • selecionar as pseudo-classes CSS: :hover:focus e :active CSS
Veja outras opções:
 
  • Clique no botão direito do menu quando o elemento está selecionado, conforme demostrado na imagem abaixo:

  • Clique com o botão direito em cima de um elemento dentro do Painel de HTML do Inspector:

Copiar a URL de imagens

A partir do Firefox 29, se o elemento selecionado for uma imagem, há também a opção de copiar A URL da imagem.:

Editando HTML


Para editar um elemento externamente (outerHTML), selecione no menu popup a opção "Edit As HTML". Uma caixa para edição de HTML será aberta:

Você pode adicionar qualquer código HTM aqui: alterando tags ou adicionando novas. Para sair, basta clicar fora da caixa e as modificações serão realizadas na página.

Painel de HTML

O painel de HTML exibe a página HTML como uma árvore, em que é possível expandir e recolher cada nó. O início e o fim de cada tag para os elementos selecionados ficam em destaque com a cor fundo acizentada.

Você pode editar o HTML - tags, atributos e conteúdo - diretamente no painel: clique no elemento que você deseja editar, realize as modificações e dê Enter que as mudanças podem já ser vistas na página.

Barra de ferramentas do painel de HTML

Na parte de cima do painel, há uma barra de ferramentas dividida em três partes:

A partir do Firefox 29, o botão "Select element" foi movido para a Toolbox.

  • Select element (Selecione o elemento): se você clicar neste botão, você pode selecionar um elemento diferente na janela do navegador.
  • HTML breadcrumbs: aqui você pode verificar a hierarquia completa dos elementos da página ou da parte da página que estiver inspecionando. Se você clicar e segurar o clique sobre algum elemento, um menu popup aparecerá e permitirá que você selecione um dos elementos irmãos dele.
  • Search tags (Buscar tags): aqui você pode buscar por tags presentes na página. Com o "Enter", você busca as próximas ocorrências da tag, se houver.

Painel de CSS

O painel de CSS mostra as informações de estilo relacionadas ao elemento que está sendo inspecionado. Há 4 opções de visualização nesse painel:  "Rules", "Computed", "Fonts", and "Box Model". Você pode chavear entre elas clicando no menu superior:

Aqui são mostradas todas as regras aplicadas ao elemento selecionado, na ordem da mais específica à menos:

Aqui também são listados os pseudo-elements e as regras que eles aplicam.

Tela da opção Rules

Essa tela mostra todas as regras como em um folha de estilo, com uma lista de seletores seguida de uma lista de propriedade:valor; declarações.

Você pode realizar testes com todas as declarações deixando-as desabilitadas. Para isso, basta clicar no checkbox ao lado de cada uma, alterando entre habilitada ou não.

À direita de cada declaração, é exibido o link com o nome do arquivo CSS e o número da linha em que ela se encontra. Se você clicar ali, o arquivo será aberto no Style Editor.

A partir do Firefox 29, o Inspector entende o mapa do código CSS (CSS source map). Isso significa que se você estiver utilizando um editor CSS em que funcionem os mapas de código e se você habilitar o mapa de código no Style Editor settings, o link levará você até o código original e não ao CSS gerado.

Leia mais sobre isso em Style Editor documentation.

Amostra de cores

A partir do Firefox 27,  você pode ver a amostra da cor próxima ao seu valor:

Seletor de cor

A partir do Firefox 28, se você clicar na amostra de cor, uma paleta de cores será aberta para você selecionar qual deseja.

Pré-visualização da imagem de fundo (Imagem background-image preview)

A partir do Firefox 27,  você pode pré-visualizar a imagem especificada utilizando o background-image que funciona ao passar o mouse sobre o link da imagem:

Visualização transform 

Isto é novo no Firefox 29.

A partir do Firefox 29 , se você passar o mouse sobre a propriedade transform na tela Rules,  você consegue visualizar a transformação que ali ocorre:

Editando rules

Se você clicar em uma declaração para editar sua propriedade ou valor, você visualiza o resultado imediatamente (aqui você também pode adicionar novas declarações, basta clicar no fim de uma já existente e dar Enter). O Inspector reconhece inclusive se você inserir um valor ou propiedade errado ou inexistente: ele coloca um alerta amarelo no local.

Qualquer mudança que você fizer é temporária: com um reload a página volta com seu estilo original.

Dica: Você pode usar as setinhas do seu teclado para fazer ajustes nos valores numéricos enquanto edita, como se fosse um ajuste fino.

Nesta opção, o estilo do elemento é organizado pela propriedade. Isso lista todas as propriedades CSS que foram aplicadas ao elemento em ordem alfabética e os valores para cada uma:

Clicando na propriedade, você vê a declaração referente àquele valor mais o link para o arquivo de código e número da linha:

Como padrão, só são mostrados os valores que estão sendo explicitamente usados na página: para ver todos valore, selecione a opção "Browser styles" que fica na parte de baixo do painel. 

Utilize o campo de busca (search box) para buscar na página as declarações tanto por propriedades quanto por valores. Por exemplo, se você bucar por "font", serão exibidas todas as propriedades que estão na página que contêm a palavra "font" em seu nome.

Aqui são listadas todas as fontes (ou a única) que estão sendo utilizadas pelo elemento selecionado. Mas, veja que são mostradas as fontes usadas no seu sistema, que não necessariamente é a fonte especificada no CSS original:

Menu Box model

Aqui é exibida uma representação gráfica do modelo de caixa (box model) aplicado ao elemento:

  • Ao lado superior esquerdo está o valor do espaço total tomado pelo elemento na página.
  • Os números que estão do lado de fora da caixa mostram o valor da margin de cada lado do elemento.
  • Os números nas bordas da caixa mostram quanto cada lado da borda ocupa. 
  • Os númeris que estão do lado de dentro da caixa mostram o valor de padding de cada lado do elemento.
  • E, no centro da caixa, é mostrado o tamanho do conteúdo da caixa.

Usando o Inspector com um Web Console

Você tamabém pode utilizar um web console ao mesmo tempo em que usa o inspetor de página. Na verdade, você inclusive possui uma feature a mais: o elemento selecionado que está sendo inspecionado pelo inspetor de página pode ser referenciado em JavaScript no Web Console através da utilização da variável $0.

Developer API

O Firefox pode acessar os seguintes objetos a partir do contexto chrome://browser/content/devtools/inspector/inspector.xul:

window.inspector

definido em inspector-panel.js. Atributos e funções:

  • .selection - informações sobre o elemento inspecionado:
    • .isNode() - retorna true se a seleção for um nó.
    • .node - retorna o elemento real da página.
    • .window - A janela do objeto em que o frame da seleção está.
  • .markDirty() - marca que a página foi modificada pelo inspetor - uma warning será exibida, desde que as modificações realizadas através do inspetor forem reescritas e recarregadas.

Bindable events using on:

markuploaded

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

ready

Called on first markuploaded.

pseudoclass

Called after toggle of a pseudoclass.

layout-change

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

Atalhos de teclado

Command Windows 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.

Command Windows 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 Ctrl + F
Edit as HTML F2 F2 F2
Copy the selected node's outer HTML (new in Firefox 42) Ctrl + C Cmd + C Ctrl + C
Scroll the selected node into view (new in Firefox 44) S S S

CSS pane

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

Command Windows 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.

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

Etiquetas do documento e colaboradores

 Última atualização por: danielferreira.developer,