Introdução às Ferramentas de Desenvolvedor F12

Este conteúdo se refere a uma versão anterior das ferramentas de desenvolvedor F12. Visite nossa documentação mais recente sobre ferramentas F12.

Se você não for um desenvolvedor de páginas da Web interessado em testar ou depurar seu conteúdo, veja a seguir alguns links úteis.

Esses links são adequados para qualquer versão do Windows Internet Explorer.

Para fechar as ferramentas F12, pressione F12 novamente ou clique no X no canto superior direito das ferramentas F12.

Para tornar a barra de ferramentas do Internet Explorer visível, clique em Alt, em Exibir, aponte para Barras de Ferramentas, marque Barra de Menus e clique em Bloquear Barras de Ferramentas. Você também pode encontrar mais informações no artigo A barra de menus e a barra de ferramentas estão ausentes no Internet Explorer da Base de Dados de Conhecimento.

Os menus e os botões das ferramentas F12 fornecem ferramentas visuais e de página para ajudar a navegar no pacote de ferramentas. Nessas ferramentas, é possível criar listas de relatórios de todos os links no documento, alterar os modos do documento ou descrever visualmente um elemento específico de uma página. Este tópico inclui as seções a seguir.

Observação  As ferramentas F12 compartilham algumas teclas de atalho com o Internet Explorer. Quando você desejar usar um atalho destinado às ferramentas F12, verifique se elas estão com o foco ativo. Em outras palavras, clique dentro das Ferramentas de Desenvolvedor F12 e depois use a tecla de atalho.

Ferramentas de página da Web

Existem várias ferramentas e opções nos menus principais. Muitas das ferramentas do pacote de ferramentas F12 funcionam na página da Web ou no próprio navegador, ou oferecem meios para se chegar a opções e recursos dos vários modos de exibição do código. A tabela a seguir descreve os menus e as opções que as ferramentas fornecem.

Menu Arquivo

Item de menuDescrição
Desfazer TudoRedefine todas as alterações, como valores de atributo, feitas na instância atual do Internet Explorer e atualiza a página da Web.
Personalizar Exibir Código-fonte do Internet Explorer Fornece um menu que possui as seguintes opções para configurar o visualizador Exibir Código-fonte:
  • Visualizador Padrão: usa o visualizador interno com a formatação de código.
  • Bloco de Notas: usa o Bloco de Notas do Windows para exibir o código-fonte.
  • Outro: permite procurar e especificar outro editor ou aplicativo visualizador instalado no computador.
Ajuda online (F1)Fornece um link para esta documentação.
Sair (F12)Fecha as ferramentas F12.

 

Menu Localizar

O menu Localizar tem apenas um item, Selecionar elemento por clique. Você pode habilitar esse recurso no item de menu, clicando no botão Selecionar elemento por cliqueImagem do botão Selecionar Elemento por Clique ou pressionando Ctrl+B. Ao habilitar esse recurso, você pode escolher um elemento em uma página da Web ao clicar no elemento da página. Depois que o elemento na página da Web é clicado, uma borda é desenhada em torno do elemento. Se a guia HTML estiver aberta, o painel à esquerda será rolado para realçar o elemento selecionado. O painel de propriedades (à direita) exibe as propriedades do elemento selecionado, segundo o tipo de propriedade atual escolhido (Estilo, Rastrear Estilos, Layout ou Atributos). Se a guia HTML não estiver aberta, o uso de Selecionar elemento por clique selecionará o elemento e retornará automaticamente o foco para a guia HTML. Selecionar elemento por clique permanecerá habilitado somente até você clicar em um elemento.

Observação  Para usar Ctrl+B, é necessário que o foco esteja dentro das ferramentas F12. Se o foco estiver na sua página da Web, será exibida a caixa de diálogo Organizar Favoritos.

Imagem de um elemento selecionado por clique

Menu Desabilitar

Esse menu ajuda a testar a experiência do site pelos usuários se desabilitarem determinados recursos no navegador. Usando esse menu, você ativa e desativa esses recursos.

Item de menuDescrição
ScriptDesabilita todos os scripts em uma página Web. Quando selecionado, o comando é definido e a página é atualizada. Esse comando não está disponível se o Modo Protegido de Segurança da Internet está definido como Ativado. Para usar esse comando, desmarque Habilitar Modo Protegido na guia Segurança em Opções da Internet.
Bloqueador de Pop-upsDesabilita todos os bloqueadores de pop-ups para que os pop-ups sejam permitidos nesse site.
CSSDesativa todas as CSS (Folhas de Estilos em Cascata) na página da Web. Quando selecionado, o comando é definido e a página da Web é atualizada com o CSS desativado. Se você atualizar a página da Web ou iniciar a depuração do script (que atualiza a página da Web), o CSS será reativado.

 

Menu Exibir

Esse menu permite exibir informações sobre elementos na página sem localizar o item na árvore ou no código-fonte HTML.

Item de menuDescrição
Informações de Classe e ID (Ctrl+I)Exibe os valores de classe e ID de todos os elementos HTML em uma página da Web. Dentro dos elementos correspondentes, as informações são exibidas como sobreposições na página da Web. Clique duas vezes na sobreposição para realçar as informações. Pressione Ctrl+C para copiar.
Caminhos de linkExibe os caminhos de link para todos os links em uma página da Web. As informações são exibidas como sobreposições de texto nos elementos de página da Web. Clique duas vezes na sobreposição para realçar as informações. Pressione Ctrl+C para copiar.
Relatório de linkGera uma lista de todos os links encontrados nessa página da Web e os relata em uma nova instância do Internet Explorer. Isso facilita e torna prática a inspeção de todos os links sem que seja necessário navegar em todo o código-fonte HTML.
Índices de guiaExibe os índices de tabulação como números sobrepostos na página da Web para os elementos cujo atributo tabindex está definido.
Teclas de acessoExibe as teclas de acesso como sobreposições de elementos em uma página da Web cujo atributo accesskey está definido.
Código-fonte Um submenu do menu Exibir, com descrições mostradas na tabela a seguir.

 

Item de submenu Código-fonteDescrição
Exibir Código-fonte de Elemento com EstiloExibe apenas o código-fonte HTML do elemento selecionado e seu conteúdo, juntamente com o CSS que se aplica a ele, em uma nova janela. Isso ajuda a se concentrar exclusivamente nos códigos-fonte do elemento selecionado. Deve ser selecionado um elemento HTML no corpo da árvore HTML usando a exibição da guia HTML para que esse comando possa ser executado. Para selecionar um elemento, use o comando Selecionar elemento por clique ou clique em um elemento na árvore HTML.
DOM (Elemento)Exibe apenas o código-fonte HTML do elemento selecionado e o seu conteúdo em uma nova janela. Deve ser selecionado um elemento HTML usando a exibição da guia HTML para que esse comando possa ser executado. Para selecionar um elemento, use o comando Selecionar elemento por clique.
DOM (Página)Exibe o código-fonte HTML completo em uma nova janela, mostrando o aninhamento de elemento. Esse modo de exibição do código-fonte mostra a estrutura do DOM (Document Object Model) da página, inclusive códigos-fonte gravados dinamicamente no DOM por meio de scripts, conforme representados pelo Internet Explorer.
OriginalExibe o código-fonte HTML original em uma nova janela.

 

Menu Imagens

Esse menu fornece comandos que podem ajudar a compreender e depurar o layout da página ajudando você a identificar o tamanho e a posição de elementos. Ele também ajuda a identificar visualmente todos os elementos de um determinado tipo por codificação por cores com base no tipo de elemento.

Item de menuDescrição
Desabilitar imagensDesativa a renderização de todas as imagens em uma página da Web. Esse comando faz a página da Web ser atualizada sem mostrar nenhuma imagem e também desabilita o comando Mostrar Tamanhos de Arquivo de Imagem.
Mostrar dimensões da imagemExibe a dimensão de uma imagem como sobreposições de texto para todas as imagens encontradas em uma página da Web.
Mostrar tamanhos de arquivo de imagemExibe o tamanho do arquivo de uma imagem como sobreposições de texto para todas as imagens encontradas em uma página da Web. O tamanho de arquivo é informado em bytes. Se o comando Desabilitar Imagens for usado, ele será desabilitado.
Mostrar caminhos de imagemExibe o caminho absoluto de uma imagem como sobreposições para todas as imagens encontradas em uma página da Web.
Exibir Texto AlternativoExibe o texto alternativo de todas as imagens cujo atributo alt foi definido. Para imagens cujo atributo alt não está definido, nenhuma sobreposição é exibida.
Exibir relatório de imagemGera uma lista de todas as imagens no código de corpo na página da Web atual e a exibe em uma nova guia do Internet Explorer. Essa lista não inclui imagens carregadas com CSS (como "background-image:url()").

 

Menu Cache

Item de menuDescrição
Sempre Atualizar do Servidor Força o Internet Explorer a sempre adquirir o conteúdo de página da Web do servidor, em vez de usar o cache de conteúdo. Esse comando continuará até você limpá-lo ou a instância do Internet Explorer ser fechada.
Limpar Cache do Navegador... (Ctrl+R)Exclui o cache do navegador e todos os arquivos temporários.
Limpar Cache do Navegador para Este Domínio... (Ctrl+B)Exclui somente o cache do navegador e todos os arquivos temporários que pertencem ao domínio atual.
Desabilitar CookiesDesabilita o uso de todos os cookies nesta instância do Internet Explorer. Esse comando continuará até você limpá-lo ou a instância do Internet Explorer ser fechada.
Limpar Cookies da SessãoExclui todos os cookies adquiridos durante esta sessão do navegador.
Limpar Cookies do DomínioExclui todos os cookies do domínio atual.
Exibir Informações de CookieGera uma lista de todos os cookies encontrados no Internet Explorer e os relata em uma nova instância do Internet Explorer. Veja a referência da cookie property sobre como trabalhar com cookies.

 

Menu Ferramentas

Esse menu fornece várias ferramentas que ajudam em tarefas comuns, como o teste de um site em resoluções diferentes, a alteração da cadeia de caracteres do agente do usuário, a medição das áreas da página e a captura da cor específica de um ponto na página.

Item de menuDescrição
RedimensionarFornece um submenu com alguns tamanhos de tela predefinidos oferecidos e uma opção para personalizar um tamanho de tela. Após a seleção de um tamanho de tela predefinido, a janela do Internet Explorer é redimensionada imediatamente segundo a dimensão selecionada. O submenu fornece quatro tamanhos predefinidos (com atalhos) e uma configuração personalizada.
800x600Ctrl+Shift+1
1024x768Ctrl+Shift+2
1280x768Ctrl+Shift+3
1280x1024Ctrl+Shift+4
Personalizado(sem atalho)

 

A configuração personalizada abre uma caixa de diálogo na qual é possível inserir tamanhos de tela próprios para teste. Como as entradas personalizadas continuam após o fechamento do navegador, é possível reutilizá-las em sessões de teste futuras.

Imagem da caixa de diálogo da tela de redimensionamento personalizado
Alterar cadeia de caracteres do agente do usuário

Permite alterar a cadeia de caracteres do agente do usuário enviada para um site quando você solicita uma página da Web. Existem algumas cadeias de caracteres do agente do usuário predefinidas e uma opção personalizada. A opção personalizada mostra uma caixa de diálogo para inserir uma cadeia de caracteres própria. Depois de serem salvos, os itens personalizados serão exibidos no submenu Alterar cadeia de caracteres do agente do usuário. Atualize a página para que as alterações sejam exibidas. Lembre-se de que a alteração do docmode substituirá as configurações personalizadas do Agente do Usuário.

Imagem da caixa de diálogo Cadeias de Caracteres do Agente do Usuário Personalizadas
Limpar entradas ao navegar

Permite limpar ou manter mensagens de console e o log da guia de rede quando você navega até uma nova página da Web em uma sessão de depuração. Por padrão, o Internet Explorer limpa todas as mensagens de console e a captura da guia de rede registra quando você deixa uma página.

Mostrar Régua (Ctrl+L)

Permite medir qualquer objeto arbitrário na tela. A caixa de diálogo Régua é aberta com opções e dicas para usar a ferramenta. Há suporte para várias cores e regras. Tendo em vista a precisão, também há uma lupa disponível. Pressione CTRL+M para ativar ou desativar a lupa. As réguas mostram as coordenadas ("x,y") de cada extremidade da regra em relação ao local dos pontos na tela e o comprimento é mostrado em pixels no centro da régua. As medidas também são exibidas na parte inferior da caixa de diálogo Regra quando você move o cursor sobre uma regra. Uma régua pode ser movida, redimensionada e novamente angulada. Para remover uma régua, selecione-a e pressione a tecla Excluir. Quando terminar, clique no botão X no canto superior direito para fechar a caixa de diálogo. Feche a caixa de diálogo para ocultar todas as réguas. Abra a caixa de diálogo Régua para mostrá-las.

Mostrar Selecionador de Cores (Ctrl+K)

Mostra uma ferramenta selecionadora de cores de amostra em qualquer objeto na página. A caixa de diálogo Selecionador de Cores exibe a amostra de cor na qual o selecionar está. O Selecionador de Cores também mostra os valores RGB e HEX da cor. Para ver o valor da cor usado em uma página da Web, clique na cor de interesse com o cursor de conta-gotas. Clique em Copiar e fechar a fim de copiar o valor para a área de transferência e usá-lo na página da Web. Clique no botão X ou em Ocultar Selecionador de Cores nesse menu para fechar a caixa de diálogo.

Imagem da caixa de diálogo Selecionador de Cores do F12
Elementos de Contorno

Ajuda a compreender e depurar o layout da página de depuração facilitando a identificação do tamanho e da posição dos elementos. É possível definir uma cor para identificar todos os elementos de um determinado tipo. Use a sintaxe do seletor de CSS para especificar elementos em uma página da Web. Por exemplo, para realçar todos os parágrafos, use p no campo do seletor e defina uma cor. Para obter mais informações sobre como usar seletores, consulte Noções básicas sobre seletores de CSS.

Imagem da caixa de diálogo de elementos de contorno

 

Menu Validar

Ele permite validar a página da Web atual ou um arquivo no computador usando-se serviços de validação na Web. Uma caixa de diálogo confirma que você deseja realizar essa ação; do contrário, a solicitação é cancelada.

Item de menuDescrição
HTMLValida o HTML da página da Web atual. O relatório validado é exibido em uma nova janela.
CSSValida o CSS da página da Web atual. O relatório validado é exibido em uma nova janela.
FeedValida os feeds RSS de uma página da Web. O relatório validado é exibido em uma nova janela.
LinksValida todos os links da página da Web atual. O relatório validado é exibido em uma nova janela.
HTML Local...Abre uma nova janela com a opção de escolher um arquivo HTML no computador a ser validado.
CSS Local...Abre uma nova janela com a opção de escolher um arquivo CSS no computador local a ser validado.
Acessibilidade

Dá acesso aos seguintes validadores de acessibilidade:

Lista de Verificação da WCAGA WCAG (Diretrizes de Acessibilidade de Conteúdo da Web) do W3C. Define diretrizes para a criação de páginas da Web acessíveis.
Lista de verificação da Seção 508 As diretrizes de acessibilidade do governo dos Estados Unidos para a criação de páginas da Web acessíveis.

 

Validações múltiplas

Permite executar uma ou mais validações em uma única solicitação. Selecione a validação desejada e clique em OK para iniciar a solicitação. Você verá apenas uma caixa de diálogo confirmando que deseja enviar a página para outro site a fim de fazer a validação. Cada seleção é aberta em uma nova guia e contém a validação resultante.

Imagem da caixa de diálogo Validações múltiplas

 

Menu Modo do Navegador

Esse comando permite testar como funciona a página da Web para usuários executando outras versões do Internet Explorer. Por exemplo, se você escolher o modo do navegador Windows Internet Explorer 7, suas páginas da Web serão processadas com base nesse navegador e não poderão acessar docmodes que só estão disponíveis em versões posteriores do Internet Explorer.

Item de menuDescrição
Internet Explorer 7Modo do navegador Internet Explorer 7
Windows Internet Explorer 8Modo do navegador Internet Explorer 8
Windows Internet Explorer 9Modo do navegador Internet Explorer 9 Isso permite HTML5, CSS3 e outros padrões para os quais o Internet Explorer 9 oferece suporte.
Modo de exibição de compatibilidade do Internet Explorer 9 Testa como os usuários do Internet Explorer 9 experimentam a página da Web quando eles escolhem a opção do Modo de Exibição de Compatibilidade.

 

Menu Modo de Documento

Esse comando permite testar como a página da Web é interpretada em outras versões do Internet Explorer. As alterações feitas em páginas da Web afetam todos os documentos da página, inclusive quadros.

Item de menuDescrição
Modo Quirks (Alt+Q)Este comportamento corresponde ao do Internet Explorer na renderização de um documento sem tipo de documento ou com um documento Quirks. Atua do mesmo modo que o modo Quirks do Internet Explorer 7 ou Internet Explorer 8.
Padrões do Internet Explorer 7 (Alt+7) Este comportamento corresponde ao do Internet Explorer 7, renderizando um documento com um tipo de documento estrito ou desconhecido.
Padrões do Internet Explorer 8 (Alt+8) Este é o comportamento mais compatível com padrões disponível no Internet Explorer 8, durante a renderização um documento com um tipo de documento estrito ou desconhecido.
Padrões do Internet Explorer 9 (Alt+9) Esse é o comportamento mais compatível com padrões disponível no Internet Explorer 9.

 

Tópicos relacionados

Como usar as Ferramentas para Desenvolvedores F12 para depurar as páginas da Web

 

 

Mostrar:
© 2014 Microsoft