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
Recursos de depuração de grade CSS
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 depuração de grade CSS ao DevTools. Agora você pode exibir números de linha de grade, lacunas de grade e linhas de grade estendidas como uma sobreposição na página. Além disso, mais melhorias nas ferramentas de grade serão disponibilizadas em breve.
Atualização: esse recurso foi lançado e não é mais experimental.
Para experimentar o experimento com um exemplo, consulte Exemplo do planejador de Grade CSS.
Chromium problema #1047356
Veja também:
Editar e reproduzir solicitações com o console de rede
Agora você pode usar Editar e Reproduzir em solicitações no Log de Rede usando o Console de Rede. Abra o Log de Rede, clique com o botão direito do mouse e selecione Editar e Reproduzir:
A nova ferramenta Console de Rede é aberta no painel Visualização Rápida na parte inferior do DevTools e preenche automaticamente com informações para a solicitação HTTP. Para exibir a resposta retornada do servidor, edite a solicitação (se necessário) e selecione Enviar.
Você também pode usar o Console de Rede para criar e enviar solicitações HTTP diretamente do DevTools.
Dica: Para exibir o Console de rede no painel principal (superior) em vez de no painel Visualização rápida , consulte Mover ferramentas entre os painéis, abaixo.
Atualização: esse recurso foi lançado e não é mais experimental.
Chromium problema #1093687
Trabalho de serviço respondCom eventos na guia Intervalo
A guia Tempo da ferramenta Rede agora inclui respondWith eventos de trabalho de serviço. O respondWith evento de trabalho de serviço mostra a duração desde o momento imediatamente antes de o manipulador de eventos de trabalho fetch de serviço começar a ser executado até o momento em que a respondWith promessa do fetch manipulador é liquidada.
Expanda fetchResposta recebida para exibir informações adicionais da resposta, como CacheStorageCacheName, serviceWorkerResponseSource, e ResponseTime.
Chromium problema #1066579
Veja também:
- Exibir a relação de tempo das solicitações na referência de recursos de rede.
- Exibir o detalhamento de tempo de uma solicitação na referência de recursos de rede.
comentários de webhint no painel Issues
Atualização de julho de 2026: a webhint foi removida do Microsoft Edge 151.
Webhint é uma ferramenta de código aberto que fornece feedback em tempo real sobre acessibilidade, compatibilidade entre navegadores, segurança, desempenho, PWAs e outros problemas comuns de desenvolvimento web de sites. Você pode exibir comentários de webhint no painel Issues .
Para habilitar o experimento, consulte Ativar ou desativar um experimento e marque a caixa de seleção ao lado de Habilitar webhint. Abra o painel Problemas para exibir comentários da webhint.
Chromium problema #1070378
Veja também:
Mover ferramentas entre painéis
Anteriormente, ferramentas como Elementos e Rede só podiam ser abertas no painel principal (superior) do DevTools. Da mesma forma, ferramentas como Modo de Exibição 3D e Problemas só podiam ser abertas na Gaveta (agora painel de Visualização Rápida ) na parte inferior do DevTools. Agora você pode personalizar o layout do DevTools movendo ferramentas entre os painéis superior e inferior.
Atualização: esse recurso foi lançado e não é mais experimental.
Chromium problema #897944
Veja também:
- Sobre a Barra de Atividades e as ferramentas de Visualização Rápida em Visão geral do DevTools.
Dica de ferramenta de Iniciador aprimorada no painel Rede
No Microsoft Edge 83 e 84, dicas de ferramenta para a coluna Iniciador, que mostra a causa da solicitação de recurso, no Log de Rede exibido com uma barra de rolagem horizontal. Você só conseguia exibir a pilha de chamadas que iniciou a solicitação rolando horizontalmente na dica de ferramenta.
A partir do Microsoft Edge 85, agora você pode exibir a pilha de chamadas do iniciador na dica de ferramenta sem rolar horizontalmente.
Chromium problema #1069404
Anúncios do projeto Chromium
As seções a seguir anunciam recursos adicionais disponíveis no Microsoft Edge 85 que foram contribuídos para o projeto código aberto Chromium.
Edição de estilo das estruturas CSS-in-JS
O painel Estilos agora tem melhor suporte para edição de estilos que foram criados com as APIs CSS Object Model (CSSOM). Muitas estruturas e bibliotecas CSS-in-JS usam as APIs CSSOM internamente para construir estilos.
Agora você pode editar estilos que foram adicionados no JavaScript usando a interface, que é uma nova maneira de criar e distribuir estilos reutilizáveis ao usar o CSSStyleSheetShadow DOM. Consulte A CSSStyleSheet Interface no CSS Object Model (CSSOM).
Por exemplo, os h1 estilos adicionados com CSSStyleSheet (APIs CSSOM) não eram editáveis anteriormente. Os estilos são editáveis agora no painel Estilos .
Experimente esse recurso com um exemplo que usa CSS-in-JS. Consulte Edição de estilo para estruturas CSS-in-JS.
Chromium problema #946975
Farol 6 no painel Farol
O painel do Farol agora está executando o Lighthouse 6. Para obter uma lista completa de todas as alterações, consulte as notas de versão v6.0.0.
O Lighthouse 6.0 apresenta três novas métricas ao relatório: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Total Blocking Time (TBT).
A fórmula de pontuação de desempenho também foi reponderada para refletir melhor a experiência de carregamento do usuário.
Chromium problema #772558
Veja também:
Primeira descontinuação significativa do Paint
O First Meaningful Paint (FMP) foi preterido no Lighthouse 6.0. O FMP também foi removido da ferramenta Desempenho . Largest Contentful Paint é o substituto recomendado para FMP.
Chromium problema #1096008
Veja também:
- Primeira Tinta Significativa (FMP) no Glossário no MDN.
- Largest Contentful Paint (LCP) no glossário do MDN.
- LargestContentfulPaint no MDN.
- Ferramenta Farol
Suporte para novos recursos JavaScript
O DevTools agora tem melhor suporte para alguns dos recursos mais recentes da linguagem JavaScript:
Preenchimento automático da sintaxe de encadeamento opcional . O preenchimento automático de propriedade no Console agora dá suporte à
name.sintaxe de encadeamento opcional, por exemplo,name?.agora funciona além de ename[.Realce de sintaxe para campos privados. Os campos de classe particular agora são realçados corretamente na sintaxe e bem impressos no painel Fontes .
Realce de sintaxe para o operador coalescente Nullish. O DevTools agora imprime corretamente o operador de coalescência nulo no painel Fontes .
Chromium problemas #1073903, #1083214, #1083797
Veja também:
Novos avisos de atalho de aplicativo no painel Manifesto
Na ferramenta Aplicativo , os atalhos de aplicativo ajudam os usuários a iniciar rapidamente tarefas comuns ou recomendadas em um aplicativo Web.
Na ferramenta Aplicativo , o painel Manifesto agora mostra avisos para as seguintes condições:
- Quando os ícones de atalho do aplicativo forem menores que 96x96 pixels.
- Quando os ícones de atalho do aplicativo e os ícones de manifesto não são quadrados (já que os ícones são ignorados).
Chromium problema #955497
Veja também:
Exibição consistente do painel Computado
O painel Computado na ferramenta Elementos agora é exibido consistentemente como um painel em todos os tamanhos de viewport. Anteriormente, o painel Computado se mesclava dentro do painel Estilos quando o DevTools era estreito.
Chromium problema #1073899
Veja também:
- Exibir apenas o CSS que é realmente aplicado a um elemento na referência de recursos CSS
Deslocamentos de bytecode para arquivos WebAssembly
O DevTools agora usa deslocamentos de bytecode para exibir números de linha de desmontagem do Wasm. Os números de linha deixam claro que você está olhando para dados binários e são mais consistentes com a forma como o tempo de execução do Wasm faz referência a locais.Chromium problema #1071432
Veja também:
Copiar e recortar em linha no painel Fontes
Ao executar a cópia ou o recorte sem seleção no editor do painel Fontes, o DevTools copia ou recorta a linha de conteúdo atual.
Chromium problema #800028
Atualizações das Configurações do Console
Desagrupar mensagens do mesmo console
A alternância semelhante a Grupo nas Configurações do Console agora se aplica a mensagens duplicadas. Anteriormente, ele se aplicava apenas a mensagens semelhantes.
Por exemplo, anteriormente, o DevTools não desagrupava as hello mensagens, embora Grupo semelhante estivesse desmarcado. Agora, as hello mensagens estão desagrupadas.
Experimente esse recurso com um exemplo que envia mensagens duplicadas para o console.
Chromium problema #1082963
Veja também:
- Desativar o agrupamento de mensagens na Referência de recursos do console
Persisting Selected configurações somente de contexto
As configurações somente de contexto selecionadas nas Configurações do Console agora são mantidas. Anteriormente, as configurações eram redefinidas sempre que você fechava e reabria o DevTools. A alteração torna o comportamento da configuração consistente com outras opções de Configurações do Console.
Chromium problema #1055875
Veja também:
- Filtrar mensagens de diferentes contextos de JavaScript - in Referência de recursos do console
Atualizações do painel de desempenho
Informações de cache de compilação JavaScript na ferramenta Desempenho
As informações de cache de compilação JavaScript agora são sempre exibidas no painel Resumo da ferramenta Desempenho . Anteriormente, o DevTools não mostrava nada relacionado ao cache de código se o cache de código não ocorresse.
Chromium problema #912581
Veja também:
Alinhamento do tempo de navegação no painel Desempenho
Anteriormente, a ferramenta Desempenho mostrava horas nas réguas com base em quando a gravação começou. Agora o tempo foi alterado para gravações em que o usuário navega. O DevTools agora mostra os tempos da régua em relação à navegação, em vez de quando a gravação começou.
Os horários dos DOMContentLoadedeventos , First Paint, First Contentful Paint e Largest Contentful Paint são atualizados para serem relativos ao início da navegação, o que significa que o tempo corresponde aos tempos relatados por PerformanceObserver.
Problema do Chromium #974550
Veja também:
Novos ícones para pontos de interrupção, pontos de interrupção condicionais e pontos de log
Atualização: a partir de 2022, os pontos de interrupção agora são indicados por um retângulo azul, em vez de um círculo vermelho.
O painel Fontes tem novos designs para pontos de interrupção, pontos de interrupção condicionais e pontos de log. Os pontos de interrupção são representados por um círculo vermelho, assim como o Visual Studio Code e o Visual Studio. Os ícones são adicionados para diferenciar pontos de interrupção condicionais e pontos de log.
Chromium problema #1041830
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 Jecelyn Yeen.
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.