Novidades do DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova

Suporte à depuração do WebAssembly

O DevTools ativa Configurações. Configurações > Experimentos > Caixa de seleção. Depuração de WebAssembly: Ativar o suporte a DWARF por padrão. Para mais informações, consulte Como depurar o WebAssembly com ferramentas modernas.

Esse experimento permite pausar a execução e depurar códigos 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 do DWARF.
  • Nomes de função compreensíveis na pilha de chamadas.
  • Suporte a pontos de interrupção e muito mais.

Um aplicativo Wasm pausado no depurador.

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

Problema do Chromium: 1414289.

Melhoria no comportamento de etapas em apps Wasm

Afaste-se. Passar por cima no código original agora evita a pausa na desmontagem (arquivo .wasm). Antes, ele parava por aí.

No entanto, a etapa termina quando ela sai da função em que foi iniciada, por exemplo, depois de retornar da função.

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

A nova configuração encontrada em "Preferências" e "Fontes".

Problema do Chromium: 1418938.

Depurar o preenchimento automático usando o painel "Elements" e a guia "Issues"

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

Para conferir esse recurso, ative Configurações. Settings > Experiments > Caixa de seleção. Highlights a violating node or attribute in the Elements panel DOM tree e inspecione esta página de demonstração.

Problemas de preenchimento automático destacados no painel "Elements" e informados pelo painel "Issues".

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

Problema do Chromium: 1399414.

Afirmações no Gravador

O painel Recorder agora permite adicionar declarações durante a gravação, com todos os dados 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 em tempo real. Assista o vídeo para conferir as declarações em ação na demonstração do carrinho de café.

Este vídeo mostra como declarar:

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

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

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

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 conhecidos também são marcados com a categoria para facilitar a identificação da finalidade deles na página.

Auditorias agrupadas por entidade.

Para aprender os conceitos básicos de uso do 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 Desempenho > 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.

O pop-up com o tempo de permanência do cursor na seção "Tempos".

Problema do Chromium: 1426762.

O comando profile() preenche "Performance > Main"

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

O comando console() cria um perfil no 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.

O aviso de INP.

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

Problemas do Chromium: 1432512, 1432509.

A faixa das Métricas da Web foi movida

O painel Performance removeu as seguintes faixas:

As faixas Core Web Vitals e Long Tasks continham informações duplicadas em outro lugar. Eles também não eram interativos em comparação com as alternativas mais completas, que fornecem informações mais detalhadas ao clicar.

Antes e depois de mover as Métricas da Web para a faixa "Tempos".

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

Saiba mais sobre as Web Vitals.

Descontinuação do criador de perfil do JavaScript: fase três

No Chrome 58, a equipe do DevTools planejou a desatualização do JavaScript Profiler e 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 descontinuação em quatro fases do Gerador de perfis do JavaScript. Durante essa fase, o painel JavaScript Profiler é removido das Ferramentas do desenvolvedor, mas você ainda pode ativá-lo temporariamente em Configurações. Configurações > Experimentos e abri-lo no menu de três pontos Menu de três pontos..

Caixa de seleção do criador de perfil do JavaScript em "Configurações" e "Experimentos".

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

Problema do Chromium: 1428026.

Destaques diversos

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

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

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