Novidades do DevTools (Chrome 101)

Jecelyn Yeen

Importar e exportar os 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 dos fluxos de usuários e pode ser útil para gerar relatórios de bugs.

Por exemplo, faça o download deste arquivo JSON. É possível importá-lo com o botão de importação e repetir o fluxo do usuário.

Além disso, também é possível 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.
  • Exporte como um script @puppeteer/replay. Faça o download da gravação como um script de Puppeteer Replay.
  • Exportar como um script Puppeteer Faça o download da gravação como um 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 Estilos

As camadas em cascata permitem um controle mais explícito dos arquivos CSS para evitar conflitos de especificidade do 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, você encontra cada camada e os estilos delas.

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

Conferir camadas em cascata no painel Estilos

Problema do Chromium: 1240596

Suporte para a função de cor hwb()

Agora é possível conferir e editar o formato de cores HWB no DevTools.

No painel Estilos, mantenha a tecla Shift pressionada e clique em qualquer visualização de cores para alterar o formato. 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 privados. Antes, não era possível expandir as classes com acessadores particulares no Console e no painel Origens.

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 bfcache quando presente (1284548).
  • O suporte ao preenchimento automático foi corrigido para objetos semelhantes a matrizes, nomes de classes CSS, tags map.get e HTML. (1297101, 1297491, 1293807, 1296983).
  • Corrigimos os destaques incorretos ao clicar duas vezes nas palavras e desfazer o preenchimento automático. (1298437, 1298667).
  • Corrigimos o atalho de teclado de comentários no painel Origens. (1296535).
  • Reative o suporte ao uso da tecla Alt (opções) para seleção múltipla no painel Origens. (1304070).

[Experimental] Novo modo de período e instantâneo no painel do Lighthouse

Além do modo de navegação, o painel Lighthouse agora oferece mais dois modos para medir os 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 únicos. 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59