Novidades do DevTools (Chrome 114)

Suporte à depuração do WebAssembly

O DevTools ativa as Configurações de > Experimentos > Depuração 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ódigo C e C++ em apps Wasm, com todas as informações de depuração disponíveis:

• O código-fonte original, mapeado usando as informações de depuração DWARF.
• Nomes de funções 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 (DWARF) e analise o código na demonstração do Mandelbrot.

Problema do Chromium: 1414289.

Melhoria no comportamento de caminhar em apps Wasm

Pular no código original agora evita uma pausa no desmontagem (arquivo .wasm). Antes, isso era pausado ali.

No entanto, a etapa termina quando ele sai da função em que começou, por exemplo, após 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 destacá-los com sublinhados curvas em vermelho.

Para acessar esse recurso, ative as Configurações > Experimentos > Realça um nó ou atributo com violação na árvore DOM do painel Elementos e inspeciona 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 oferece pistas sobre o que deu errado.

Problema do Chromium: 1399414.

Declarações no Gravador

O painel Gravador agora permite adicionar declarações diretamente durante a gravação, com todos os dados de execução disponíveis para você.

Para adicionar uma declaração, inicie uma nova gravação, interaja com sua página e clique em Add assertion. O Gravador insere uma etapa com o tipo waitForElement que você pode personalizar rapidamente. Assista ao vídeo para ver 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, número de filhos do nó (count), visibilidade do elemento e muito mais. Para mais informações, consulte Etapas de configuração.

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 ao clicar com o botão direito do mouse.

Problema do Chromium: 1423624.

Lighthouse versão 10.1.1

O painel Lighthouse agora executa o Lighthouse 10.1.1, com uma mudança importante introduzida na 10.1.0. Todas as auditorias relacionadas a URLs agora são agrupadas por entidade e agregam estatísticas numéricas, como tamanho ou duração. Terceiros populares também são marcados com sua categoria para que seja mais fácil identificar sua finalidade na página.

Para aprender os conceitos básicos do uso do painel Lighthouse no 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" > Prazos

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

Problema do Chromium: 1426762.

O comando profile() preenche Desempenho > Principal

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

Problema do Chromium: 1429191.

Aviso sobre 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 página Performance > Guia Resumo.

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

Problemas do Chromium: 1432512, 1432509.

A faixa de Métricas da Web foi movida

O painel Performance removeu as seguintes faixas:

• O rastreamento Métricas da Web. Em vez disso, veja as marcações de tempo relevantes na faixa Tempos ao passar o cursor.
• A subfaixa Tarefas longas. Você já pode encontrar essas tarefas na faixa Main sombreada em vermelho e com um triângulo vermelho.

As faixas Métricas da Web e Tarefas longas tinham informações duplicadas em outros lugares. Eles também não eram interativos, em comparação com as alternativas mais completas, que oferecem informações mais detalhadas quando clicadas.

Além disso, a faixa Experiences foi renomeada como Layout Shifts para refletir o uso com mais precisão.

Saiba mais sobre as Métricas da Web.

Suspensão de uso do JavaScript Profiler: fase três

Já no Chrome 58 (link em inglês), a equipe do DevTools planejava suspender o uso do JavaScript Profiler e fazer com que os desenvolvedores do Node.js e do Deno usassem o painel Performance para criar o perfil de desempenho da CPU JavaScript.

A versão 114 do DevTools começa a fase três da descontinuação do JavaScript Profiler de quatro fases. Durante essa fase, o painel JavaScript Profiler é removido do DevTools, mas você ainda pode ativá-lo temporariamente via Settings > Experimentos e abra no menu de três pontos .

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

Problema do Chromium: 1428026.

Destaques diversos

Estas são algumas correções importantes nesta versão:

• O Color Picker agora detecta valores HWB que estão fora da gama quando recortados (1429271).
• O painel Origens:
  • O destaque de sintaxe JSON foi ativado para os mapas de origem (1385374).
  • A mensagem "Mapa de origem detectado" não está mais sendo exibida. mensagens quando você desativa mapas de origem manualmente (1423718).
• O Console agora permite que você avalie expressões JavaScript incompletas com Ctrl + Enter e resulte em erros de sintaxe (1314700).
• A caixa de diálogo de edição do Breakpoint agora tem um botão "Fechar". Anteriormente, era necessário pressionar Enter ou remover o foco da caixa de diálogo (1412980).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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