"Inspecionar elemento" é uma ferramenta de desenvolvedor no navegador Firefox que você pode usar para rastrear o código HTML em qualquer página da web. As folhas de estilo HTML e CSS de uma página da web podem ser editadas com "Inspecionar elemento". Você pode tentar editar uma página da maneira que quiser e restaurá-la simplesmente recarregando a página editada.
Etapa
Parte 1 de 2: verificação de elementos
Etapa 1. Atualize o Firefox (opcional)
É possível que você não consiga acessar os recursos discutidos neste artigo se estiver usando uma versão mais antiga do Firefox. A atualização será instalada automaticamente quando você verificar qual versão do Firefox está usando.
O Firefox 9 e versões anteriores não possuem a ferramenta "Inspecionar elemento"
Etapa 2. Clique com o botão direito em qualquer elemento da página da web
Você pode clicar com o botão direito em qualquer imagem, texto, plano de fundo ou elemento. Se o seu mouse tiver apenas um botão, uma combinação de clique com o botão esquerdo e a tecla Control resultará em um clique com o botão direito.
Etapa 3. Clique em "Inspecionar elemento" no menu suspenso
Uma barra de ferramentas aparecerá na parte inferior da janela. Um painel abaixo da barra de ferramentas também aparecerá e exibirá o código HTML na página ativa.
Etapa 4. Conheça as barras de ferramentas e painéis existentes
Ao usar "Inspecionar elemento", vários painéis serão abertos abaixo da janela do navegador. O seguinte descreve os nomes e funções das barras de ferramentas e painéis em "Inspecionar Elemento":
- Na linha superior está a barra de ferramentas da caixa de ferramentas. Existem várias ferramentas que podem ser encontradas aqui, mas vamos nos concentrar no botão Inspetor à esquerda. Certifique-se de que este botão esteja ativo (indicado pela cor do botão que fica azul quando ativo) em todo este guia.
- Abaixo disso, há uma linha de breadcrumbs dos elementos HTML que indicam a localização do elemento atualmente selecionado.
- O painel sob os prompts de navegação mostra a árvore HTML ou "Visualização de marcação" da página da web. O HTML do elemento selecionado será marcado e centralizado neste painel.
- O painel à direita exibe a folha de estilo CSS da página da web atual.
Etapa 5. Selecione outro elemento
Quando a barra de ferramentas está aberta, você pode selecionar facilmente outros elementos. Existem três formas de fazer isso:
- Passe o mouse sobre uma linha de HTML para marcar o elemento selecionado (este recurso requer Firefox 34+). Clique no HTML para selecionar esse elemento.
- Clique na ferramenta "Selecionar Elemento" no canto esquerdo da barra de ferramentas: ela tem um ícone em forma de cursor acima de uma caixa. Mova o cursor na página da web para marcar um elemento e clique para selecioná-lo.
Etapa 6. Rastreie o código HTML
Clique em qualquer lugar no painel HTML. Use as teclas direcionais esquerda e direita do teclado para mover de um código para outro (este recurso requer Firefox 39+). Este método é útil para selecionar elementos que são muito pequenos para serem selecionados com o cursor.
- HTML esmaecido indica elementos que não são exibidos na página. Os elementos incluídos neste são comentários, como nós e outros elementos ocultos pela propriedade de exibição CSS.
- Clique na seta à esquerda da caixa para mostrar ou ocultar o conteúdo. Para exibir todo o conteúdo, mantenha pressionado alt="Imagem" ou opção enquanto clica na seta.
Etapa 7. Localize o elemento
Procure o campo de pesquisa (ícone em forma de loop) no canto direito da linha de breadcrumbs. Clique para expandir o campo de pesquisa e digite o código HTML que deseja pesquisar. Conforme você digita, um pop-up será exibido mostrando os resultados da pesquisa correspondentes. Clique em um elemento dos resultados da pesquisa e role o painel HTML até o código que você está procurando.
Parte 2 de 2: Editando HTML
Etapa 1. Recarregue a página para começar de novo
Se você é novo nas ferramentas de desenvolvimento de sites, esteja ciente de que você não faz alterações permanentes nas páginas que edita. Suas edições só aparecem na tela até que você recarregue ou feche a página. Sinta-se à vontade para experimentar, mesmo que não saiba o que vai acontecer.
Etapa 2. Clique duas vezes no HTML para editar
Clique duas vezes em HTML embutido. Digite o novo texto e pressione Enter para salvar as alterações.
Etapa 3. Clique e segure a ferramenta na localização atual para abrir mais opções
Observe que a barra de ferramentas breadcrumb fica entre a árvore HTML e a barra de ferramentas acima dela. Clique e segure uma ferramenta nesta linha para abrir mais menus. Abaixo está uma dica das opções disponíveis (não exaustivas):
- "Editar como HTML" permite que você edite todo o conteúdo HTML da árvore HTML diretamente em vez de editar cada linha.
- "Copiar HTML interno" copia todo o conteúdo dentro do nó, enquanto "Copiar HTML externo" copia o conteúdo e os nós (como ou
- "Colar →" traz várias opções de onde colar a cópia, como antes do nó ou depois do primeiro filho do nó.
- : hover,: active e: focus alteram a aparência do elemento quando o usuário interage. Os efeitos alterados são definidos na folha de estilo CSS (editável no painel à direita).
Etapa 4. Arraste e solte
Para reorganizar os elementos no código, clique e segure o HTML até que uma linha pontilhada apareça. Mova a linha para cima e para baixo na árvore e solte o botão do mouse quando a linha estiver onde você deseja.
Este recurso requer Firefox 39 e posterior
Etapa 5. Feche a barra de ferramentas do desenvolvedor
Para fechar toda a janela Inspecionar elemento, clique no botão X no canto superior direito da barra de ferramentas localizada acima do painel CSS.
Pontas
- Você também pode abrir a barra de ferramentas nas opções de menu na parte superior da janela:
- Windows: Firefox → Desenvolvedor da Web → Ferramentas de alternância
- Mac ou Linux: Ferramentas → Desenvolvedor da Web → Ferramentas de alternância
- O Firefox 40 tem a opção de ocultar o painel CSS para que você tenha mais espaço para editar HTML. Procure o ícone de seta no canto direito da linha de breadcrumbs e à direita do campo de pesquisa. Clique neste ícone para ocultar o painel CSS e clique novamente para abri-lo.
- Você também pode editar painéis CSS, mas eles não estão listados neste artigo. Você pode encontrar instruções para editar o código CSS na internet.
