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 Gravador 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 tente seguir 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 está definida como secondary. O valor button de um clique normal do mouse é primary.

Problemas do Chromium: 1300839, 1322879, 1299701 e 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ágina.

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

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

  • 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 geralmente 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 a performance de 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

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

Problema do Chromium: 1291284

Atualizações dos insights de desempenho

Controle de zoom aprimorado no painel "Insights de desempenho"

Agora, o DevTools aumentará o zoom com base no cursor do mouse em vez da posição do marcador.Com o mais recente zoom baseado no 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 acionáveis e melhorar o desempenho do seu site com o painel.

Problema do Chromium: 1313382

Confirme 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 desempenho.

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

Problema do Chromium: 1318087

Reordenar painéis no painel Elementos

Agora é possível reordenar os painéis no painel Elementos com base na sua preferência.

Por exemplo, ao abrir o DevTools em uma tela estreita, o painel Accessibility fica oculto sob o botão Show more. Se você depura 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

Escolher uma cor fora do navegador

O DevTools agora oferece suporte à escolha 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 cores para abrir um seletor de cores. Use o conta-gotas para escolher a cor de qualquer lugar.

Escolher uma cor fora do navegador

Problema do Chromium: 1245191

Visualização do valor inline aprimorada 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 do valor inline aprimorada 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 Oferece suporte a blob grande para autenticadores virtuais.

Essa caixa de seleção está desativada por padrão. Você pode ativá-lo 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 do teclado agora estão disponíveis no painel Fontes:

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

Novos atalhos do teclado para o painel Origens

Problemas do Chromium: 1226363

Melhorias nos mapas de origem

Anteriormente, os desenvolvedores enfrentavam falhas aleatórias durante:

  • Depuração com exemplo do Codepen
  • Identificar a localização de origem dos problemas de desempenho em um exemplo do Codepen.
  • Guia Component ausente quando o React DevTools está ativado

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

  • Mapeamento correto entre o local e o deslocamento para scripts in-line e local de origem
  • Usar informações substitutas para o local do texto do frame
  • Resolver corretamente os URLs relativos com o URL do frame

Problemas do Chromium: 1319828, 1318635 e 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59