Novidades do DevTools (Chrome 103)

Jecelyn Yeen

Capturar eventos de clique duplo e clique com o botão direito do mouse no painel do gravador

O painel Recorder agora pode capturar eventos de clique duplo e clique com o botão direito do mouse.

Capturar eventos de clique duplo e clique com o botão direito do mouse no painel do gravador

Neste exemplo, inicie uma gravação e siga estas etapas:

  • Clique duas vezes no card para ampliar
  • Clique com o botão direito do mouse no card e selecione uma ação no menu de contexto.

Para entender como o Recorder capturou esses eventos, abra as etapas:

  • O clique duplo é capturado como type: doubleClick.
  • O evento de clique com o botão direito do mouse é capturado como type: click, mas com a propriedade button é definido como secondary. O valor button de um clique normal do mouse é primary.

Problemas do Chromium: 1300839, 1322879, 1299701, 1323688

Novo modo de período e resumo no painel do Lighthouse

Agora é possível usar o Lighthouse para medir a performance do site além do carregamento de página.

Novo modo de período e resumo no painel do Lighthouse

O painel do Lighthouse agora oferece suporte a três modos de medição de fluxo de usuários:

  • Os relatórios de navegação analisam o carregamento de uma única página. A navegação é o tipo de relatório mais comum. Todos os relatórios do Lighthouse anteriores à versão atual são relatórios de navegação.
  • Os relatórios de período analisam um período arbitrário, que normalmente contém interações do usuário.
  • Os relatórios de snapshots analisam a página em um estado específico, normalmente depois que o usuário interage com ela.

Por exemplo, vamos medir a performance da adição de itens ao carrinho nesta página de demonstração. Selecione o modo Período e clique em Iniciar período. Role a página e adicione alguns itens ao carrinho. Quando terminar, clique em Encerrar período para gerar um relatório do Lighthouse sobre as interações do usuário.

Modo de período

Consulte Fluxos de usuários no Lighthouse para saber mais sobre os casos de uso, os benefícios e as limitações de cada modo.

Problema do Chromium: 1291284

Atualizações dos insights de performance

Controle de zoom aprimorado no painel "Insights de desempenho"

Agora, as Ferramentas do desenvolvedor vão dar zoom com base no cursor do mouse em vez da posição do indicador de reprodução.Com o zoom mais recente baseado no cursor, você pode mover o mouse para qualquer lugar na faixa e dar zoom na área desejada imediatamente.

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

Problema do Chromium: 1313382

Confirmar a exclusão de uma gravação de performance

Agora, o DevTools mostra uma caixa de diálogo de confirmação antes de excluir uma gravação de performance.

Confirme para excluir uma gravação de performance

Problema do Chromium: 1318087

Reordenar painéis no painel "Elementos"

Agora você pode reordenar os painéis no painel Elementos de acordo com sua preferência.

Por exemplo, quando você abre o DevTools em uma tela estreita, o painel Acessibilidade fica oculto sob o botão Mostrar mais. Se você debbuga problemas de acessibilidade com frequência, agora é possível arrastar o painel para a frente para facilitar o acesso.

Reordenar painéis no painel Elementos

Problema do Chromium: 1146146

Como escolher uma cor fora do navegador

Agora, as Ferramentas do desenvolvedor oferecem suporte à seleção de uma cor fora do navegador. Antes, só era possível escolher uma cor no navegador.

No painel Styles, clique em qualquer visualização de cores para abrir um seletor de cores. Use o conta-gotas para escolher cores em qualquer lugar.

Como escolher uma cor fora do navegador

Problema do Chromium: 1245191

Melhoria na visualização de valores inline durante a depuração

O depurador agora mostra a visualização dos valores inline corretamente.

Neste exemplo, a função double tem um parâmetro de entrada a e uma variável x. Coloque um ponto de interrupção na linha return e execute o código. A visualização inline mostra os valores a e x corretamente. Antes, o depurador não mostrava o valor x na visualização inline.

Visualização aprimorada do valor inline durante a depuração

Problema do Chromium: 1316340

Suporte a blobs grandes para autenticadores virtuais

A guia WebAuthn agora tem a nova caixa de seleção Suporte a blobs grandes para autenticadores virtuais.

Essa caixa de seleção fica desativada por padrão. É possível ativar esse recurso apenas para os autenticadores com protocolo ctap2 que oferecem suporte a chaves residentes.

Suporte a blobs grandes para autenticadores virtuais

Problema do Chromium: 1321803

Novos atalhos de teclado no painel "Origens"

Agora há dois novos atalhos de teclado disponíveis no painel Origens:

  • Alternar a barra lateral de navegação (à esquerda) com Control / Command + Shift + Y
  • Alternar a barra lateral do debugger (à direita) com Control / Command + Shift + H

Novos atalhos de teclado para o painel "Origens"

Problemas do Chromium: 1226363

Melhorias nos mapas de origem

Antes, os desenvolvedores enfrentavam falhas aleatórias durante:

  • Exemplo de depuração com o Codepen
  • Como identificar a origem dos problemas de desempenho em um exemplo do Codepen
  • A guia Componente não aparece quando o React DevTools está ativado

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

  • Mapeamento correto entre a localização e o deslocamento para scripts inline e a localização da fonte
  • Usar informações de substituição para o local do texto do frame
  • Resolver corretamente URLs relativos com o URL do frame

Problemas do Chromium: 1319828, 1318635, 1305475

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.

Novidades no DevTools

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