Novidades do DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Compatibilidade com depuração do WebAssembly

O DevTools ativa Configurações > Experimentos > Depuração do WebAssembly: ativar o suporte a DWARF por padrão. Para mais informações, consulte Depuração do WebAssembly com ferramentas modernas.

Com esse experimento, você pode pausar a execução e depurar o código C e C++ em apps Wasm, com todas as informações de depuração disponíveis:

• Seu código-fonte original, mapeado usando informações de depuração DWARF.
• Nomes de função compreensíveis na pilha de chamadas.
• Suporte a pontos de interrupção e muito mais.

Para testar a depuração do Wasm, instale a extensão de suporte a C/C++ DevTools (DWARF) e percorra o código na demonstração do Mandelbrot.

Problema do Chromium: 1414289.

Melhoria no comportamento de depuração em apps Wasm

Depurar e ignorar no código original agora evita pausas na desmontagem (arquivo .wasm). Antes, ele pausaria nesse ponto.

No entanto, a depuração termina quando ela sai da função em que começou, por exemplo, depois de retornar da função.

Esse comportamento é ativado por padrão em Configurações > Preferências > Fontes.

Problema do Chromium: 1418938.

Depurar o preenchimento automático usando o painel "Elementos" e a guia "Problemas"

O preenchimento automático do Chrome preenche formulários automaticamente com informações salvas, como seus endereços ou informações de pagamento. Para facilitar a depuração de problemas relacionados ao preenchimento automático, o painel Elementos agora pode destacar esses problemas com sublinhados vermelhos em forma de chaves.

Para conferir esse recurso, ative Configurações > Experimentos > Destaca um nó ou atributo violador na árvore DOM do painel "Elementos" e inspecione esta página de demonstração.

Passe o cursor sobre um problema destacado na árvore do DOM e clique em Ver problema para abrir a guia Problemas, que lista todos os problemas detectados e fornece pistas sobre o que deu errado.

Problema do Chromium: 1399414.

Declarações no Gravador

Agora, o painel Gravador permite adicionar asserções durante a gravação, com todos os dados de tempo de execução disponíveis.

Para adicionar uma declaração, inicie uma nova gravação, interaja com a página e clique em Adicionar declaração. O Gravador insere uma etapa com o tipo waitForElement que pode ser personalizado na hora. Assista ao vídeo para ver as declarações em ação na demonstração do carrinho de café.

Este vídeo mostra como fazer asserções:

• Atributos HTML, por exemplo, o class de um elemento.
• Propriedades do JavaScript em JSON, por exemplo, .innerText.

Também é possível configurar etapas para declarar, por exemplo, instruções condicionais em JavaScript, número de filhos do nó (count), visibilidade do elemento e muito mais. Para mais informações, consulte Configurar etapas.

Além disso, o Gravador agora se lembra do formato de script preferido na visualização de código lado a lado e no menu de etapas com clique direito.

Problema do Chromium: 1423624.

Lighthouse 10.1.1

O painel Lighthouse agora executa o Lighthouse 10.1.1, com uma mudança notável introduzida na versão 10.1.0. Todas as auditorias que lidam com URLs agora são agrupadas por entidade e agregam estatísticas numéricas, como tamanho ou duração. Os terceiros mais usados também são marcados com a categoria para facilitar a identificação da finalidade deles na página.

Para aprender o básico sobre como usar o painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Aprimoramentos de desempenho

Tempos"." id="mark" tabindex="-1">performance.mark() mostra o tempo ao passar o cursor em "Performance > Tempos"

O método performance.mark() agora mostra o tempo quando você passa o cursor sobre a marca correspondente em Performance > Tempos. O tempo aqui é um carimbo de data/hora relativo ao evento de navegação anterior.

Problema do Chromium: 1426762.

O comando profile() preenche "Performance > Principal"

Os comandos profile() e profileEnd() no Console agora iniciam e interrompem o perfil da CPU na linha de execução principal do painel Performance.

Problema do Chromium: 1429191.

Aviso para interações lentas do usuário

As interações do usuário com mais de 200 milissegundos recebem um aviso de Interaction to Next Paint (INP) na guia Performance > Resumo.

Além disso, o ID da interação foi movido da dica para o Resumo.

Problemas do Chromium: 1432512, 1432509.

A faixa das Métricas da Web mudou de posição

O painel Performance removeu as seguintes faixas:

• A faixa Métricas da Web. Em vez disso, confira os tempos relevantes na faixa Tempos ao passar o cursor.
• A subfaixa Tarefas longas. Você já pode encontrar essas tarefas na faixa principal sombreada em vermelho e com um triângulo vermelho.

As informações contidas nas seções Web Vitals e Long Tasks estavam duplicadas em outros lugares. Além disso, eles não eram interativos em comparação com as alternativas mais completas, que fornecem informações mais detalhadas quando clicadas.

Além disso, a faixa Experiências foi renomeada como Mudanças de layout para refletir melhor o uso dela.

Saiba mais sobre as Web Vitals.

Descontinuação do criador de perfil do JavaScript: terceira fase

Desde o Chrome 58, a equipe do DevTools planejou descontinuar o JavaScript Profiler e fazer com que os desenvolvedores do Node.js e do Deno usassem o painel Performance para criar perfis de desempenho da CPU JavaScript.

A versão 114 do DevTools inicia a terceira fase da suspensão de uso em quatro fases do criador de perfil do JavaScript. Durante essa fase, o painel JavaScript Profiler é removido das DevTools, mas ainda é possível ativá-lo temporariamente em Configurações > Experimentos e abri-lo no menu de três pontos .

Para criar um perfil de desempenho da CPU, use o painel Performance.

Problema do Chromium: 1428026.

Destaques diversos

Confira algumas correções importantes nesta versão:

• O Seletor de cores agora detecta valores HWB fora da gama quando cortados (1429271).
• O painel Origens:
  • Destaque da sintaxe JSON ativado para mapas de origem (1385374).
  • Paramos de mostrar mensagens de "Mapa de origem detectado" quando você desativa manualmente os mapas de origem (1423718).
• Agora, o Console permite avaliar expressões JavaScript incompletas com Ctrl + Enter e gera erros de sintaxe (1314700).
• A caixa de diálogo de edição de ponto de interrupção agora tem um botão de fechamento. Antes, era necessário pressionar Enter ou remover o foco da caixa de diálogo (1412980).

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.