Page Inspector

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")
  • Pressione Ctrl-Shift-i (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 desdwataque 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

Global shortcuts

Estes atalhos funcionam em todas as ferramentas que estão disponíveis na caixa de ferramentas.

Comando Windows OS X Linux
Aumentar o tamanho da fonte Ctrl + + Cmd + + Ctrl + +
Diminuir o tamanho da fonte Ctrl + - Cmd + - Ctrl + -
Voltar fonte para o tamanho normal Ctrl + 0 Cmd + 0 Ctrl + 0