Novidades do DevTools (Chrome 105)

Jecelyn Yeen

Repetição detalhada no Gravador

Agora é possível definir um ponto de interrupção e reproduzir um fluxo de usuário passo a passo no painel Gravador.

Para definir um ponto de interrupção, clique no ponto azul ao lado de uma etapa. Reproduza o fluxo de usuários. A reprodução vai pausar antes de executar a etapa. Aqui, você pode continuar a repetição, executar uma etapa ou cancelar a repetição.

Com esse recurso, você pode visualizar e depurar seu fluxo de usuários com facilidade.

Consulte a referência de recursos do Gravador para mais informações.

Problema do Chromium: 1257499

Suporte a eventos de passagem do mouse no painel do gravador

O Gravador agora oferece suporte à adição manual de uma etapa de passar o mouse (hover) em uma gravação.

Esta demonstração mostra um menu pop-up ao passar o cursor. Tente gravar um fluxo de usuários e clicar em um item de menu.

Se você reproduzir o fluxo de usuários agora, ele vai falhar porque o gravador não captura eventos de passagem do mouse automaticamente durante a gravação. Para resolver isso, adicione uma etapa manualmente passando o cursor sobre o seletor antes de clicar no item de menu.

Problema do Chromium: 1257499

Maior exibição de conteúdo (LCP) no painel de insights de desempenho

A LCP é uma métrica importante e focada no usuário para medir a velocidade de carregamento percebida. Agora é possível descobrir os caminhos críticos e as causas raiz de uma Maior exibição de conteúdo (LCP).

Em uma gravação de performance, clique no selo da LCP na Linha do tempo. No painel Detalhes, você pode conferir a pontuação do LCP, aprender a corrigir recursos que diminuem o LCP e conferir o caminho crítico do recurso do LCP.

Consulte Insights de desempenho para saber como receber insights úteis e melhorar a performance do seu site com o painel.

Problema do Chromium: 1326481

Identifique flashes de texto (FOIT, FOUT) como possíveis causas raiz de mudanças de layout.

O painel Insights de performance agora detecta instante de texto invisível (FOIT) e instante de texto sem estilo (FOUT) como possíveis causas raiz de mudanças de layout.

Para conferir as possíveis causas-raiz de uma mudança de layout, clique em uma captura de tela na faixa Mudanças de layout.

Consulte Otimizar o carregamento e a renderização de WebFonts para saber a técnica de prevenção de mudanças de layout.

Problemas do Chromium: 1334628, 1328873

Gerenciadores de protocolo no painel "Manifest"

Agora é possível usar o DevTools para testar o registro do gerenciador de protocolos de URL para Progressive Web Apps (PWA).

O registro do gerenciador de protocolos de URL permite que os PWAs instalados processem links que usam um protocolo específico (por exemplo, magnet, web+example) para uma experiência mais integrada.

Navegue até a seção Protocol Handlers no painel Application > Manifest. Confira e teste todos os protocolos disponíveis aqui.

Por exemplo, instale este PWA de demonstração. Na seção Protocol Handlers, digite "americano" e clique em Test protocol para abrir a página de café na PWA.

Problemas do Chromium: 1300613

Selo da camada superior no painel "Elementos"

Use o selo da camada superior para entender o conceito da camada superior e visualizar como o conteúdo dela muda.

O elemento <dialog> se tornou estável em todos os navegadores recentemente. Quando você abre uma caixa de diálogo, ela é colocada em uma camada superior. O conteúdo de nível superior é renderizado sobre todo o resto.

Nesta demonstração, clique em Abrir caixa de diálogo.

Para ajudar a visualizar os elementos da camada superior, o DevTools adiciona um contêiner da camada superior (#top-layer) à árvore do DOM. Ele fica depois da tag </html> de fechamento.

Para pular do elemento do contêiner da camada superior para o elemento da árvore da camada superior, clique no botão revelar ao lado do elemento ou do plano de fundo no contêiner da camada superior.

Ao lado do elemento da árvore da camada superior (por exemplo, o elemento de caixa de diálogo), clique no ícone da camada superior para acessar o contêiner da camada superior.

Problema do Chromium: 1313690

Anexar informações de depuração do Wasm no momento da execução

Agora é possível anexar informações de depuração DWARF para wasm durante a execução. Antes, o painel Origens só oferecia suporte à vinculação de mapas de origem a arquivos JavaScript e Wasm.

Abra um arquivo Wasm no painel Origens. Clique com o botão direito do mouse no editor e selecione Add DWARF debugging info… para anexar informações de depuração sob demanda.

Problema do Chromium: 1341255

Suporte à edição em tempo real durante a depuração

Agora é possível editar a função mais alta na pilha sem reiniciar o depurador.

No Chrome 104, o DevTools traz de volta o recurso reiniciar frame. No entanto, não foi possível editar a função em que você está pausado. É comum que os desenvolvedores pausem uma função e a editem enquanto ela está pausada.

Com essa atualização, o depurador reinicia automaticamente a função com as seguintes restrições:

• Somente a função principal pode ser editada enquanto está pausada
• Nenhuma chamada recursiva na mesma função mais abaixo na pilha

Problema do Chromium: 1334484

Acessar e editar regras @scope no painel "Styles"

Agora é possível visualizar e editar as regras at-rules @scope do CSS no painel Estilos.

As regras @scope fazem parte da especificação de nível 6 de cascata e herança do CSS. Essas regras permitem que os desenvolvedores definam o escopo das regras de estilo no CSS.

Abra esta página de demonstração e inspecione o hiperlink no elemento <div class=”dark-theme”>. No painel Styles, confira as regras @scope. Clique na declaração da regra para editá-la.

Problema do Chromium: 1337777

Melhorias no mapa de origem

Confira algumas correções nos mapas de origem para melhorar a experiência geral de depuração:

• Agora, o DevTools resolve corretamente os identificadores do mapa de origem com pontuação. Alguns minificadores modernos (por exemplo, esbuild) produzem mapas de origem que mesclam identificadores com pontuação subsequente (vírgula, parênteses, ponto e vírgula).
• O DevTools agora resolve nomes de mapas de origem para construtores com uma chamada super.
• Correção da indexação de URLs de mapas de origem para URLs canônicos duplicados. Antes, os pontos de interrupção não eram ativados em alguns arquivos devido a URLs canônicos duplicados.

Problema do Chromium: 1335338, 1333411

Destaques diversos

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

• Remover corretamente um par de valor de chave de armazenamento local da tabela no painel Application > Local Storage quando ele for excluído. (1339280).
• As visualizações de cores agora são exibidas corretamente ao visualizar arquivos CSS no painel Fontes. Antes, as posições estavam fora do lugar. (1340062).
• Os itens flex e grid do CSS são mostrados de forma consistente no painel Layout e como selos no painel Elementos. Antes, os itens flex e grid estavam ausentes aleatoriamente nos dois lugares. (1340441, 1273992).
• Um novo link Creator Ad Script está disponível para frames de anúncios se o DevTools encontrar o script que fez com que o frame fosse rotulado como um anúncio. Você pode abrir um frame em Application > Frames. (1217041).

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.