Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.
Melhorando a localização do DevTools
Para atender às suas necessidades de tradução, a equipe do DevTools do Microsoft Edge está focada em melhorar a qualidade da tradução. A partir do Microsoft Edge versão 87, várias cadeias de caracteres e termos são bloqueados e não são alterados, mesmo quando o restante do DevTools é exibido em outros idiomas. A lista de cadeias de caracteres e termos afetados inclui o seguinte:
- As cadeias de caracteres na ferramenta Farol .
- O termo
service worker. - Alguns dos filtros da ferramenta Rede , como
URL,XHR,JSeCSS. - A API de Utilitários do Console de US$ 0 .
$0 agora está disponível no Console para usuários em versões localizadas do DevTools. Agradecemos à comunidade global de desenvolvedores por ajudar a melhorar a localização do Microsoft Edge DevTools. Continue a enviar comentários sobre a qualidade da localização para melhorar o suporte para DevTools em todas as localidades. Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte o Problema #1136655.
Veja também:
Mover ferramentas entre os painéis superior e inferior
O DevTools agora dá suporte à movimentação de ferramentas entre os painéis superior e inferior. Personalize seu DevTools e melhore sua produtividade exibindo qualquer combinação de duas ferramentas ao mesmo tempo. Por exemplo, exiba as ferramentas Elementos e Fontes ao mesmo tempo (movendo a ferramenta Fontes para a parte inferior).
Para mover qualquer ferramenta superior para a parte inferior, clique com o botão direito do mouse em uma guia e selecione Mover para a parte inferior:
Para mover qualquer ferramenta inferior para a parte superior, clique com o botão direito do mouse em uma guia e selecione Mover para a parte superior:
Para obter o histórico desse recurso no Chromium projeto de código aberto, consulte o Problema #1075732.
Veja também:
- Ferramentas da Barra de Atividades versus ferramentas de Visualização Rápida em Sobre a lista de ferramentas
Salvar e exportar usando o Console de Rede
A ferramenta Console de Rede agora tem compatibilidade aprimorada com os esquemas Postman v2.1 e OpenAPI v2 .
A ferramenta Console de Rede agora dá suporte às seguintes ações:
- Salve e exporte Coleções e Ambientes.
- Edite e exporte conjuntos de variáveis de ambiente na ferramenta Console de rede.
Inserindo um nome para o novo ambiente:
Selecionando o formato do novo ambiente:
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Salve e exporte coleções, ambientes e variáveis de ambiente no Microsoft Compose e envie solicitações de API Web usando a ferramenta Console de rede.
Para obter o histórico, no Chromium projeto de código aberto, consulte o Problema #1093687.
Ferramentas de Grade CSS aprimoradas
O DevTools do Microsoft Edge agora dá suporte aos seguintes recursos para inspecionar, exibir e depurar suas grades CSS.
Exiba uma sobreposição de grade simplificada usando a ferramenta Inspecionar ou obtenha informações mais detalhadas com sobreposições persistentes.
Para ativar sobreposições de grade persistentes, clique no ícone de grade ao lado de um elemento de contêiner de grade na ferramenta Elementos ou clique na grade na ferramenta Layout .
Você pode habilitar sobreposições persistentes para várias grades.
A nova ferramenta Layout permite alternar facilmente sobreposições de grade e configurar a aparência e o conteúdo de cada uma.
Os recursos são ativados por padrão.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Para obter o histórico, no Chromium projeto de código aberto, consulte o Problema #1047356.
A equipe do DevTools do Microsoft Edge está colaborando com a equipe do Chrome DevTools e com a comunidade do Chromium para adicionar novos recursos de ferramentas do flexbox ao DevTools. Para obter atualizações sobre as ferramentas do flexbox no Chromium projeto de código aberto, consulte o Problema #1136394.
Personalize os atalhos do teclado em Configurações
Agora você pode personalizar o atalho do teclado para qualquer ação no DevTools. Desde a versão 84 do Microsoft Edge, você pode escolher entre as predefinições do Visual Studio Code e do DevTools (padrão) para atalhos de teclado. A partir do Microsoft Edge versão 87, você pode personalizar ainda mais os atalhos de teclado.
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
- Edite o atalho de teclado para uma ação do DevTools em Personalizar atalhos de teclado.
Para obter o histórico, no Chromium projeto de código aberto, consulte o Problema #174309.
Apresentando as Ferramentas do Microsoft Edge para a extensão Visual Studio Code
As extensões Elementos para o Visual Studio Code e Rede para o Visual Studio Code agora estão mescladas na nova extensão Microsoft Edge Developer Tools para o Visual Studio Code. Use o Microsoft Edge DevTools para as atividades a seguir sem sair do Microsoft Visual Studio Code.
- Depurar o DOM
- Editar CSS
- Inspecionar o tráfego de rede
Com a extensão, inicie o Microsoft Edge, conecte-se a uma instância existente do navegador ou use um navegador sem periféricos diretamente do editor. Para começar a contribuir e registrar problemas com seus comentários sobre essa extensão, consulte o repositório do Microsoft Edge Developer Tools para o Visual Studio Code no GitHub.
Usando a extensão no modo de navegador completo:
Usando a extensão no modo sem periféricos:
Para obter mais informações, consulte Extensão do DevTools do Microsoft Edge para Visual Studio Code.
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge que foram contribuídos para o projeto de código aberto do Chromium.
Nova ferramenta WebAuthn
Em versões anteriores do Microsoft Edge, não havia suporte nativo para depuração do WebAuthn. Você precisava de autenticadores físicos para testar seu aplicativo da Web com a API de autenticação da Web. Com a nova ferramenta WebAuthn , você pode fazer o seguinte sem o uso de nenhum autenticador físico:
- Emular autenticadores.
- Personalize os atributos dos autenticadores.
- Inspecionar estados de autenticadores.
Você pode emular autenticadores e depurar a API de autenticação da Web com a nova ferramenta WebAuthn . Para abrir a ferramenta WebAuthn, clique no ícone >Personalizar e controlar DevTools (...) Mais ferramentas>WebAuthn. Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte o Problema #1034663.
Abrindo a ferramenta WebAuthn :
A ferramenta WebAuthn :
Para obter mais informações, consulte Emular autenticadores e depurar WebAuthn.
Atualizações da ferramenta Elementos
Veja também:
Exibir o painel Barra lateral calculado no painel Estilos
Alternar o painel Computado no painel Estilos . O painel Computado no painel Estilos é recolhido por padrão. Para exibir ou ocultar o painel Computado no painel Estilos , clique no botão Mostrar Estilos Computados na barra lateral
).
Abrindo o painel da barra lateral Computado :
O painel da barra lateral Computado :
Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte o Problema #1073899.
Veja também:
- Exibir apenas o CSS que é realmente aplicado a um elemento na referência de recursos CSS
Agrupando propriedades CSS no painel Computado
Para exibir o CSS aplicado com menos rolagem, agrupe as propriedades CSS por categorias no painel Computado . Você também pode se concentrar seletivamente em um conjunto de propriedades relacionadas enquanto inspeciona seu CSS. Na ferramenta Elementos , selecione um elemento. Para agrupar (ou desagrupar) as propriedades CSS, alterne a caixa de seleção Grupo .
Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte Problemas #1096230, #1084673 e #1106251.
Veja também:
- Exibir apenas o CSS que é realmente aplicado a um elemento na referência de recursos CSS
Lighthouse 6.4 na ferramenta Lighthouse
A ferramenta Lighthouse agora está executando o Lighthouse 6.4. Para obter uma lista completa de alterações, consulte as notas de versão do Lighthouse. Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte o Problema #772558.
Veja também:
performance.mark() na seção Timings
A seção Intervalos de uma gravação na ferramenta Desempenho agora marca performance.mark()eventos. Para experimentar esse recurso e medir o desempenho do código JavaScript, adicione performance.mark() eventos ao código.
O código a seguir adiciona start marcadores de end desempenho antes e depois de um for loop:
performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
console.log(i);
}
performance.mark('end');
Em seguida, abra a ferramenta Desempenho e consulte a seção Intervalos para gravar seu código JavaScript. Os performance.mark() eventos adicionados agora são exibidos na gravação.
Novos tipos de recursos e filtros de URL na ferramenta Rede
Use as novas resource-type palavras-chave na url ferramenta Rede para filtrar solicitações de rede. Por exemplo, use resource-type:image para se concentrar nas solicitações de rede que são imagens:
Para descobrir palavras-chave mais especiais, como resource-type e url, consulte filtrar solicitações por propriedades.
Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte os Problemas #1121141 e #1104188.
Atualizações da exibição de detalhes do quadro
Na ferramenta Aplicativo , na lista de páginas à esquerda, a página inferior é Quadros, que geralmente lista um quadro chamado superior.
Exibir relatórios COEP e COOP para o ponto de extremidade
Na ferramenta Aplicativo , na lista de páginas à esquerda, a página inferior é Quadros, que geralmente lista um quadro chamado superior. Selecione o quadro para exibir a exibição de detalhes do quadro, que inclui a seção Isolamento de & segurança .
Na seção Isolamento de & de Segurança da página de detalhes do quadro, exiba o ponto de extremidade COEP (Política de Incorporação de Origem Cruzada) e COO (Política de Abertura de Origem Cruzada). reporting to A API de relatório define Report-To, que é um novo cabeçalho HTTP que fornece uma maneira de especificar os pontos de extremidade do servidor para o navegador enviar avisos e erros.
Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte o Problema #1051466.
Veja também:
- Exibir detalhes do quadro aberto para janelas abertas em Novidades do DevTools (Microsoft Edge 88)
- A ferramenta Aplicativo, para gerenciar o armazenamento
Exibir o modo somente relatório COEP e COOP
Na ferramenta Aplicativo , na lista de páginas à esquerda, a página inferior é Quadros, que geralmente lista um quadro chamado superior. Selecione o quadro para exibir a exibição de detalhes do quadro, que inclui a seção Isolamento de & segurança .
A seção Isolamento de & de Segurança da página de detalhes do quadro agora exibe o report-only rótulo para COEP e COOP que estão definidos no report-only modo.
Para atualizações em tempo real sobre esse recurso no Chromium projeto de código aberto, consulte o Problema #1051466.
Veja também:
- Exibir detalhes do quadro aberto para janelas abertas em Novidades do DevTools (Microsoft Edge 88)
- A ferramenta Aplicativo, para gerenciar o armazenamento
Exibir e corrigir problemas de contraste de cores na ferramenta de visão geral do CSS
A ferramenta de visão geral do CSS agora exibe uma lista de elementos em sua página que têm problemas de contraste de cor.
Por exemplo, a página de Demonstração de Cores Acessíveis (https://css-overview-accessible-colors-demo.glitch.me) (404) tem um exemplo de um problema de contraste de cor. (Glitch.me hospedagem do projeto terminou em 8 de julho de 2025. Este site de teste pode ser movido para https://github.com/MicrosoftEdge/Demos, incluindo hospedagem em github.io.)
Para exibir uma lista de elementos com problemas de contraste de cor, em Problemas de contraste, clique em Texto. Para abrir o elemento na ferramenta Elementos , clique em um elemento na lista.
Para ajudar a corrigir problemas de contraste, o Microsoft Edge DevTools fornece sugestões de cores automaticamente; confira Sugestão de cor acessível no painel Estilos em Novidades do DevTools (Microsoft Edge 86).
Atualização: esse recurso foi lançado e não é mais experimental.
Veja também:
Para obter o histórico, no Chromium projeto de código aberto, consulte o Problema #1120316.
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Jecelyn Yeen.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.