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

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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59