O que há de novo no DevTools (Chrome 103)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Lucas Santos. Revisão por Alvaro Camillo Neto.

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Gravação de eventos de clique duplo e clique com o botão direito do mouse

O painel Gravação agora pode capturar eventos de clique duplo e clique com o botão direito.

Captura de eventos de clique duplo e clique com o botão direito do mouse no painel Gravação

Neste [exemplo](https://jec.fyi/demo/dbl-click direito), inicie uma gravação e tente executar as seguintes etapas:

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

Para entender como o Gravador capturou esses eventos, expanda as etapas:

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

Issues relacionadas: 1300839, 1322879, 1299701, 1323688

Novo intervalo de tempo e modo de instantâneo no painel Lighthouse

Agora você pode usar o Lighthouse para avaliar o desempenho do seu site além do carregamento da página.

Novo intervalo de tempo e modo de instantâneo no painel Lighthouse

O painel Lighthouse agora oferece suporte a 3 modos de medição de vazão do usuário:

  • Os relatórios Navigation 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 Timespans analisam um período de tempo arbitrário, geralmente contendo interações do usuário.
  • Os relatórios Snapshots analisam a página em um estado específico, geralmente depois que o usuário interage com ela.

Por exemplo, vamos medir o desempenho de adicionar itens ao carrinho nesta página de demonstração. Selecione o modo Timespan e clique em Start timespan. Adicione alguns itens ao carrinho. Quando terminar, clique em End timespan para gerar um relatório do Lighthouse das interações do usuário.

Modo Timespan

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

Issue relacionada: 1291284

Atualizações do Performance Insights

Controle de zoom aprimorado no painel Performance Insights

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

Consulte Performance Insights para saber como obter insights acionáveis e melhorar o desempenho do seu site com o painel.

Issue relacionada: 1313382

Confirmação para excluir uma gravação de apresentação

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

Confirmação para excluir uma gravação de apresentação

Issue relacionada: 1318087

Reordenar painéis no painel Elementos

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

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

Reordenar painéis no painel Elementos

Issue relacionada: 1146146

Escolhendo uma cor fora do navegador

O DevTools agora suporta a escolha de uma cor fora do navegador. Anteriormente, você só podia 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 a cor de qualquer lugar.

Escolhendo uma cor fora do navegador

Issue relacionada: 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 inline.

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

Issue relacionada: 1316340

Suporte a blobs grandes para autenticadores virtuais

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

Esta caixa de seleção está desabilitada por padrão. Você pode habilitá-lo apenas para os autenticadores com protocolo ctap2 que suportam chaves residentes.

Suporte blobs grandes para autenticadores virtuais

Issue relacionada: 1321803

Novos atalhos de teclado no painel Sources

Dois novos atalhos de teclado agora estão disponíveis no painel Fontes:

  • Alterne a barra lateral navegação (esquerda) com Control/Command + Shift + Y
  • Alterne a barra lateral depurador (direita) com Control/Command + Shift + H
Novos atalhos de teclado no painel Sources

Issues relacionadas: 1226363

Melhorias nos sourcemaps

Anteriormente, os desenvolvedores apresentavam falhas aleatórias durante:

  • Exemplo de depuração com Codepen
  • Identificando o local de origem dos problemas de desempenho em um exemplo do Codepen
  • Falta a guia Component quando React DevTools está ativado

Aqui estão algumas correções nos sourcesmaps para melhorar a experiência geral de depuração:

  • Mapeamento correto entre localização e deslocamento para scripts embutidos e localização de origem
  • Uso de informações de fallback para a localização do texto do frame
  • Resolve corretamente os URLs relativos com o URL do frame

Issues relacionadas: 1319828, 1318635, 1305475

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.