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

Published on Updated on

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

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

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

Importe e exporte fluxos de usuário gravados como um arquivo JSON

O painel Recorder agora oferece suporte à importação e exportação de gravações de fluxo do usuário como um arquivo JSON. Essa adição facilita o compartilhamento de fluxos de usuários e pode ser útil para relatórios de bugs.

Por exemplo, baixe este arquivo JSON. Você pode importá-lo com o botão de importação e reproduzir o fluxo do usuário.

Além disso, você também pode exportar a gravação. Após gravar um fluxo de usuário, clique no botão de exportação. Existem 3 opções de exportação:

Exportar como arquivo JSON. Faça o download da gravação como um arquivo JSON. Exportar como script @puppeteer/replay. Faça o download da gravação como um script de Puppeteer Replay. Exportar como script de Puppeteer . Faça o download da gravação como script Puppeteer.

Consulte a documentação para saber mais sobre as diferenças entre essas opções.

Opções de exportação no painel Gravador

Issue relacionada: 1257499

Visualize cascade layers no painel Estilos

Cascade Layers permitem um controle mais explícito de seus arquivos CSS para evitar conflitos de especificidade de estilo. Isso é particularmente útil para grandes bases de código, sistemas de design e ao gerenciar estilos de terceiros em aplicativos.

Neste exemplo, existem 3 camadas em cascata definidas: page, component e base. No painel Estilos, você pode visualizar cada camada e seus estilos.

Clique no nome da camada para ver a ordem das camadas. A camada page tem a maior especificidade, portanto o fundo box é verde.

Visualização cascade layers no painel Estilos

Issue relacionada: 1240596

Suporte para a função de cor hwb()

Agora você pode visualizar e editar formato de cor HWB no DevTools.

No painel Estilos, mantenha pressionada a tecla Shift e clique em qualquer visualização de cor para alterar o formato da cor. O formato de cores HWB foi adicionado.

Como alternativa, você pode alterar o formato da cor para HWB no seletor de cores.

função de cor hwb()

Melhoria na exibição de propriedades privadas

O DevTools agora avalia e exibe corretamente as propriedades privadas. Anteriormente, não era possível expandir classes com propriedades privadas no painel Console e Fontes. propriedades privadas no console

Issues relacionadas: 1296855, https://crbug.com/1303407

Destaques diversos

Estas são algumas correções notáveis nesta versão:

  • O cache de retorno/avanço agora exibe o ID da extensão que bloqueou o bfcache quando presente.(1284548)
  • Corrigido suporte de autocompletar para objetos do tipo array, nomes de classe CSS, map.get e tags HTML. (1297101, 1297491, 1293807, 1296983)
  • Corrigido destaques incorretos ao clicar duas vezes nas palavras e desfazer o preenchimento automático. (1298437, 1298667)
  • Correção do atalho de teclado para comentários no painel Fontes. (1296535)
  • Reativado o suporte para usar a tecla Alt (Opções) para seleção múltipla no painel Fontes. (1304070)

[Experimental] Novos modos timespan e snapshot no painel Lighthouse

Para ativar o experimento, ative a caixa de seleção Usar painel Lighthouse com modos de intervalo de tempo e instantâneo em Configurações > Experimentos.

Além do modo de navegação existente, o painel Lighthouse agora oferece suporte a mais dois modos de medição de fluxos de usuários - timespan e snapshot.

Por exemplo, você pode usar os relatórios de timespan para analisar as interações do usuário. Abra esta página demo. Selecione o modo Timespan e clique em Começar timespan. Na página, clique em um café e encerre o intervalo de tempo. Leia o relatório para descobrir o Total Blocking Time e Cumulative Layout Shift que foram causados pela interação.

Cada modo tem seus próprios casos de uso, benefícios e limitações. Consulte a documentação do Lighthouse para obter mais informações.

Modos Timespan e snapshot no painel do Lighthouse

Issue relacionada: 772558

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