Compartilhar via

Novidades no DevTools (Microsoft Edge 109)

  • Artigo

Para marcar as funcionalidades mais recentes do Microsoft Edge DevTools e da extensão DevTools do Microsoft Edge para o Microsoft Visual Studio Code e Visual Studio, leia estes anúncios.

Para se manter atualizado e obter as funcionalidades mais recentes do DevTools, transfira uma versão de pré-visualização do Insider do Microsoft Edge. Quer esteja no Windows, Linux ou macOS, considere utilizar o Canary (ou outro canal de pré-visualização) como o browser de desenvolvimento predefinido. As versões Beta, Dev e Canary do Microsoft Edge são executadas como aplicações separadas, lado a lado com a versão estável e lançada do Microsoft Edge. Consulte Microsoft Edge Insider Channels.

Para obter os anúncios mais recentes, siga a equipa do Microsoft Edge no Twitter. Para comunicar um problema com o DevTools ou pedir uma nova funcionalidade, submeta um problema no repositório MicrosoftEdge/DevTools .

Vídeo: Novidades no DevTools 109

Imagem em miniatura do vídeo

Importar e exportar as instâncias de DevTools com a nova funcionalidade de rastreios melhorados

No Microsoft Edge 109, pode ativar novas definições para exportar rastreios melhorados a partir das ferramentas de Desempenho e Memória . Estes rastreios melhorados incluem mais informações, tais como:

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

Ao guardar perfis de desempenho, instantâneos de área dinâmica para dados, linhas cronológicas de alocação ou amostragem de alocação, pode agora exportar um novo .devtools formato de ficheiro. Quando importar o .devtools ficheiro, é aberta uma nova instância de DevTools, com o estado das ferramentas Elementos, Consola e Origens preservado. Estes rastreios melhorados oferecem uma nova e poderosa forma de colaborar e partilhar as informações nas suas DevTools.

Para experimentar a funcionalidade de rastreios melhorados:

  1. Em DevTools, clique no botão Definições (ícone Definições).

  2. Na secção Persistência da página Definições de preferências , selecione a caixa de verificação Exportar desempenho melhorado e rastreios de memória :

    Definições > Preferências > Caixa de verificação de persistência

  3. Se quiser preservar as mensagens da Consola, JavaScript ou instantâneos DOM, selecione as caixas de verificação correspondentes.

  4. Clique no botão Fechar (x) em Definições de DevTools.

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

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

  7. Na caixa de diálogo Guardar Como , guarde o novo .devtools ficheiro.

A importar:

  1. Importe o ficheiro a .devtools partir da ferramenta Desempenho ao clicar no botão Carregar perfil (ícone carregar perfil):

    Importar um rastreio a partir da ferramenta Desempenho

  2. É aberta uma nova janela DevTools, que contém um subconjunto das ferramentas, incluindo a ferramenta Desempenho carregada com o perfil que acabou de gravar. As ferramentas Elementos, Consola e Origens também são pré-preenchidas com o respetivo estado preservado:

    Consola de importação de rastreio

Também pode exportar a partir da ferramenta Memória com o novo .devtools formato de ficheiro. Esta é uma nova funcionalidade com a qual a equipa de DevTools está a fazer experiências ativamente, por isso envie-nos o seu feedback na experimentação [Feedback] Enhanced Traces #122.

Veja também:

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

No Microsoft Edge 109, na ferramenta Desempenho , pode ativar a definição Ativar instrumentação de composição avançada (lenta) na ferramenta Desempenho para aceder à nova funcionalidade de estatísticas do seletor.

Com esta definição ativada:

  1. Selecione Gravar e, em seguida, execute o cenário que pretende melhorar no seu site ou aplicação.

  2. Selecione Parar.

  3. Selecione um evento Recalcular Estilo . Na secção inferior da ferramenta Desempenho , selecione o separador Estatísticas do Seletor :

    Ferramenta de desempenho Definições caixa de verificação

O separador Estatísticas do Seletor fornece uma lista de todos os seletores CSS que foram calculados pelo motor do browser durante o evento Recalcular Estilo . Pode ordenar seletores pelo tempo decorrido que demoraram a processar ou pelo número de elementos correspondentes (a coluna Contagem de Correspondências). Utilize estes dados para:

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

Veja também:

Controlar objetos eliminados pela libertação da memória durante a amostragem de alocação

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

  • Inclua objetos eliminados pelo GC principal.

  • Inclua objetos eliminados por GC secundário.

Sem selecionar estas opções, a ferramenta Memória continuará a funcionar como anteriormente, comunicando alocações que ainda estão vivas no final da sessão de criação de perfis. Neste modo, os objetos gerados e recolhidos pela memória (GC'd) e, em seguida, desaparecem não são controlados pela amostragem de alocação.

Selecione ambas as opções se quiser controlar a memória que está a ser gerada pelo seu site ou aplicação. No perfil resultante, poderá ver a memória que foi gerada pelas suas funções JavaScript que eram então GC'd. Utilize estas opções se quiser reduzir a quantidade de lixo que o código está a gerar. Para saber mais sobre as diferenças entre o gc principal e o menor, consulte Conversa de lixo: o recoletor de lixo Orinoco.

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

Veja também:

Experimente a nova extensão de visualização de Instantâneo de Área Dinâmica para Dados para DevTools

Adicione a nova extensão De Visualização de Instantâneos de Área Dinâmica para Dados ao Microsoft Edge para obter novas visualizações dos dados que estão na área dinâmica para dados snapshot ficheiros. A instalação desta extensão adiciona uma nova ferramenta de Visualização de Instantâneos de Área Dinâmica para Dados no DevTools. Na ferramenta Visualizador de Instantâneos de Área Dinâmica para Dados, pode carregar uma área dinâmica para dados snapshot ficheiro para vê-lo representado como um gráfico direcionado ou como uma árvore. Estas novas visualizações permitem-lhe explorar a cadeia de retentores da raiz de libertação da memória (GC) para um nó individual.

Vista de gráfico:

Visualizador de Instantâneos de Área Dinâmica para Dados no modo Graph

Vista de árvore:

Visualizador de Instantâneos de Área Dinâmica para Dados no modo de Árvore

Veja também:

Melhorias na Vista Rápida no Modo de Detalhe

Ouvimos o seu feedback e melhorámos as opções de Vista Rápida no Modo de Detalhe. Em vez de oferecer apenas um subconjunto das ferramentas numa lista pendente de Vista Rápida, pode agora selecionar qualquer ferramenta DevTools ao clicar no botão Mais ferramentas (ícone Mais ferramentas), como na barra de ferramentas main de DevTools. Carregue qualquer ferramenta no painel Vista Rápida de DevTools para mostrar várias ferramentas ao mesmo tempo.

O estado da barra de ferramentas da Vista Rápida persiste nas sessões de DevTools. O painel Vista Rápida é fechado automaticamente se abrir a mesma ferramenta no painel superior de DevTools.

Adicionar uma ferramenta ao painel Vista Rápida

Ocorreu um problema de acessibilidade em que os utilizadores do comando de voz não conseguiam navegar para o separador Estilos ou separador Calculado na ferramenta Elementos . Agora pode aceder a estes separadores através de dois novos comandos no Menu de Comandos:

  • Mostrar Estilos
  • Mostrar Estilos Calculados

Menu de Comandos com os comandos

Veja também:

Anúncios do projeto Chromium

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