Novidades do DevTools (Chrome 105)

Jecelyn Yeen

Repetição detalhada no Gravador

Agora é possível definir um ponto de interrupção e repetir um fluxo de usuário etapa por etapa no painel Gravador.

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

Com esse recurso, é possível visualizar e depurar totalmente o fluxo de usuários com facilidade.

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

Problema do Chromium: 1257499

Suporte para evento de passar o cursor do mouse no painel Gravador

O Gravador agora permite adicionar manualmente uma etapa de passar o cursor do mouse (hover) em uma gravação.

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

Se você reproduzir o fluxo de usuários agora, ele vai falhar porque o Recorder não captura eventos de passar o cursor do mouse automaticamente durante a gravação. Para resolver isso, adicione uma etapa manualmente para passar 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 performance

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 principais de uma Maior exibição de conteúdo (LCP).

Em uma gravação de performance, clique no selo LCP na Linha do tempo. No painel Detalhes, é possível conferir a pontuação de LCP, aprender a corrigir recursos que diminuem a velocidade do LCP e ver o caminho crítico do recurso de LCP.

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

Problema do Chromium: 1326481

Identificar flashes de texto (FOIT, FOUT) como possíveis causas principais de mudanças de layout

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

Para conferir as possíveis causas 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 aprender a técnica e evitar mudanças de layout.

Problemas do Chromium: 1334628, 1328873

Gerenciadores de protocolo no painel "Manifesto"

Agora você pode usar o DevTools para testar o registro do gerenciador de protocolos de URL para Progressive Web Apps (PWAs).

O registro do gerenciador de protocolos de URL permite que 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 Processadores de protocolo no painel Aplicativo > Manifesto. Você pode conferir e testar todos os protocolos disponíveis aqui.

Por exemplo, instale este PWA de demonstração. Na seção Processadores de protocolo, digite "americano" e clique em Testar protocolo para abrir a página de café no PWA.

Problemas do Chromium: 1300613

Selo da camada superior no painel "Elementos"

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

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

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 de camada superior (#top-layer) à árvore do DOM. Ele fica depois da tag de fechamento </html>.

Para pular do elemento 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 dele no contêiner da camada superior.

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

Problema do Chromium: 1313690

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

Agora é possível anexar informações de depuração DWARF para wasm durante o tempo de execução. Antes, o painel Fontes só permitia anexar 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 Adicionar informações de depuração DWARF… 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 façam uma interrupção em 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 mais alta pode ser editada durante a pausa
• Nenhuma chamada recursiva na mesma função mais abaixo na pilha

Problema do Chromium: 1334484

Ver e editar @scope nas regras no painel "Estilos"

Agora é possível conferir e editar as regras-arroba @scope do CSS no painel Estilos.

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

Abra esta página de demonstração e inspecione o hiperlink no elemento <div class=”dark-theme”>. No painel Estilos, 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:

• O DevTools agora resolve corretamente os identificadores de 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.
• Indexação corrigida de URLs de mapa 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 nesta versão:

• Remova corretamente um par de valores-chave de armazenamento local da tabela no painel Application > Local Storage quando ele for excluído. (1339280)
• As prévias de cores agora são exibidas corretamente ao visualizar arquivos CSS no painel Fontes. Antes, as posições estavam incorretas. (1340062)
• Mostrar de forma consistente os itens flexíveis e de grade do CSS no painel Layout, além de exibir como selos no painel Elementos. Antes, os itens flexíveis e de grade desapareciam aleatoriamente nos dois lugares. (1340441, 1273992).
• Um novo link Script de anúncio do criador de conteúdo está disponível para frames de anúncio 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, link em inglês)

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.