Novidades do DevTools (Chrome 101)

Jecelyn Yeen

Importar e exportar fluxos de usuários registrados 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. Você pode importá-lo com o botão de importação e repetir o fluxo do usuário.

Além disso, você também pode exportar a gravação. Depois de gravar um fluxo do 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.
  • Exporte como um script @puppeteer/replay. Faça o download da gravação como script de 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.

Opções de exportação no painel 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 é 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 Estilos, é possível visualizar cada camada e os estilos delas.

Clique no nome da camada para conferir a ordem dela. 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 para a função de cor hwb()

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

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

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

função de cor hwb()

Melhoria na exibição de propriedades particulares

O DevTools agora avalia e exibe corretamente os acessadores particulares. Antes, não era possível expandir as turmas com os acessadores particulares no Console e no painel Fontes.

propriedades particulares no console

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 da compatibilidade com o 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 modo de resumo e período 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, é possível usar os relatórios de período para analisar as interações do usuário. Abra esta página de demo. Selecione o modo Período e clique em Iniciar período. Na página, clique em um café e encerre o período. Leia o relatório para descobrir o Tempo total de bloqueio e a Mudança de layout cumulativa que foram causadas 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.

Modo de período e 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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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