A ferramenta de desenvolvedor Inspecionar elemento no Firefox permite que você localize o código HTML para qualquer coisa que você vê em sua página da web. O HTML e a folha de estilo CSS que a acompanha são totalmente editáveis quando essas ferramentas são abertas. Experimente todas as alterações que desejar e, em seguida, atualize a página para retornar à aparência desejada da página da web.
Passos
Parte 1 de 2: Inspecionando Elementos
Etapa 1. Clique com o botão direito em qualquer elemento da página da web
Você pode clicar com o botão direito em imagens, texto, planos de fundo ou qualquer outro elemento. Se você não tiver um mouse de dois botões, clique com o botão esquerdo enquanto segura a tecla Control.
Etapa 2. Clique em Inspecionar elemento no menu suspenso
Uma barra de ferramentas deve aparecer na parte inferior da janela. Um painel também aparecerá abaixo da barra de ferramentas, exibindo o código HTML da página.
Etapa 3. Identifique as barras de ferramentas e os painéis
Ao clicar em Inspecionar elemento, vários painéis serão abertos na parte inferior da janela. Aqui está uma análise de seus usos e nomes:
- A linha superior é a Barra de ferramentas da caixa de ferramentas. Ele tem várias ferramentas de desenvolvedor, mas estamos interessados no Inspetor à esquerda. Mantenha-o selecionado (destacado em azul) para todo o guia.
- Abaixo da barra de ferramentas, há uma única linha Breadcrumbs de elementos HTML, mostrando o caminho completo relacionado ao elemento selecionado.
- O painel abaixo desta linha mostra a árvore HTML ou "Visualização de marcação" da página. O HTML do elemento selecionado é destacado e centralizado neste painel.
- O painel à direita exibe a folha de estilo CSS para esta página.
Etapa 4. Selecione outro elemento
Depois que a barra de ferramentas é aberta, é fácil selecionar outro elemento. Aqui estão três maneiras de fazer isso:
- Passe o mouse sobre uma linha de HTML para destacar o elemento correspondente (requer Firefox 34+). Clique no HTML para selecionar esse elemento.
- Clique na ferramenta Selecionar Elemento na extremidade esquerda da barra de ferramentas: o ícone é um cursor sobre um quadrado. Mova o cursor sobre a página para destacar os elementos e clique para selecionar um elemento.
Etapa 5. Navegue pelo código
Clique em qualquer lugar no painel HTML. Use as setas esquerda e direita do teclado para percorrer o código (requer Firefox 39+). Isso é útil para elementos muito pequenos para serem selecionados manualmente.
- HTML cinza está relacionado a elementos não exibidos na página. Isso inclui comentários, determinados nós, como e elementos que foram ocultados com a propriedade de exibição CSS.
- Clique na seta à esquerda dos contêineres para expandir ou ocultar seu conteúdo. Para expandir todo o conteúdo, segure alt="Imagem" ou opção enquanto clica.
Etapa 6. Pesquise um elemento
Procure a barra de pesquisa (ícone de lupa) na extremidade direita da linha Breadcrumbs. Clique aqui para expandi-lo e digite o código HTML que você está procurando. Conforme você digita, um pop-up aparecerá listando os elementos correspondentes. Clique em um para selecionar esse elemento e role o painel HTML para seu código.
Parte 2 de 2: Editando o HTML
Etapa 1. Atualize a página para recomeçar a qualquer momento
Se você é novo nas ferramentas de desenvolvedor da web, entenda que elas não fazem alterações permanentes. Suas edições ficarão visíveis apenas na tela, e apenas até você fechar a página ou atualizá-la. Não hesite em experimentar, mesmo que não tenha certeza do que vai acontecer.
Etapa 2. Clique duas vezes no HTML para editar o texto
Clique duas vezes em uma linha de HTML. Digite o novo texto e pressione Enter para salvar suas alterações.
Etapa 3. Clique e segure uma localização atual para obter mais opções
Lembre-se de que a barra de ferramentas Breadcrumb está espremida entre a árvore HTML completa e a barra de ferramentas superior. Clique e segure em qualquer um dos elementos nesta linha para abrir um menu extenso. Aqui está um guia incompleto para essas opções:
- "Editar como HTML" torna o nó e todo o seu conteúdo editáveis na árvore HTML, em vez de ter que editar cada linha individualmente.
- "Copiar HTML interno" copia todo o conteúdo do nó, enquanto "Copiar HTML externo" copia o nó também (como ou
- "Colar →" leva a várias opções de onde colar, como antes deste nó ou após o primeiro filho do nó.
- : hover,: active e: focus alteram a aparência do elemento quando o usuário interage com ele. O efeito exato é determinado pela folha de estilo CSS (editável no painel direito).
Etapa 4. Arraste e solte
Para reorganizar os elementos no código, clique e segure o HTML até que uma linha tracejada apareça. Mova-o para cima ou para baixo na árvore e solte-o quando a linha tracejada estiver no lugar desejado.
Isso requer Firefox 39 ou posterior
Etapa 5. Feche a barra de ferramentas do desenvolvedor
Para fechar todas essas janelas sofisticadas, basta pressionar o X no canto direito da barra de ferramentas, acima do painel CSS.
Pontas
- Você também pode abrir a barra de ferramentas com estas opções do menu superior:
- Windows: Firefox → Desenvolvedor da Web → Ferramentas de alternância
- Mac ou Linux: Ferramentas → Desenvolvedor da Web → Ferramentas de alternância
- O Firefox 40 introduziu a opção de ocultar o painel CSS para dar a você mais espaço durante a edição de HTML. Procure o ícone de seta na extremidade direita da linha Breadcrumbs, à direita da barra de pesquisa. Clique neste ícone para ocultar o painel CSS e clique nele novamente para expandi-lo novamente.
- O painel CSS também pode ser editado, mas isso está além do escopo deste guia. Este artigo ensina noções básicas de CSS.
