Sobre a lista de ferramentas
O DevTools fornece mais de 30 ferramentas:
- Dois ícones na Barra de Atividades, para a ferramenta Inspecionar (
) e Emulação de Dispositivo (
). - Três guias de ferramentas permanentes na Barra de Atividades, para as ferramentas Elementos, Console e Fontes .
- Guias opcionais para ferramentas opcionais, como as ferramentas De boas-vindas e rede .
- Ferramentas mais opcionais, no menu Mais ferramentas (
), como as ferramentas Modo de Exibição 3D e Elementos Desapegados .
Os seguintes recursos são maneiras adicionais de acessar as ferramentas:
- O painel Modo de Exibição Rápida é uma barra de ferramentas e uma área adicional para conter ferramentas, abaixo ou à direita do painel Barra de Atividades .
- O Menu de Comando é uma maneira de usar diretamente recursos de ferramentas.
- As páginas Configurações podem ativar recursos adicionais de ferramentas.
Visão geral de todas as ferramentas
O Microsoft Edge DevTools inclui as ferramentas a seguir.
| Mal-Intencionado | Objetivo | Artigo |
|---|---|---|
| Ferramenta de exibição 3D | Explore a página da Web traduzida em uma perspectiva 3D. Depure sua página da Web navegando pelo contexto de empilhamento do DOM ou do índice z. | Navegue por camadas de página da Web, z-index e DOM usando a ferramenta Modo de Exibição 3D |
| Ferramenta animações | Inspecione e modifique os efeitos de animação do CSS usando o Inspetor de Animação na ferramenta Animações . | Inspecionar e modificar efeitos de animação do CSS |
| Ferramenta de aplicativo | Use a ferramenta De aplicativo para gerenciar o armazenamento para páginas de aplicativos Web, incluindo manifesto, trabalhadores de serviço, armazenamento local, cookies, armazenamento em cache e serviços em segundo plano. | A ferramenta De aplicativo, para gerenciar o armazenamento |
| Ferramenta de alterações | Rastreia todas as alterações feitas no CSS ou javaScript em DevTools. Mostra quais alterações fazer em seus arquivos de origem reais depois de usar o DevTools para modificar os arquivos da página da Web enviados do servidor. | Acompanhar alterações nos arquivos usando a ferramenta Alterações |
| Ferramenta de console | Uma linha de comando inteligente e rica dentro de DevTools. Uma ótima ferramenta complementar para usar com outras ferramentas. Fornece uma maneira poderosa de criar scripts, inspecionar a página da Web atual e manipular a página da Web atual usando JavaScript. | Visão geral do console |
| Ferramenta de cobertura | Ajude você a encontrar código JavaScript e CSS não utilizados para acelerar o carregamento da página e salvar os dados celulares dos usuários móveis. | Localizar código JavaScript e CSS não utilizados com a ferramenta Cobertura |
| Ferramenta de visão geral do CSS | Ajude você a entender melhor o CSS da sua página e identificar possíveis melhorias. | Ferramenta de visão geral do CSS |
| Ferramenta Elementos Desapegados | Para aumentar o desempenho de sua página, essa ferramenta encontra elementos desanexados que o navegador não pode coletar lixo e identifica o objeto JavaScript que ainda está fazendo referência ao elemento desanexado. Ao alterar o JavaScript para liberar o elemento, você reduz o número de elementos desanexados em sua página, aumentando o desempenho da página e a capacidade de resposta. | Depurar vazamentos de memória DOM com a ferramenta Elementos Desapegados |
| Recursos do Desenvolvedor | Mostra URLs de recurso para a página da Web. | Ferramenta Recursos do Desenvolvedor |
| Emulação de dispositivo | Use a ferramenta Emulation de Dispositivo , também chamada modo de simulação de dispositivo ou modo de dispositivo, para aproximar a aparência e a resposta de sua página em um dispositivo móvel. | Emular dispositivos móveis (Emulação de Dispositivo) |
| Ferramenta Elementos | Inspecione, edite e depure seu HTML e CSS. Você pode editar na ferramenta enquanto exibe as alterações ao vivo no navegador. Depure seu HTML usando a árvore DOM e inspecione e trabalhe no CSS para sua página da Web. | Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos |
| Inspecionar ferramenta | Use a ferramenta Inspecionar para ver informações sobre um item em uma página da Web renderizada. Quando a ferramenta Inspecionar estiver ativa, você passa o mouse sobre itens na página da Web e o DevTools adiciona uma sobreposição de informações e um realce de grade na página da Web. | Analisar páginas usando a ferramenta Inspecionar |
| Ferramenta problemas | A ferramenta Problemas analisa automaticamente a página da Web atual, relata problemas agrupados por tipo e fornece documentação para ajudar a explicar e resolve os problemas. | Localizar e corrigir problemas usando a ferramenta Problemas |
| Ferramenta JavaScript Profiler | Essa ferramenta foi substituída pela ferramenta Desempenho e pela ferramenta Memória . | Ferramenta JavaScript Profiler |
| Ferramenta Lighthouse | Use a ferramenta Lighthouse para identificar e corrigir problemas comuns que afetam o desempenho, a acessibilidade e a experiência do usuário do site. | Ferramenta Lighthouse |
| Ferramenta de mídia | Use essa ferramenta para exibir informações e depurar os players de mídia por guia do navegador. | Exibir e depurar informações de players de mídia |
| Ferramenta de memória | Encontre problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória, bloat de memória e coletas de lixo frequentes. | Corrigir problemas de memória |
| Ferramenta Inspetor de Memória | Inspecione JavaScript ArrayBuffer com o Inspetor de Memória. | Inspecionar um JavaScript ArrayBuffer com a ferramenta Inspetor de Memória |
| Ferramenta de rede | Use a ferramenta Rede para garantir que os recursos estejam sendo baixados ou carregados conforme o esperado. Inspecione as propriedades de um recurso individual, como os cabeçalhos HTTP, o conteúdo ou o tamanho. | Inspecionar a atividade de rede |
| Ferramenta de condições de rede | Use a ferramenta condições de rede para desabilitar o cache do navegador, definir a limitação de rede, definir a cadeia de caracteres do agente de usuário e definir codificações de conteúdo, como deflate, gzip e br. | Ferramenta de condições de rede |
| Ferramenta console de rede | Use a ferramenta Console de Rede para fazer alterações nas solicitações de rede (chamadas de rede) para ver por que elas falham. Altere e reproduza qualquer uma das solicitações de rede e faça chamadas detalhadas de API de rede. | Ferramenta console de rede |
| Ferramenta de bloqueio de solicitação de rede | Use a ferramenta de bloqueio de solicitação de rede para testar o bloqueio de solicitações de rede em um padrão de URL especificado e ver como uma página da Web se comporta. | Ferramenta de bloqueio de solicitação de rede |
| Ferramenta de desempenho | Analise o desempenho do runtime, que é o desempenho de sua página quando está em execução, em vez de carregar. | Introdução à ferramenta Desempenho |
| Ferramenta de monitor de desempenho | Fornece uma exibição em tempo real do desempenho do runtime de uma página da Web para determinar de onde vêm os problemas de desempenho, fazendo com que um site seja executado lentamente. Localiza se os problemas são provenientes do uso de memória alta ou CPU, cálculos de layout e estilo muito frequentes ou muitos nós DOM e ouvintes de eventos. | Medir o desempenho do runtime de uma página usando a ferramenta Monitor de Desempenho |
| Ferramenta de origem rápida | Use a ferramenta de origem rápida para exibir ou editar arquivos de origem ao usar uma ferramenta diferente da ferramenta Fontes . | Exibir ou editar arquivos de origem usando a ferramenta de origem rápida |
| Ferramenta Gravador | Use a ferramenta Gravador para registrar fluxos de usuário manualmente e reproduzi-los automaticamente para acelerar os testes e investigações de desempenho. | Registrar e reproduzir fluxos de usuário e medir o desempenho |
| Ferramenta de renderização | Use a ferramenta Renderização para ver como é sua página da Web com diferentes opções de exibição ou deficiências de visão. | Ferramenta de renderização, para ver como é uma página da Web com diferentes opções de exibição ou deficiências de visão |
| ferramenta Pesquisa | Use a ferramenta Pesquisa para encontrar arquivos de origem específicos para uma página da Web, incluindo arquivos HTML, CSS, JavaScript e imagens. | Localizar arquivos de origem para uma página usando a ferramenta Pesquisa |
| Ferramenta de segurança | Inspeciona a segurança de uma página. | Entender problemas de segurança usando a ferramenta Segurança |
| Ferramenta sensores | Simula diferentes orientações de dispositivo. | Simular a orientação do dispositivo com a ferramenta Sensores |
| Ferramenta Monitor do Mapas de Origem | Use a ferramenta Monitor do Mapas de Origem para monitorar seus mapas de origem. | Ferramenta Monitor do Mapas de Origem |
| Ferramenta De origem | Use a ferramenta Fontes para exibir, modificar e depurar o código JavaScript de front-end e inspecionar e editar os arquivos HTML e CSS que compõem a página da Web atual. | Visão geral da ferramenta de fontes |
| Ferramenta WebAudio | Use a ferramenta WebAudio para monitorar o tráfego do WebAudio. A ferramenta WebAudio usa a API do WebAudio. | Ferramenta WebAudio |
| Ferramenta WebAuthn | Use a ferramenta WebAuthn para criar e interagir com autenticadores virtuais baseados em software. | Emular autenticadores e depurar WebAuthn |
| Ferramenta de boas-vindas | A ferramenta De boas-vindas é aberta quando você abre o DevTools pela primeira vez. Ele exibe links para documentos de desenvolvedor, recursos mais recentes, Notas de Versão e uma opção para entrar em contato com a equipe do Microsoft Edge DevTools. | Ferramenta de boas-vindas |
Ferramentas experimentais
O Microsoft Edge DevTools potencialmente inclui ferramentas adicionais, se você selecionar a caixa de marcar do experimento em Experimentos de Configurações >de DevTools. Por exemplo:
| Mal-Intencionado | Objetivo | Artigo |
|---|---|---|
| Ferramenta de monitor de protocolo | Exibe as mensagens de protocolo DevTools enviadas e recebidas pelo DevTools para depurar a página inspecionada. | Monitor de Protocolo em recursos experimentais. |
Os menus Mais Ferramentas
O menu Mais ferramentas (+) na Barra de Atividades e na barra de ferramentas de Exibição Rápida é dinâmico: ele omite todas as ferramentas de guia que estão abertas nessa barra de ferramentas.
Ferramentas da Barra de Atividades vs. Ferramentas de Exibição Rápida
As ferramentas da Barra de Atividades são ferramentas que abrem na Barra de Atividades (o painel superior) por padrão. As ferramentas de Exibição Rápida são ferramentas que abrem no painel Modo de Exibição Rápida (o painel inferior) por padrão. Para mostrar ou ocultar o painel Exibição Rápida : quando o foco estiver em DevTools, pressione Esc.
Primeiro, o Menu de Comando lista as ferramentas da Barra de Atividades (indicadas pelo rótulo painel ) e, em seguida, as ferramentas de Exibição Rápida :
Para mover uma ferramenta para a outra barra de ferramentas, clique com o botão direito do mouse na guia da ferramenta e selecione Mover para a exibição rápida inferior, Mover para o lado Modo de Exibição Rápida, Mover para a Barra de Atividades superior ou Mover para a Barra de Atividades esquerda:
Para abrir o Menu de Comando, pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). Ou clique no botão Personalizar e controlar DevTools (
Executar comando.
Guias de ferramenta de fechamento
Para fechar uma guia de ferramentas que está em uma barra de ferramentas, clique com o botão direito do mouse na guia e selecione Remover da Barra de Atividades ou Remover da Exibição Rápida:
As ferramentas Elementos, Console e Fontes são guias permanentes e não podem ser fechadas ou movidas da Barra de Atividades para o painel Modo de Exibição Rápida . Você pode arrastar as guias para reordená-las na Barra de Atividades.
A ferramenta Console também é uma guia permanente na barra de ferramentas do Modo de Exibição Rápida . Por outro lado, a ferramenta Problemas na barra de ferramentas de Exibição Rápida pode ser removida.
Restaurando as guias de ferramenta padrão
Para restaurar todas as guias de ferramenta padrão na Barra de Atividades e na Exibição Rápida:
Em DevTools, selecione Personalizar e controlar DevTools (
) >Configurações (
) >Preferências.Clique no botão Restaurar padrões e atualizar . O DevTools é reiniciado e as guias padrão aparecem em ambas as barras de ferramentas.
Confira também
- Visão geral do DevTools – Semelhante ao artigo atual, mas com uma cobertura mais ampla, com uma introdução de nível superior ao DevTools.