Novidades no DevTools (Microsoft Edge 113)

Esses são os recursos mais recentes na versão estável do Microsoft Edge DevTools.

Vídeo: Novidades no DevTools 113 e 114

Depurar rastreamentos de pilha de erros do JavaScript usando a ferramenta Analisador de Falhas

A nova ferramenta Analisador de falhas está disponível como uma experiência no Microsoft Edge 113. Na ferramenta Analisador de falhas , você pode inserir um rastreamento de pilha JavaScript, como para exceções JavaScript não fatais, e ter seus mapas de origem aplicados ao rastreamento de pilha para que você possa depurar mais rapidamente.

Para acessar a ferramenta Analisador de falhas, selecione o experimento Ativar Analisador de Falhas em Experimentos de configurações>. Consulte Ativar ou desativar um experimento.

Você pode relatar exceções JavaScript não fatais ou dados semelhantes a ferramentas como o Aplicativo Azure Insights:

1. Primeiro, para usar a ferramenta Analisador de falhas , você precisa de rastreamentos de pilha especialmente formatados que incluam uma seção chamada Source modules. Esta seção contém as referências de mapa de origem às funções JavaScript que faziam parte do rastreamento de pilha de erro. Você pode produzir esses rastreamentos de pilha usando o pacote npm de Suporte ao Analisador de Falhas .

2. Então, você precisa de uma maneira de realmente receber os rastreamentos de pilha dos navegadores que estão executando seu código. Uma dessas maneiras é usar o Aplicativo Azure Insights; consulte Visão geral do Application Insights.

3. Depois de ter um rastreamento de pilha, cole-o no painel esquerdo da ferramenta Analisador de falhas .

4. Na ferramenta Analisador de falhas , clique no botão Analisar (ou pressione Ctrl+Enter). O painel direito mostra os nomes originais de arquivo e função que compõem o rastreamento de pilha:

   

5. Clique nos quadros de pilha individuais para ver as linhas no código original que causaram o erro.

Para obter mais informações, consulte Ferramenta Analisador de falhas.

Veja também:

• throw - JavaScript | Documentos Web do MDN
• Visão geral do Application Insights
• Suporte ao Analisador de Falhas | npm

A ferramenta Memória pode cancelar a minimização de nomes de objetos em instantâneos de heap

No Microsoft Edge 113, a ferramenta Memória agora fornece automaticamente os nomes dos objetos originais ao tirar um snapshot de heap, desde que os mapas de origem sejam carregados. Os mapas de origem podem ser carregados de forma confiável e segura hospedando-os no Servidor de Símbolos de Artefatos do Azure.

Na imagem a seguir, o nome e do objeto minimizado é mostrado em um snapshot de heap na ferramenta Memória:

Agora, no Microsoft Edge 113, a ferramenta Memória desativa automaticamente os nomes de objeto no heap snapshot:

Veja também:

• Depurar com segurança o código original publicando mapas de origem para o servidor de símbolos do Azure Artifacts
• Depurar com segurança o código original usando mapas de origem do servidor de símbolos do Azure Artifacts
• Tirar um snapshot em Registrar instantâneos de heap usando a ferramenta Memória (tipo de criação de perfil "Heap snapshot")

A ferramenta Issues tem melhor suporte para navegação pelo teclado

Na ferramenta Problemas , alterar os filtros de gravidade ou do navegador exibe uma barra de informações na parte superior da ferramenta Problemas , contendo um botão Regenerar problemas . Em versões anteriores do Microsoft Edge, navegar nessa barra de informações com o teclado fazia com que o botão Fechar desaparecesse. No Microsoft Edge 113, esse problema foi corrigido:

Veja também:

• Filtrar problemas em Localizar e corrigir problemas usando a ferramenta Problemas
• Navegação no DevTools com tecnologia adaptativa

No Modo de Foco, passar o mouse sobre uma ferramenta não faz mais com que o nome de cada ferramenta desapareça na Barra de Atividades

Em versões anteriores do Microsoft Edge, no Modo de Foco, passar o mouse sobre o ícone de uma ferramenta na Barra de Atividades no modo horizontal fazia com que os nomes das outras ferramentas na Barra de Atividades desaparecessem. No Microsoft Edge 113, esse problema foi corrigido. Quando você passa o mouse sobre um ícone de ferramenta para ver o nome da ferramenta em uma dica de ferramenta, os nomes das outras ferramentas permanecem exibidos na Barra de Atividades:

O menu Personalizar DevTools tem melhor suporte para temas do VS Code

Atualização: a partir do Microsoft Edge 131, o recurso de temas do Visual Studio Code é removido e esses temas são revertidos para os temas padrão:

• Luz+
• Escuro+

Em versões anteriores do Microsoft Edge, a aplicação de temas do Microsoft Visual Studio Code, como Solarized Light ou Kimbie Dark, causava problemas de baixo contraste ao passar o mouse sobre itens no menu Personalizar e controlar o DevTools. No Microsoft Edge 113, esse problema foi corrigido. Os itens no menu Personalizar e controlar DevTools agora são exibidos com contraste de cor suficiente:

Veja também:

• Teste o contraste da cor do texto usando o Seletor de Cor
• Verifique o contraste da cor do texto no estado padrão usando a ferramenta Inspecionar

O filtro Tipos de nó na ferramenta Memória agora é exibido apenas na exibição Resumo de um snapshot de heap

No Microsoft Edge 100, adicionamos um filtro Tipos de Nó à ferramenta Memória para que você possa se concentrar apenas em tipos específicos de objetos, como Array ou String, ao examinar um heap snapshot. Esse filtro Tipos de Nós só se aplica a objetos que são exibidos na visualização Resumo de um snapshot de heap.

O filtro Node Types também foi exibido quando as exibições Containment ou Statistics do snapshot heap foram selecionadas, mesmo que o filtro não se aplique a essas exibições. Esse problema foi corrigido. No Microsoft Edge 113, o filtro Tipos de Nós só é exibido quando a exibição Resumo é selecionada:

Nas exibições Contenção e Estatísticas , o filtro Tipos de Nós não é mais exibido, pois não se aplica:

Veja também:

• Filtrar resumo de instantâneos de heap por tipo de nó em Novidades no DevTools (Microsoft Edge 100)
• Tirar um snapshot em Registrar instantâneos de heap usando a ferramenta Memória (tipo de criação de perfil "Heap snapshot")

Anúncios do projeto Chromium

O Microsoft Edge 113 também inclui as seguintes atualizações do projeto Chromium:

• Substituir cabeçalhos de resposta de rede
• Melhorias de depuração Nuxt, Vite e Rollup
• Melhorias de CSS em Estilos de Elementos >
  • Propriedades e valores CSS inválidos
  • Links para quadros-chave na propriedade abreviada de animação
• Nova configuração do console: Preenchimento automático ao Enter
• O menu de comandos enfatiza os arquivos criados
• Preterição do JavaScript Profiler: estágio dois

Confira também

• Novidades no Microsoft Edge DevTools
• Notas de versão para a plataforma Web do Microsoft Edge