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.

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.

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.

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.

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 demonstração. 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.

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