Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
O DevTools fornece mais de 30 ferramentas, consistindo em ferramentas Padrão e Mais ferramentas.
Ferramentas padrão
Por padrão, as seguintes ferramentas estão listadas na Barra de Atividades na parte superior do DevTools:
-
Ferramenta Inspecionar -
Emulação do dispositivo -
Bem-vindo -
Elementos -
Console -
-
Rede -
Desempenho -
Memória -
Aplicativo
Visão geral das ferramentas padrão
| Mal-Intencionado | Objetivo | Artigo |
|---|---|---|
|
Inspecionar Inspecionar |
Use a ferramenta Inspecionar para ver informações sobre um item em uma página da Web renderizada. Quando a ferramenta Inspecionar está ativa, você passa o mouse sobre os 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 |
|
Emulação do dispositivo |
Use a ferramenta Emulação de Dispositivo , também chamada de Modo de Simulação de Dispositivo ou Modo de Dispositivo, para aproximar a aparência e a resposta da sua página em um dispositivo móvel. | Emular dispositivos móveis (Emulação do dispositivo) |
|
Bem-vindo |
A ferramenta Bem-vindo é aberta quando você abre o DevTools pela primeira vez. Ele exibe links para documentos do desenvolvedor, recursos mais recentes, notas de versão e uma opção para entrar em contato com a equipe do DevTools do Microsoft Edge. | Ferramenta de boas-vindas |
|
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 da sua página da Web. | Inspecionar, editar e depurar HTML e CSS com a ferramenta Elementos |
|
Console |
Uma linha de comando inteligente e avançada dentro do DevTools. Uma ótima ferramenta complementar para usar com outras ferramentas. Fornece uma maneira poderosa de criar scripts de funcionalidade, inspecionar a página da web atual e manipular a página da web atual usando JavaScript. | Visão geral do console |
|
|
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 Fontes |
|
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 cabeçalhos HTTP, conteúdo ou tamanho. | Inspecionar atividade de rede |
|
Desempenho |
Analise o desempenho do tempo de execução, que é o desempenho da página quando está em execução, em vez de carregar. | Analisar o desempenho do tempo de execução (tutorial) |
|
Memória |
Localize problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória, inchaço de memória e coletas frequentes de lixo. | Corrigir problemas de memória |
|
Aplicativo |
Use a ferramenta Aplicativo para gerenciar o armazenamento de páginas de aplicativos Web, incluindo manifesto, trabalhos de serviço, armazenamento local, cookies, armazenamento em cache e serviços em segundo plano. | A ferramenta Aplicativo, para gerenciar o armazenamento |
As ferramentas Elementos, Console e Fontes (guias) são permanentes na Barra de Atividades. As outras guias de ferramentas podem ser removidas ou movidas para a barra de ferramentas Visualização Rápida .
Mais ferramentas
O botão Mais ferramentas (
) na Barra de Atividades lista ferramentas adicionais e opcionais que podem ser adicionadas à Barra de Atividades.
Há também um botão Mais ferramentas () na barra de ferramentas de Visualização Rápida na parte inferior do DevTools. Para mostrar ou ocultar o painel Visualização Rápida , pressione Esc; ou clique em Personalizar e controlar o DevTools(...) no canto superior direito e clique em Alternar painel de Visualização Rápida.
Visão geral das ferramentas no menu Mais ferramentas
| Mal-Intencionado | Objetivo | Artigo |
|---|---|---|
| Modo 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 de DOM ou z-index. | Navegue pelas camadas da página da Web, z-index e DOM usando a ferramenta 3D View |
| Animações | Inspecione e modifique efeitos de animação CSS usando o Inspetor de Animação na ferramenta Animações . | Inspecionar e modificar efeitos de animação CSS |
| Alterações | Rastreia todas as alterações feitas no CSS ou JavaScript no DevTools. Mostra quais alterações fazer em seus arquivos de origem reais depois de usar o DevTools para modificar seus arquivos de página da Web enviados do servidor. | Acompanhar as alterações nos arquivos usando a ferramenta Alterações |
| Cobertura | Ajudar você a encontrar código JavaScript e CSS não utilizado, 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 utilizado com a ferramenta Cobertura |
| Analisador de falhas | Analise as falhas do seu aplicativo Web. Você pode inserir um rastreamento de pilha de produção JavaScript, como para exceções JavaScript não fatais, e, em seguida, ter seus mapas de origem aplicados ao rastreamento de pilha para que você possa depurar mais rapidamente. | Ferramenta Analisador de Falhas |
| Visão geral do CSS | Ajudar você a entender melhor o CSS da sua página e identificar possíveis melhorias. | Ferramenta de visão geral do CSS |
| Recursos de desenvolvedor | Mostra as URLs de recursos para a página da Web. | Ferramenta de recursos do desenvolvedor |
| Issues | 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 resolver os problemas. | Encontrar e corrigir problemas usando a ferramenta Problemas |
| Farol | Use a ferramenta Lighthouse para identificar e corrigir problemas comuns que afetam o desempenho, a acessibilidade e a experiência do usuário do seu site. | Ferramenta Farol |
| Mídia | Use essa ferramenta para exibir informações e depurar os reprodutores de mídia por guia do navegador. | Exibir e depurar informações de players de mídia |
| Inspetor de memória | Inspecione o JavaScript ArrayBuffer com o inspetor de memória. | Inspecionar um ArrayBuffer do JavaScript com a ferramenta Inspetor de memória |
| 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 do usuário e definir Content-Encodings, como deflate, gzip e br. | Ferramenta Condições de rede |
| 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 à API de rede. | Ferramenta Console de Rede |
| 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 para um padrão de URL especificado e ver como uma página da Web se comporta. | Ferramenta de bloqueio de solicitação de rede |
| Monitor de desempenho | Fornece uma exibição em tempo real do desempenho do tempo de execução de uma página da Web, para determinar de onde vêm os problemas de desempenho, fazendo com que um site seja executado lentamente. Descobre se os problemas são de alto uso de memória ou CPU, cálculos de layout e estilo muito frequentes ou muitos nós DOM e ouvintes de eventos. | Medir o desempenho do tempo de execução de uma página usando a ferramenta Monitoramento de desempenho |
| Fonte rápida | Use a ferramenta Fonte 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 Fonte rápida |
| Gravador | Use a ferramenta Gravador para gravar os fluxos de usuários manualmente e, em seguida, reproduzi-los automaticamente para acelerar os testes e as investigações de desempenho. | Grave e reproduza fluxos de usuários e meça o desempenho |
| Renderização | Use a ferramenta Renderização para ver a aparência da sua página da Web com diferentes opções de exibição ou deficiências visuais. | Ferramenta de renderização, para ver a aparência de uma página da Web com diferentes opções de exibição ou deficiências visuais |
| Pesquisa | Use a ferramenta Pesquisar para localizar arquivos de origem específicos para uma página da Web, incluindo HTML, CSS, JavaScript e arquivos de imagem. | Localizar arquivos de origem para uma página usando a ferramenta Pesquisar |
| Segurança | Inspeciona a segurança de uma página. | Entender os problemas de segurança usando a ferramenta Segurança |
| Sensores | Substitua a geolocalização, simule a orientação do dispositivo, force eventos de toque ao clicar e emule o estado ocioso do dispositivo. | Emular sensores do dispositivo |
| Monitor de mapas de origem | Use a ferramenta Monitor de Mapas de Origem para monitorar seus mapas de origem. | Ferramenta Monitor de Mapas de Origem |
| WebAudio | Use a ferramenta WebAudio para monitorar o tráfego do WebAudio. A ferramenta WebAudio usa a API WebAudio. | Ferramenta WebAudio |
| WebAuthn | Use a ferramenta WebAuthn para criar e interagir com autenticadores virtuais baseados em software. | Emular autenticadores e depurar WebAuthn |
O menu Mais ferramentas (+) na Barra de Atividades e na barra de ferramentas Visualização Rápida é dinâmico: ele omite todas as ferramentas de guia que estão abertas nessa barra de ferramentas.
Outras formas de acessar as ferramentas
Os recursos a seguir são maneiras adicionais de acessar as ferramentas:
O painel Visualização rápida é uma barra de ferramentas adicional e uma área para segurar ferramentas, abaixo ou à direita do painel Barra de atividades .
O Menu de Comando é uma forma de usar diretamente os recursos das ferramentas.
As páginas de Configurações podem ativar recursos adicionais de ferramentas.
Ferramentas experimentais
O DevTools do Microsoft Edge potencialmente inclui ferramentas adicionais, se você marcar a caixa de marca do experimento nos Experimentos de configurações > do DevTools. Por exemplo:
| Mal-Intencionado | Objetivo | Artigo |
|---|---|---|
| Monitor de protocolo | Exibe as mensagens de protocolo do DevTools enviadas e recebidas pelo DevTools para depurar a página inspecionada. | Monitor de Protocolo em recursos experimentais. |
Ferramentas da Barra de Atividades vs. Ferramentas de Visualização Rápida
As ferramentas da Barra de Atividades são ferramentas que são abertas na Barra de Atividades (o painel superior) por padrão. As ferramentas de Visualização rápida são ferramentas que abrem no painel Visualização rápida (o painel inferior) por padrão. Para mostrar ou ocultar o painel Visualização Rápida : quando o foco estiver no DevTools, pressione Esc.
O Menu de Comando lista primeiro as ferramentas da Barra de Atividades (indicadas pelo rótulo do Painel ) e, em seguida, as ferramentas de Visualização Rápida :
Para mover uma ferramenta para 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 a Exibição Rápida lateral ou Mover para a Barra de Atividades superior:
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 o DevTools (
) e selecione Executar comando.
Fechando guias de ferramentas
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 Visualização Rápida . Você pode arrastar suas guias para reordená-las na Barra de Atividades.
A ferramenta Console também é uma guia permanente na barra de ferramentas de Visualização Rápida . Por outro lado, a ferramenta Problemas na barra de ferramentas Visualização Rápida pode ser removida.
Restaurando as guias de ferramentas padrão
Para restaurar todas as guias de ferramentas padrão na Barra de Atividades e na Exibição Rápida:
No DevTools, selecione Personalizar e controlar o 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 cobertura mais ampla, com uma introdução de alto nível ao DevTools.