Novidades do DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Suporte para depuração do WebAssembly

O DevTools ativa Configurações > Experimentos > 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.

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

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

No entanto, a execução 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 > Preferências > Origens.

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 Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree e inspecione esta página de demonstração.

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 ao 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.

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

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.

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 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:

• A faixa Métricas da Web. Em vez disso, confira os tempos relevantes na faixa Tempos ao passar o cursor.
• A subtrilha Long Tasks. Essas tarefas já podem ser encontradas na faixa Principal em vermelho e com um triângulo vermelho.

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.

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 > 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 desta versão:

• O seletor de cores agora detecta valores de HWB que estão fora da gama quando cortados (1429271).
• Painel Origens:
  • O destaque de sintaxe JSON foi ativado para mapas de origem (1385374).
  • As mensagens "Mapa de origem detectado" não são mais mostradas quando você desativa manualmente os mapas de origem (1423718).
• O Console agora permite avaliar expressões JavaScript incompletas com Ctrl + Enter e mostra erros de sintaxe (1314700).
• A caixa de diálogo de edição de pontos de interrupção agora tem um botão de fechamento. Antes, era necessário pressionar Enter ou tirar o foco da caixa de diálogo (1412980).

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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