Novidades no DevTools (Microsoft Edge 109)

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

Vídeo: Novidades no DevTools 109

Imagem em miniatura do vídeo

Importe e exporte suas instâncias do DevTools com o novo recurso de rastreamentos aprimorados

No Microsoft Edge 109, você pode ativar novas configurações para exportar rastreamentos aprimorados das ferramentas Desempenho e Memória . Esses rastreamentos aprimorados incluem mais informações, como:

  • Mensagens registradas no Console.
  • O JavaScript que estava em execução na página no momento da gravação.
  • Instantâneos do DOM.

Ao salvar perfis de desempenho, instantâneos de heap, linhas do tempo de alocação ou amostragem de alocação, agora você pode exportar um novo .devtools formato de arquivo. Quando você importa o .devtools arquivo, uma nova instância do DevTools é aberta, com o estado das ferramentas Elementos, Console e Fontes preservado. Esses rastreamentos aprimorados oferecem uma nova maneira poderosa de colaborar e compartilhar as informações em seu DevTools.

Para experimentar o recurso de rastreamentos aprimorado:

  1. No DevTools, clique no botão Configurações (ícone de Configurações).

  2. Na seção Persistência da página configurações de Preferências , marque a caixa de seleção Exportar rastreamentos de memória e desempenho aprimorados :

    Configurações > Preferências > Persistência caixas de seleção

  3. Se você deseja preservar mensagens do console, JavaScript ou instantâneos DOM, marque as caixas de seleção correspondentes.

  4. Clique no botão Fechar (x) nas Configurações do DevTools.

  5. Na ferramenta Desempenho , faça uma gravação.

  6. Clique no botão Salvar perfil (ícone Salvar perfil).

  7. Na caixa de diálogo Salvar como , salve o novo .devtools arquivo.

Importando:

  1. Importe o .devtools arquivo de dentro da ferramenta Desempenho clicando no botão Carregar perfil (ícone Carregar perfil):

    Importando um rastreamento de dentro da ferramenta Desempenho

  2. Uma nova janela do DevTools é aberta, contendo um subconjunto das ferramentas, incluindo a ferramenta Desempenho carregada com o perfil que você acabou de gravar. As ferramentas Elementos, Console e Fontes também são preenchidas previamente com seu estado preservado:

    Rastrear Importar console

Você também pode exportar da ferramenta Memória com o novo .devtools formato de arquivo. Esse é um novo recurso que a equipe do DevTools está experimentando ativamente, portanto, envie-nos seus comentários em [Comentários] Experimento de rastreamentos aprimorados #122.

Veja também:

Depurar eventos de Recalcular Estilo de longa execução com novas estatísticas de seletor

No Microsoft Edge 109, na ferramenta Desempenho , você pode ativar a configuração Habilitar instrumentação de renderização avançada (lenta) na ferramenta Desempenho para acessar o novo recurso de estatísticas do seletor.

Com essa configuração ativada:

  1. Selecione Gravar e execute o cenário que você deseja melhorar em seu site ou aplicativo.

  2. Selecione Parar.

  3. Selecione um evento Recalcular Estilo . Na seção inferior da ferramenta Desempenho , selecione a guia Estatísticas do seletor :

    Ferramenta Desempenho Configurações, caixa de seleção 'Habilitar instrumentação de renderização avançada (lenta)' e guia 'Estatísticas do seletor'

A guia Estatísticas do seletor fornece uma lista de todos os seletores CSS que foram calculados pelo mecanismo do navegador durante o evento Recalcular estilo . Você pode classificar os seletores pelo tempo decorrido que levaram para processar ou pelo número de elementos aos quais corresponderam (a coluna Contagem de correspondências ). Use esses dados para:

  • Encontre seletores que levam muito tempo para o navegador processar e simplifique-os.
  • Torne os seletores mais específicos para melhorar o desempenho.

Veja também:

Rastrear objetos descartados pela coleta de lixo durante a amostragem de alocação

No Microsoft Edge 109, o tipo de criação de perfil de amostragem de alocação na ferramenta Memória agora tem duas novas opções:

  • Incluir objetos descartados por GC principal.

  • Incluir objetos descartados por GC secundário.

Sem selecionar essas opções, a ferramenta Memória continuará funcionando como antes, relatando alocações que ainda estão ativas no final da sessão de criação de perfil. Nesse modo, os objetos gerados e coletados como lixo (GC'd) e depois desaparecem não são rastreados pela amostragem de alocação.

Selecione ambas as opções se quiser rastrear o lixo que está sendo gerado por seu site ou aplicativo. No perfil resultante, você poderá ver o lixo gerado por suas funções JavaScript que foram então GC'd. Use essas opções se quiser reduzir a quantidade de lixo que seu código está gerando. Para saber mais sobre as diferenças entre GC maior e menor, consulte Trash talk: o coletor de lixo do Orinoco.

Opções de criação de perfil de amostragem de alocação

Veja também:

Extensão do visualizador de instantâneo de heap para DevTools

Adicione a nova extensão Visualizador de Instantâneo de Heap ao Microsoft Edge para obter novas visualizações dos dados que estão em seus arquivos de snapshot de heap. A instalação dessa extensão adiciona uma nova ferramenta Visualizador de Instantâneos de Heap no DevTools. Na ferramenta Visualizador de Instantâneos de Heap, você pode carregar um arquivo de snapshot de heap para vê-lo representado como um grafo direcionado ou como uma árvore. Essas novas visualizações permitem que você explore a cadeia de retentores da raiz da coleta de lixo (GC) para um nó individual.

Exibição de gráfico:

Heap Visualizador de Instantâneos no modo Gráfico

Exibição em árvore:

Heap Visualizador de Instantâneos em modo de árvore

Veja também:

Melhorias na Exibição Rápida no Modo de Foco

Ouvimos seus comentários e aprimoramos as opções de Visualização Rápida no Modo de Foco. Em vez de oferecer apenas um subconjunto das ferramentas em uma lista suspensa de Visualização Rápida , agora você pode selecionar qualquer ferramenta do DevTools clicando no botão Mais ferramentas (ícone Mais ferramentas), como na barra de ferramentas principal do DevTools. Carregue qualquer ferramenta no painel de Visualização Rápida do DevTools para mostrar várias ferramentas ao mesmo tempo.

O estado da barra de ferramentas de Visualização Rápida persiste nas sessões do DevTools. O painel Visualização Rápida será recolhido automaticamente se você abrir a mesma ferramenta no painel superior do DevTools.

Adicionar uma ferramenta ao painel Visualização rápida

Havia um problema de acessibilidade em que os usuários de comando de voz não conseguiam navegar até a guia Estilos ou a guia Computado na ferramenta Elementos . Agora você pode acessar essas guias por meio de dois novos comandos no Menu de Comando:

  • Mostrar Estilos
  • Mostrar Estilos Computados

Menu de comandos com os comandos 'Mostrar estilos' e 'Mostrar estilos computados'

Veja também:

Anúncios do projeto Chromium

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

Confira também

  • Last updated on