Novidades do DevTools (Chrome 103)

Jecelyn Yeen

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

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

Neste exemplo, inicie uma gravação e tente realizar as seguintes 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, expanda as etapas:

• O clique duplo é capturado como type: doubleClick.
• O evento de clique com o botão direito é capturado como type: click, mas a propriedade button é definida 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 você pode usar o Lighthouse para medir a performance do seu site além do carregamento de páginas.

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

• 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 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 instantâneos 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 tela e adicione alguns itens ao carrinho. Quando terminar, clique em Período final para gerar um relatório do Lighthouse sobre as interações do usuário.

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

Problema do Chromium: 1291284

Atualizações dos Insights de performance

Controle de zoom aprimorado no painel "Insights de desempenho"

Agora, o DevTools vai aumentar o zoom com base no cursor do mouse, e não na posição do cabeçote de reprodução.Com o zoom mais recente baseado no cursor, você pode mover o mouse para qualquer lugar na faixa e aumentar o zoom na área desejada imediatamente.

Consulte Insights de performance para saber como receber insights úteis e melhorar o desempenho 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.

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

Problema do Chromium: 1146146

Escolher uma cor fora do navegador

Agora o DevTools permite escolher uma cor fora do navegador. Antes, só era possível escolher uma cor no navegador.

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

Problema do Chromium: 1245191

Melhoria na prévia de valores in-line durante a depuração

O depurador agora mostra a prévia dos valores in-line 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 prévia inline mostra os valores a e x corretamente. Antes, o depurador não mostrava o valor x na visualização in-line.

Problema do Chromium: 1316340

Suporte a blobs grandes para autenticadores virtuais

A guia WebAuthn agora tem a nova caixa de seleção Suporta blob grande para autenticadores virtuais.

Essa caixa de seleção fica desativada por padrão. É possível ativar apenas para autenticadores com protocolo ctap2 que aceitam chaves residentes.

Problema do Chromium: 1321803

Novos atalhos do teclado no painel "Origens"

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

• Ative/desative a barra lateral de navegação (esquerda) com Control / Command + Shift + Y
• Ative/desative a barra lateral do depurador (direita) com Control / Command + Shift + H

Problemas do Chromium: 1226363

Melhorias nos mapas de origem

Antes, os desenvolvedores enfrentavam falhas aleatórias durante:

• Como depurar com o exemplo do Codepen
• 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:

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

Problemas do Chromium: 1319828, 1318635, 1305475

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.