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.
Comunicados da equipe Microsoft Edge DevTools
Usar o DevTools no modo de alto contraste do Windows
O DevTools do Microsoft Edge agora é exibido no modo de alto contraste quando o Windows está no modo de alto contraste.
Siga as instruções para ativar o modo de alto contraste no Windows. Para abrir o DevTools no Microsoft Edge, selecione F12 ou Ctrl+Shift+I. O DevTools é exibido no modo de alto contraste.
Observação: o DevTools atualmente dá suporte ao modo de alto contraste no Windows, mas não no macOS.
Chromium problema #1048378
Veja também:
Combinar os atalhos de teclado no DevTools com o Visual Studio Code
Com seus comentários e o rastreador de problemas públicos do Chromium, a equipe do DevTools do Microsoft Edge descobriu que você queria poder personalizar os atalhos de teclado no DevTools. No Microsoft Edge 84, agora você pode combinar atalhos de teclado no DevTools com o Visual Studio Code, que é apenas um dos recursos em que a equipe está trabalhando para personalização de atalhos.
Para experimentar o experimento:
No DevTools, abra Configurações pressionando ? ou clicando no ícone Configurações (
) no DevTools.Na seção Experiências, marque a caixa de seleção Habilitar a guia de configurações de atalhos de teclado personalizados (requer recarga).
Recarregar o DevTools.
Abra Configurações novamente e selecione a seção Atalhos .
Clique na lista suspensa Corresponder aos atalhos predefinidos, selecione DevTools (Padrão) e, em seguida, selecione Visual Studio Code.
Os atalhos de teclado no DevTools agora correspondem aos atalhos para ações equivalentes no Visual Studio Code.
Por exemplo, o atalho de teclado para pausar ou continuar executando um script no Visual Studio Code é F5. Com a predefinição DevTools (Padrão), esse mesmo atalho no DevTools é F8, mas com a predefinição do Visual Studio Code, esse atalho agora também é F5.
O recurso está disponível atualmente no Microsoft Edge 84 como um experimento, portanto, compartilhe seus comentários com a equipe!
Chromium problema #174309
Veja também:
Depuração remota de emuladores do Surface Duo
Agora você pode depurar remotamente seu conteúdo da Web que está sendo executado no emulador Surface Duo usando todo o poder do Microsoft Edge DevTools.
Com o emulador Surface Duo, você pode testar como seu conteúdo da Web é renderizado em uma nova classe de dispositivos dobráveis e de tela dupla. O emulador executa o sistema operacional Android e fornece o aplicativo Microsoft Edge para Android. Carregar o conteúdo da Web no aplicativo Microsoft Edge e depurá-lo com o DevTools:
A edge://inspect página em uma instância da área de trabalho do Microsoft Edge mostra o SurfaceDuoEmulator com uma lista das guias abertas ou PWAs que estão em execução no emulador Surface Duo:
Clique em inspecionar para a guia ou PWA que você deseja depurar para abrir o DevTools. Siga o guia passo a passo para depurar remotamente seu conteúdo da Web no emulador do Surface Duo: Depurar remotamente emuladores do Surface Duo.
Redimensione o painel de Visualização Rápida do DevTools com mais facilidade
No Microsoft Edge 83 ou anterior, você redimensionava a Gaveta (agora painel de Visualização Rápida ) passando o mouse dentro da barra de ferramentas da Gaveta. A Gaveta se comportou de forma diferente dos outros controles de redimensionamento para painéis no DevTools, onde você passa o mouse sobre a borda do painel para redimensioná-lo. A imagem a seguir mostra como o redimensionamento da Gaveta funcionava no Microsoft Edge versão 83 ou anterior:
A partir do Microsoft Edge 84, você pode redimensionar a Gaveta passando o mouse sobre a borda. Essa alteração alinha o comportamento de redimensionamento da Gaveta com outros painéis no DevTools. A imagem a seguir mostra como funciona o redimensionamento da Gaveta no Microsoft Edge 84 ou posterior:
Chromium problema #1076112
Botões de navegação de screencasting exibir foco
Ao depurar remotamente um dispositivo Android, um dispositivo Windows 10 ou posterior ou um emulador do Surface Duo, você pode alternar a transmissão de tela com o ícone 
no canto superior esquerdo do DevTools. Com a transmissão de tela habilitada, você pode navegar pela guia no Microsoft Edge no dispositivo remoto da janela do DevTools.
No Microsoft Edge 84, esses botões de navegação agora também podem ser acessados pelo teclado. Por exemplo, pressionar Shift+Tab na barra de URL transmitida pela tela coloca o foco no botão Atualizar :
Chromium problema #1081486
O painel de detalhes do painel de rede agora está acessível
No Microsoft Edge 84, o painel Detalhes na ferramenta Rede agora ganha foco quando você o abre para um recurso no Log de Rede. Essa alteração permite que os leitores de tela leiam e interajam com o conteúdo do painel Detalhes .
Chromium problema #963183
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge 84 que foram contribuídos para o projeto código aberto Chromium.
Corrigir problemas do site com a nova ferramenta Problemas na Gaveta do DevTools
A nova ferramenta Problemas na Gaveta (agora painel Visualização Rápida ) na parte inferior do DevTools reduz a fadiga de notificação e a desordem do Console. Atualmente, o Console é o local central para desenvolvedores de sites, bibliotecas, estruturas e Microsoft Edge registrarem mensagens, avisos e erros. A ferramenta Issues agrega avisos do navegador de forma estruturada, agregada e acionável. A ferramenta Issues é vinculada aos recursos afetados no DevTools e fornece orientações sobre como corrigir os problemas.
Com o tempo, mais avisos serão exibidos na ferramenta Problemas em vez de no Console, para simplificar as mensagens do Console .
Para começar, consulte Localizar e corrigir problemas usando a ferramenta Problemas.
Chromium problema #1068116
Exibir informações de acessibilidade na dica de ferramenta do Modo de Inspeção
A dica de ferramenta Modo de Inspeção agora indica se o elemento tem um nome e uma função acessíveis e é focalizável no teclado.
Chromium problema #1040025
Veja também:
- Analisar páginas usando a ferramenta Inspecionar
- Axe: Name Role Value - sobre nome e função acessíveis, em webhint.io.
- Axe: Keyboard - sobre o teclado focalizável, em webhint.io.
Atualizações do painel de desempenho
Veja também:
Exibir as informações de tempo total de bloqueio no rodapé
Depois de registrar o desempenho da carga, a ferramenta Desempenho agora mostra informações de TBT (Tempo Total de Bloqueio) no rodapé. O TBT é uma métrica de desempenho de carga que ajuda a quantificar quanto tempo uma página leva para se tornar utilizável. O TBT mede essencialmente por quanto tempo uma página só parece ser utilizável (porque o conteúdo é renderizado na tela); mas a página não é realmente utilizável, porque o JavaScript está bloqueando o thread principal e, portanto, a página não responde à entrada do usuário. O TBT é a principal métrica para aproximar o atraso da primeira entrada.
Para obter informações sobre o Tempo Total de Bloqueio, não use o fluxo de trabalho do
para registrar o desempenho do carregamento da página.
Em vez disso, selecione o ícone Gravar
, recarregue manualmente a página, aguarde o carregamento da página e pare a gravação.
Se Total Blocking Time: Unavailable for exibido, o Microsoft Edge DevTools não obteve as informações necessárias dos dados de criação de perfil internos no Microsoft Edge.
Chromium problema #1054381
Veja também:
Eventos de Mudança de Layout na nova seção Experiência
A nova seção Experiência da ferramenta Desempenho ajuda a detectar mudanças de layout. O CLS (Cumulative Layout Shift) é uma métrica que ajuda a quantificar a instabilidade visual indesejada.
Clique no evento Mudança de Layout para exibir os detalhes da mudança de layout no painel Resumo . Passe o mouse sobre os campos Movido de e Movido para para visualizar onde ocorreu a mudança de layout.
Veja também:
Terminologia de promessa mais precisa no Console
Ao registrar um Promise, o Console forneceu PromiseStatus incorretamente o valor definido como resolved.
O Console agora usa o termo fulfilled, que se alinha com a Promise especificação. Para obter mais informações sobre a Promise especificação, consulte Estados e destinos no GitHub.
V8 problema #6751
Veja também:
Atualizações do painel de estilos
Atualização de agosto de 2026: o artigo "Editar estilos de fonte CSS e configurações no painel Estilos" e sua caixa de seleção de experimento foram removidos.
Suporte para o reverter palavra-chave
A interface do usuário de preenchimento automático do painel Estilos agora detecta a palavra-chave CSS de reversão, que reverte o valor em cascata de uma propriedade para o valor anterior aplicado ao estilo do elemento.
Chromium problema #1075437
Visualizações de imagens
Passe o mouse sobre um background-image valor no painel Estilos para exibir uma visualização da imagem em uma dica de ferramenta.
Chromium problema #1040019
O Seletor de Cores agora usa notação de cores funcional separada por espaço
O CSS Color Module Nível 4 especifica que as funções de cor, como rgb(), devem dar suporte a argumentos separados por espaço. Por exemplo, rgb(0, 0, 0) é equivalente a rbg(0 0 0).
Quando você seleciona cores com o Seletor de Cores ou alterna entre representações de cores no painel Estilos mantendo pressionada a tecla Shift e selecionando o valor da cor da tela de fundo , a sintaxe do argumento separado por espaço é exibida.
Você também deve exibir a sintaxe no painel Computado e na dica de ferramenta Modo de Inspeção .
O DevTools do Microsoft Edge está usando a nova sintaxe porque os próximos recursos do CSS, como color(), não dão suporte à sintaxe de argumento separada por vírgula preterida.
A sintaxe do argumento separado por espaço tem suporte na maioria dos navegadores há algum tempo. Consulte Posso usar: Notações de cores funcionais separadas por espaço?
Chromium problema #1072952
Substituição do painel Propriedades no painel Elementos
O painel Propriedades na ferramenta Elementos está preterido. Execute console.dir($0) no Console .
Referências
Suporte a atalhos de aplicativo no painel Manifesto
Na ferramenta Aplicativo , a página Manifesto agora mostra atalhos de aplicativos. Os atalhos de aplicativo ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em um aplicativo Web. O menu de atalhos do aplicativo é mostrado somente para Aplicativos Web Progressivos instalados na área de trabalho ou no dispositivo móvel do usuário.
Veja também:
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 Kayce Basques.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.