Novidades do DevTools (Chrome 101)

Jecelyn Yeen

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

O painel Gravador agora oferece suporte à importação e exportação de registros 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, 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:

• Exporte 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 script do Puppeteer . Faça o download da gravação como script do Puppeteer.

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

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 é particularmente útil para grandes bases de código, 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 dela. A camada page tem a maior especificidade, portanto, o plano de fundo box é verde.

Problema do Chromium: 1240596

Suporte à função de cor hwb()

Agora é possível visualizar 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.

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

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

Destaques diversos

Estas são algumas correções importantes nesta 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).
• Correção de destaques incorretos ao clicar duas vezes em palavras e desfazer o preenchimento automático. (1298437, 1298667).
• Corrigimos o atalho de teclado de comentário no painel Sources. (1296535).
• Reative 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 de navegação atual, 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 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 próprios. Consulte a documentação do Lighthouse para mais informações.

Problema do Chromium: 772558

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu 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 novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Para informar um problema do DevTools, use more_vert em Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet em @ChromeDevTools.
• Deixe comentários nos vídeos de Novidades do DevTools no YouTube ou de dicas do DevTools no YouTube.

Novidades no DevTools

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