Utilize o Inspector para analisar e modificar a estrutura e layout de uma página.
Há várias maneiras de abrir o Inspector:
O 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".
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.
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.
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:
{{EmbedYouTube("zBYEg40ByCM")}}
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:
{{EmbedYouTube("y2LcsxE2pR0")}}
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ê:
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.:
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.
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.
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.
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.
A partir do Firefox 27, você pode ver a amostra da cor próxima ao seu valor:
A partir do Firefox 28, se você clicar na amostra de cor, uma paleta de cores será aberta para você selecionar qual deseja.
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:
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:
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:
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.
O Firefox pode acessar os seguintes objetos a partir do contexto chrome://browser/content/devtools/inspector/inspector.xul:
definido em inspector-panel.js. Atributos e funções:
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."
{{ Page ("en-pt-BR/docs/tools/Keyboard_shortcuts", "page-inspector") }}
{{ Page ("pt-BR/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}