Usando a ferramenta Inspect Element no Mozilla Firefox

2 partes:inspeccionar itens Editar o código HTML

developer Tool "Inspect element" Ele permite que você identificar com precisão o código HTML todos os elementos que você vê em uma página da web. HTML e CSS estilo de acompanhamento são totalmente editáveis uma vez que você abrir estas ferramentas. Experiência com fazer as mudanças que você deseja, em seguida, atualize a página para exibir a página da web com a aparência desejada.

parte 1inspeccionar itens

Firefox Upgrade (opcional). Você pode não ter acesso a todas as funções descritas neste artigo, se você tem uma versão antiga do Firefox. Se você verificar a versão do Firefox que você instalou, você vai baixar automaticamente a versão mais recente.

Firefox 9 e versões anteriores não têm a ferramenta certa "Inspect element".

Botão direito do mouse em qualquer elemento do site. Você pode clicar com o botão direito em imagens, texto, fundos ou qualquer outro elemento. Se você tiver um mouse com dois botões, clique esquerdo, mantendo pressionada a tecla ^ controle.

No menu suspenso, clique em "Inspect element". Você deverá ver uma barra de ferramentas na parte inferior da janela. aparece um painel abaixo da barra de ferramentas onde o código HTML da página irá exibir também.

Identifica as barras de ferramentas e painéis. Quando você clica "Inspect element" vários painéis de abrir na parte inferior da janela. Aqui você tem uma descrição dos nomes e do uso de cada um deles separadamente:

A linha superior é a "Caixa de ferramentas". Ele tem várias ferramentas de desenvolvimento, mas você deve se concentrar no que diz inspetor à esquerda. Mantenha-o marcado ao longo do guia (deve ser selecionado em azul).
Abaixo da barra de ferramentas, você verá uma única linha farinha de rosca (em espanhol, "migalhas de pão") Com o HTML que exibe o caminho completo do item selecionado.
O painel abaixo mostra a árvore HTML ou "Ver marca" da página. Neste painel é selecionado e centrado o código HTML do item selecionado.
O painel à direita mostra o código do CSS da página.

Selecione um outro elemento. Uma vez que é abrir a barra de ferramentas, selecione outro item é fácil. Aqui estão três maneiras:

Passe o mouse sobre uma linha de HTML para selecionar o elemento correspondente (é necessário ter o Firefox 34 ou versão posterior). Clique no código HTML para selecionar esse item.
Clique na opção "Escolha um elemento de página" na extremidade esquerda da barra de ferramentas: o ícone é um ponteiro sobre um quadrado. Passe o mouse sobre a página para escolher o item e, em seguida, clique para selecioná-lo.

Navegue através do código. Clique em qualquer lugar no painel de HTML. Use as setas direita e esquerda do teclado para navegar através do código (você deve ter Firefox 39 ou versão posterior). Isso é útil para itens que são demasiado pequenos para selecioná-los com a mão.

elementos HTML cinzentos são os elementos que não são exibidos na página. Isso inclui comentários, certos nós como e outros elementos que foram escondidos com a propriedade "display" (Show) de CSS.
Clique a seta para a esquerda do recipiente para expandir ou ocultar o seu conteúdo. Para expandir o conteúdo, mantenha a tecla ⎇ Alt ou ⌥ opção clicando.

Procura um item. Vá para a barra de pesquisa (que tem um ícone de lupa), que é na extremidade direita da linha farinha de rosca. Clique na barra para expandi-la e, em seguida, escrever o código HTML que você deseja pesquisar. Enquanto escribas irá listar os itens que correspondem ao texto da pesquisa. Clique em um deles para selecionar o item desejado e deslize o HTML painel para onde esse código é.

parte 2Editar o código HTML

Atualize a página para começar de novo a qualquer momento. Se você não tem muita experiência com ferramentas de desenvolvedor, você entende que não faça quaisquer alterações permanentes. Suas edições só serão visíveis na tela e será até fechar a página ou atualização. Sinta-se livre para experimentar, mesmo se você não tem certeza do que vai acontecer.

Clique duas vezes o código HTML para editar o texto. Clique duas vezes em uma linha de HTML. Digite o novo texto e pressione ⌅ entrar para salvar as alterações.

Clique em uma fileira "farinha de rosca" para mais opções. Lembre-se: a barra de ferramentas farinha de rosca O hotel está localizada entre a árvore HTML completo e barra de ferramentas superior. Clique em qualquer dos elementos desta linha e segurá-la para baixo para abrir um menu variado. Aqui está um (incompleta) de guia opções disponíveis:

Opção "Editar como HTML" nó e faz com que todo o conteúdo da árvore HTML é editável, assim você não terá que editar cada linha individualmente.
Opção "HTML interna cópia" copiar todo o conteúdo do nó, enquanto "Copie o HTML externo" Também copiar o nó (por exemplo,

ou .)

"cole →" leva a várias opções sobre onde para colar o texto copiado. Por exemplo, o nó antes ou depois do primeiro nó filho.

: hover, : ativa e : foco alterar a aparência do item quando o usuário interage com ele. O efeito exato será determinado de acordo com a folha de estilo CSS (editável a partir do painel do lado direito).

Arrastar e soltar. Para reordenar os itens no código, clique e segure o HTML até que aparece uma linha tracejada. Mover para baixo ou para cima da árvore e deixá-la quando a linha pontilhada está no local desejado.

Para isso, você precisa ter Firefox 39 ou mais tarde.

Feche a barra de ferramentas do desenvolvedor. Para fechar todas estas belas janelas, basta pressionar X no canto superior direito do canto da barra de ferramentas, código CSS painel superior.

dicas

Você também pode abrir a barra de ferramentas com estas opções no menu superior:

do Windows: Firefox → desenvolvedor web → Mostrar ferramentas
Mac ou Linux: ferramentas → desenvolvedor web → Mostrar ferramentas

Firefox 40 introduziu a opção de ocultar o painel de CSS para dar mais espaço para editar o HTML. Procure o ícone de seta na extremidade direita da linha farinha de rosca que está à direita da barra de pesquisa. Clique neste ícone para ocultar o painel de CSS e clique novamente para expandi-lo novamente ..

O painel CSS também podem ser editadas, mas isso está além do escopo deste guia. Procure por um tutoriais CSS básicos sobre a Internet.

Usando a ferramenta de inspecionar elemento em mozilla

dicas