Novidades do DevTools (Chrome 101)

Jecelyn Yeen

Importar e exportar fluxos de usuários gravados como um arquivo JSON

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

Por exemplo, faça o download deste arquivo JSON. É possível importar usando o botão de importação e reproduzir o fluxo do usuário.

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

  • Exportar como um arquivo JSON. Faça o download da gravação como um arquivo JSON.
  • Exportar como um script @puppeteer/replay. Faça o download da gravação como um script Puppeteer Replay.
  • Exportar como um script 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 do Gravador

Problema do Chromium: 1257499

Conferir camadas em cascata no painel "Styles"

As camadas em cascata permitem um controle mais explícito dos arquivos CSS para evitar conflitos de especificidade de estilo. Isso é útil principalmente para bases de código grandes, sistemas de design e ao gerenciar estilos de terceiros em aplicativos.

Neste exemplo, há três camadas em cascata definidas: page, component e base. No painel Styles, você pode conferir cada camada e os estilos dela.

Clique no nome da camada para conferir a ordem. A camada page tem a maior especificidade, portanto, o plano de fundo box é verde.

Conferir camadas em cascata no painel "Styles"

Problema do Chromium: 1240596

Suporte à função de cor hwb()

Agora você pode conferir e editar o formato de cores HWB no DevTools.

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

Também é possível mudar o formato de cor para HWB no seletor de cores.

Função de cor hwb()

Melhoramos a exibição de propriedades particulares

Agora, as DevTools avaliam e mostram corretamente os acessórios privados. Antes, não era possível expandir classes com os acionadores privados no Console e no painel Origens.

propriedades particulares no console

Problemas do Chromium: 1296855, https://crbug.com/1303407

Destaques diversos

Confira algumas correções importantes desta versão:

  • O cache de avanço e retorno agora mostra o ID da extensão que bloqueou o bfcache quando presente.( 1284548)
  • Correção do suporte de preenchimento automático para objetos semelhantes a matrizes, nomes de classes CSS, map.get e tags HTML. (1297101, 1297491, 1293807, 1296983).
  • Corrigimos os destaques incorretos ao clicar duas vezes em palavras e desfazer o preenchimento automático. (1298437, 1298667).
  • Correção do atalho de teclado para comentários no painel Origens. (1296535).
  • Reativamos o suporte ao uso da tecla Alt (Opções) para seleção múltipla no painel Origens. (1304070).

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

Além do modo navegação, o painel do Lighthouse agora oferece suporte a mais dois modos de medição de fluxos de usuários: período e resumo.

Por exemplo, você pode usar os relatórios de período para analisar as interações do usuário. Abra esta página de demonstração. Selecione o modo Timespan e clique em Start timespan. Na página, clique em uma xícara de café e encerre o período. Leia o relatório para descobrir o Tempo total de bloqueio e a mudança cumulativa de layout causados pela interação.

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

Modos de período e de resumo no painel do Lighthouse

Problema do Chromium: 772558

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.