Usando as ferramentas de desenvolvedor F12

Usando as ferramentas de desenvolvedor F12, você pode depurar, testar e acelerar suas páginas da Web. Se você precisa de ajustar o layout CSS ou encontrar um vazamento de memória, encontrará as ferramentas para ajudá-lo aqui.

Se você estiver procurando o menu Ferramentas ou as barras de ferramentas no Internet Explorer 11, tente:
Se você chegou aqui clicando em uma mensagem de erro e simplesmente deseja evitar mensagens de erro no futuro, tente:

As ferramentas F12 no trabalho

Recriamos as ferramentas F12 desde o início no IE11. Elas têm uma nova interface do usuário e novas funcionalidades para tornar o desenvolvimento e a depuração mais rápida e fácil. E vamos implementar mais melhorias nas atualizações.

Pressione a tecla F12 no seu teclado para abrir as ferramentas. Se o seu teclado não tiver as teclas de função, use o menu Ferramentas.

Há oito ferramentas distintas, cada uma com sua própria guia na interface ferramentas F12. Aqui você encontrará uma imagem de cada ferramenta, um resumo rápido do que ela faz e das novidades, e algumas tarefas de desenvolvimento ou depuração facilitadas pela ferramenta.

A ferramenta Explorador do DOM (CTRL + 1)

Ferramentas de Desenvolvedor F12, destacando o Explorador DOM

A ferramenta Explorador DOM mostra a estrutura de sua página da Web como seria renderizada no navegador e torna possível a edição de HTML e dos estilos em uma página dinâmica. Você pode fazer isso sem ter que editar e recarregar suas fontes, para que possa resolver rapidamente os problemas de exibição ou experimentar novas ideias.

Os novos recursos na ferramenta Explorador DOM incluem:

  • Sugestões de preenchimento automático IntelliSense durante a edição de atributos HTML e propriedades CSS.
  • Arraste os nós DOM para reorganizá-los.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Determinar por que um elemento não está sendo exibido no lugar certo ou no tamanho certo.
  • Descobrir quais estilos CSS e consultas de mídia estão sendo aplicados a um elemento.
  • Testar uma série de cores diferentes para um elemento para ver qual fica melhor.

Os novos recursosna ferramenta Explorador do DOM no Windows 8.1 Update 1 incluem:

  • A alternância de pseudoclasse mostra seus estilos em focalizar e modos visitados, simplesmente marcando uma caixa.
  • Os painéis Rastreamento e Calculado são combinados, liberando espaço para um novo painel Alterações que controla as alterações feitas nos estilos através do Explorador do DOM.

Os novos recursosna ferramenta Explorador do DOM na Atualização de Segurança Cumulativa do Internet Explorer (KB2976627) incluem:

  • O painel Calculado possui "barras de alteração"; indicadores visuais de que um estilo foi alterado.
  • A nova ferramenta Selecionador de Cores torna mais fácil selecionar cores através de um conta-gotas, controles deslizantes ou uma seleção de predefinições.

Saiba mais sobre a ferramenta Explorador DOM.

A ferramenta Console (CTRL + 2)

Ferramentas de Desenvolvedor F12, destacando o Console JavaScript

A ferramenta Console fornece uma maneira de interagir com o seu código em execução, enviar informações para a linha de comando do Console e receber informações usando a API de Depuração de Console. Os desenvolvedores consideram ferramenta Console como sendo tão útil que facilitamos o acesso a ela. Agora, você pode abri-la na parte inferior de qualquer outra ferramenta usando o botão Console no canto superior direito da interface do usuário, próximo ao botão Ajuda ou CTRL + `.

Os novos recursos na ferramenta Console incluem:

  • Abra o Console na parte inferior de qualquer outra ferramenta com o botão Console ou CTRL + `.
  • Os novos métodos da API de Depuração de Console para tempo, contagem, agrupamento e mais.
  • As sugestões de preenchimento automático IntelliSense na linha de comando aceleram a entrada, reduzem erros de digitação e ajudam você a descobrir os aspectos das APIs JavaScript.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Exibir as mensagens de erro do sistema, os avisos de exceção e a saída de depuração.
  • Executar código de tempo até a declaração com novos métodos de cálculo de tempo.
  • Alterar o valor de uma variável na execução de código sem recarregar.

Os novos recursos na ferramenta Console no Windows 8.1 Update 1 incluem:

  • O menu suspenso Destino aplica comandos do console a iFrames específicos em seus documentos.
  • O botão de alternância Limpar ao navegar oferece a você um controle para preservar ou excluir mensagens de console após navegar para uma nova página.
  • Uma opção Sempre gravar mensagens do console do desenvolvedor significa que você não precisa mais abrir o console para começar a capturar a saída nele.

Os novos recursos na ferramenta ConsoleAtualização de Segurança Cumulativa do Internet Explorer (KB2976627) incluem:

  • O comando console.timeStamp() mostra o número de milissegundos em que a guia atual do navegador está aberta, ou ele pode ser usado com uma sessão de criação de perfil de Capacidade de Resposta da Interface do Usuário para criar carimbos de data/hora na linha do tempo de sessão.
  • A Indicação de mensagem obsoleta sombreia os ícones nas mensagens do console de páginas anteriores quando Limpar ao navegar está desativado, tornando mais fácil identificar apenas as mensagens atuais.
  • O preenchimento automático do IntelliSense foi refinado, removendo as propriedades de indexador que poluíam as sugestões.
  • CTRL + L agora limpa o console.

Saiba mais sobre a ferramenta Console.

A ferramenta Depurador (CTRL + 3)

Ferramentas de Desenvolvedor F12, destacando a ferramenta Depurador

Use a ferramenta Depurador para examinar o que o seu código está fazendo, quando e como está fazendo. Pause o código no meio da execução, examine-o linha por linha e veja o estado de variáveis e objetos em cada etapa.

Os novos recursos na ferramenta Depurador incluem:

  • Depuração sem atualização. Defina os pontos de interrupção e continue sem recarregar e perder o estado.
  • Interface de documentos com guias para facilitar o gerenciamento de vários scripts.
  • Barra de rolagem que destaca os pontos de interrupção e pesquisa as correspondências.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Vendo o que levou a uma chamada de função usando a Pilha de chamadas.
  • Deixar o código compactado ou minificado mais legível.
  • Monitorar a criação e execução do web worker.

Os novos recursos na ferramenta Depurador no Windows 8.1 Update 1 incluem:

  • O suporte ao Mapa de origem ajuda a rastrear erros no código compactado em seus arquivos-fonte mais legíveis.
  • Apenas Meu Código ajuda você a excluir bibliotecas de terceiros das tarefas de depuração, para que você não tenha que se deparar com exceções sem tratamento de outras pessoas enquanto está tentando depurar seu código.
  • Pontos de interrupção e arquivos abertos são preservados entre sessões, para que você possa sair e voltar sem perder todas essas informações.

Os novos recursos na ferramenta Depurador na Atualização de Segurança Cumulativa do Internet Explorer (KB2976627) incluem:

  • Escolher mapa de origem permite que você especifique um mapa de origem para um arquivo quando um mapa não tiver sido especificado internamente.
  • Pontos de interrupção e tracepoints podem ser conectados a eventos.
  • Pilhas de chamadas assíncronas permitem que você veja pilhas de chamadas relacionadas quando divididas em manipuladores de resposta para depurar chamadas assíncronas mais facilmente.

Saiba mais sobre a ferramenta Depurador.

A ferramenta Rede (CTRL + 4)

Ferramentas de Desenvolvedor F12, destacando a ferramenta Rede

A ferramenta Rede fornece os detalhes de todas as solicitações de rede envolvidas no carregamento e na operação de suas páginas da Web.

Os novos recursos na ferramenta Rede incluem:

  • Melhores informações sobre o tempo da solicitação.
  • Melhor captura das informações de compactação.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Visualizar a largura de banda consumida por sua página nos recursos.
  • Depurar as solicitações AJAX por meio da visualização de cabeçalhos e corpos de solicitações e respostas.
  • Identificar as solicitações de rede que retardam o carregamento de suas páginas da Web.

Saiba mais sobre a ferramenta Rede.

A ferramenta Capacidade de Resposta de IU (CTRL + 5)

Ferramentas de Desenvolvedor F12, destacando a ferramenta Capacidade de Resposta de IU

A ferramenta Capacidade de resposta de IU ajuda a analisar o que está acontecendo quando a página fica mais lenta. Usá-la em pontos específicos de lentidão do perfil mostra as operações que os causam.

A ferramenta Capacidade de resposta de IU é nova nas ferramentas F12 do IE11. Alguns recursos interessantes:

  • Identificar as diferentes fontes de atividade da CPU, que causam lentidão na interface do usuário.
  • Ter uma visão da taxa de quadros da sua página.
  • Definir rótulos na linha do tempo para isolar cenários de usuários.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Testar otimizações de código.
  • Acelerar suas páginas da Web.

Os novos recursos na ferramenta Capacidade de resposta da interface do usuário no Windows 8.1 Update 1 incluem:

  • A filtragem de tipo de evento ajuda você a se concentrar nos tipos de eventos mais importantes para você.
  • Filtro para evento permite que você faça busca detalhada somente no evento e nos itens dentro de seu tempo inclusivo.
  • As atualizações de DOM iniciadas pelo JavaScript agora são listadas como filhas do evento Script.

Os novos recursos na ferramenta Capacidade de resposta da interface do usuário na Atualização de Segurança Cumulativa do Internet Explorer (KB2976627) incluem:

  • Salvar e carregar as sessões de criação de perfil para análise posterior.
  • As solicitações HTTP de imagens mostram uma visualização da imagem no painel de detalhes.
  • O Filtro de atividade da interface do usuário ajuda você focalizar ou filtrar os eventos relacionados à interface do usuário.
  • Filtrar itens leva menos de 1 ms, organizando o relatório de criação de perfil.

Saiba mais sobre a ferramenta Capacidade de Resposta de IU.

A ferramenta Criador de Perfil (CTRL + 6)

Ferramentas de Desenvolvedor F12, destacando a ferramenta Criador de Perfil

A ferramenta Criador de Perfil é a medição de velocidade pura em JavaScript, mostrando-lhe as funções que foram chamadas durante uma sessão de criação perfil, quantas vezes elas foram chamadas e quanto tempo elas levaram para ser concluídas.

Os novos recursos na ferramenta Criador de Perfil incluem:

  • Rastreamento de quais funções foram executadas em web workers.
  • Interface do usuário mais limpa e mais ágil.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Isolar as partes mais lentas do código.
  • Testar otimizações de código.
  • Acelerar suas páginas da Web.

Saiba mais sobre a ferramenta Criador de Perfil.

A ferramenta Memória (CTRL + 7)

Ferramentas de Desenvolvedor F12, destacando a ferramenta Memória

Quando uma página da Web começa rápida e fica mais lenta depois que você a usa por um tempo, o culpado é geralmente um vazamento de memória. A ferramenta Memória acompanha o uso de memória de sua página da Web, ajudando você a identificar onde há aumento de uso de memória, o motivo do aumento e como corrigi-lo.

A ferramenta Memória é nova nas ferramentas F12 do IE11. Alguns recursos interessantes:

  • Uma linha do tempo para ver as mudanças progressivas no uso de memória.
  • Instantâneos para examinar os detalhes de uso de memória em pontos específicos.
  • Comparações de instantâneo para identificar os pontos específicos de aumento.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Identificar nós DOM desanexados.
  • Identificar pontos de aumento de memória.
  • Medir o uso de memória dos objetos.

Os novos recursos na ferramenta Memória no Windows 8.1 Update 1 incluem:

  • Objetos relacionados às funções estão vinculados à ferramenta Depurador. Clicar neles abrirá o script associado na ferramenta Depurador e rolará o painel de script até essa função.
  • O menu Escopo é adicionado às comparações de instantâneo para fornecer perspectivas diferentes.
  • Os contêineres Set, Map e WeakMap do ECMAScript 6 agora têm suporte.

Os novos recursos na ferramenta Memória na Atualização de Segurança Cumulativa do Internet Explorer (KB2976627) incluem:

  • Salvar e carregar as sessões de criação de perfil de memória para análise posterior.
  • A dobragem do Dominator recolhe os itens menos pertinentes sob itens pai para ajudar a identificar melhor os problemas de memória.
  • Melhor reconhecimento e tratamento de referências circulares, para que você não tenha que passar por loops infinitos.

Saiba mais sobre a ferramenta Memória.

A ferramenta Emulação (CTRL + 8)

Ferramentas de Desenvolvedor F12, destacando a ferramenta Emulação

A ferramenta Emulação ajuda você a testar como suas páginas da Web são executadas em diferentes tamanhos de tela e recursos de software e como elas respondem a cadeias de caracteres de agente diferentes.

A ferramenta Emulação é nova nas ferramentas F12 do IE11. Alguns recursos interessantes:

  • Você pode emular tamanhos e resoluções de tela diferentes.
  • Simulação de GPS.

As tarefas de desenvolvimento e depuração tornam mais fácil:

  • Testando projetos dinâmicos em vários tipos de tela.
  • Testando recursos com reconhecimento de local para um site móvel.

Os novos recursos na ferramenta Emulação no Windows 8.1 Update 1 incluem:

  • Uma alternância para fazer com que as configurações de emulação persistam entre sites e inclusive janelas.
  • O modo de Documento explica por que o IE está emulando um modo diferente.
  • Suporte ao Modo Empresarial.

Os novos recursos na ferramenta Emulação na Atualização de Segurança Cumulativa do Internet Explorer (KB2976627) incluem:

  • A lista suspensa do modo de Documento na parte superior de todas as ferramentas oferece acesso rápido ao nosso recurso de emulação mais popular.

Saiba mais sobre a ferramenta Emulação.

Tópicos relacionados

Novidades nas ferramentas de desenvolvedor F12
Novos métodos de API de console
Ferramentas de desenvolvedor F12 no Internet Explorer 10
Atalhos de teclado nas ferramentas F12 de desenvolvedor do IE11

 

 

Mostrar:
© 2015 Microsoft