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 do 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 será pausada antes da execução da etapa. Você pode continuar a repetição, executar uma etapa ou cancelar a repetição.

Com esse recurso, você pode visualizar e depurar totalmente o fluxo do usuário com facilidade.

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

Repetição detalhada no Gravador

Problema do Chromium: 1257499

Suporte ao evento de mouseover no painel Gravador

O Gravador agora oferece suporte à adição manual de uma etapa de passar o cursor 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ê repetir o fluxo do usuário agora, ele falhará, porque o Gravador não captura eventos de passagem 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.

Suporte ao evento de mouseover no Gravador

Problema do Chromium: 1257499

Largest Contentful Paint (LCP) no painel de insights de desempenho

A LCP é uma métrica importante centrada no usuário para medir a velocidade de carregamento percebida. Agora é possível descobrir os caminhos críticos e as causas raiz de uma Largest Contentful Paint (LCP).

Em uma gravação de performance, clique no selo de LCP na linha do tempo. No painel Detalhes, é possível consultar a pontuação de LCP, saber como corrigir recursos que atrasam a LCP e ver o caminho crítico do recurso.

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

LCP no painel de insights de desempenho

Problema do Chromium: 1326481

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

O painel Insights de desempenho agora detecta o flash de texto invisível (FOIT, na sigla em inglês) e o flash de texto sem estilo (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 Layout shifts.

Consulte Otimizar o carregamento e a renderização do WebFont para aprender a técnica que evita mudanças de layout.

FOUT no painel de insights de desempenho

Problemas do Chromium: 1334628, 1328873

Gerenciadores de protocolo no painel "Manifest"

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

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

Navegue até a seção Manipuladores de protocolo em Aplicativo > Painel Manifest. Confira e teste todos os protocolos disponíveis aqui.

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

Gerenciadores de protocolo no painel "Manifest"

Problemas do Chromium: 1300613

Selo de camada superior no painel Elementos

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

O elemento <dialog> se tornou estável em vários navegadores. 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 outro conteúdo.

Nesta demo, 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 do contêiner da camada superior para o elemento da árvore de camadas superior, clique no botão revelar ao lado do elemento ou do pano de fundo dele no contêiner da camada superior.

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

Selo de camada superior no painel Elementos

Problema do Chromium: 1313690

Anexar informações de depuração do Wasm durante a execução

Agora você pode anexar informações de depuração DWARF para Wasm durante o tempo de execução. Antes, o painel Origens só aceitava 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.

ALT_TEXT_HERE

Problema do Chromium: 1341255

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

Agora você pode editar a função mais alta na pilha sem reiniciar o depurador.

No Chrome 104, o DevTools traz de volta o recurso de reinicialização do frame. No entanto, você não conseguiu editar a função na qual está pausada no momento. É comum que os desenvolvedores interrompam uma função e a editem enquanto estiverem pausados.

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

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

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

Problema do Chromium: 1334484

Confira e edite as regras do @scope no painel "Styles"

Agora você pode conferir e editar as regras de @scope do CSS no painel Estilos.

O @scope nas regras faz parte da especificação do CSS em cascata e nível 6 de herança. 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 Estilos, confira as regras em @scope. Clique na declaração da regra para editá-la.

Use @scope nas regras no painel &quot;Styles&quot;.

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 do mapa de origem com pontuação. Alguns minificadores modernos (por exemplo, esbuild) produzem mapas de origem que mesclam identificadores. por 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. ALT_TEXT_HERE
  • Corrigimos a indexação de URLs do 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

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

  • Remova corretamente um par de chave-valor de armazenamento local da tabela em Aplicativo > Armazenamento local quando ele é excluído. (1339280).
  • As visualizações de cores agora são exibidas corretamente ao visualizar arquivos CSS no painel Sources. Antes, esses cargos estavam perdidos. (1340062).
  • Exibir de maneira consistente os itens CSS flexíveis e de grade no painel Layout, bem como exibi-los como selos no painel Elementos. Antes, os itens flexíveis e de grade estavam ausentes aleatoriamente nos dois lugares. (1340441, 1273992).
  • Um novo link Script do anúncio do criador de conteúdo vai estar disponível para frames de anúncios se o DevTools encontrar o script que fez o frame ser rotulado como um anúncio. É possível abrir um frame em Aplicativo > Frames. (1217041).

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