Novidades do DevTools (Chrome 103)

Jecelyn Yeen

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

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

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

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

  • Clique duas vezes no card para ampliá-lo
  • Clique com o botão direito do mouse no card e selecione uma ação no menu de contexto

Para entender como o Gravador capturou esses eventos, expanda 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 período e modo de 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 período e modo de resumo no painel do Lighthouse

O painel Lighthouse agora é compatível com três modos de medição do fluxo do usuário:

  • Os relatórios de navegação analisam um único carregamento de 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íodos 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, geralmente depois da interação do usuário com ela.

Por exemplo, vamos avaliar o desempenho 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 tela e adicione alguns itens ao carrinho. Quando terminar, clique em Período de término para gerar um relatório do Lighthouse com as interações do usuário.

Modo de período

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

Problema do Chromium: 1291284

Atualizações dos insights de desempenho

Controle de zoom melhorado no painel "Insights de desempenho"

O DevTools agora vai aumentar o zoom com base no cursor do mouse em vez da posição do marcador.Com o zoom mais recente baseado em cursor, você pode mover o mouse para qualquer lugar na faixa e aumentar o zoom na área desejada imediatamente.

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

Problema do Chromium: 1313382

Confirme para excluir uma gravação de performance

O DevTools agora 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 com base nas suas preferências.

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

Reordenar painéis no painel Elementos

Problema do Chromium: 1146146

Escolher uma cor fora do navegador

O DevTools agora oferece suporte à seleção de uma cor fora do navegador. Antes, só era possível escolher uma cor no navegador.

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

Escolher uma cor fora do navegador

Problema do Chromium: 1245191

Visualização aprimorada do valor 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. Anteriormente, o depurador não mostrava o valor x na visualização in-line.

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. Você pode ativá-la apenas para autenticadores com o protocolo ctap2 que oferecem suporte a chaves residentes.

Suporte a blobs grandes para autenticadores virtuais

Problema do Chromium: 1321803

Novos atalhos do teclado no painel "Origens"

Dois novos atalhos de teclado estão 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 passavam por falhas aleatórias durante:

  • Como depurar com o Codepen
  • Como identificar o local de 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 local e deslocamento para scripts in-line e local de origem
  • 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 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.