Novidades do DevTools (Chrome 104)

Jecelyn Yeen

Reiniciar frame durante a depuração

O recurso Reiniciar frame está de volta. Você pode executar novamente o código anterior quando estiver pausado em algum lugar de uma função. Anteriormente, esse recurso foi descontinuado e removido no Chrome 92 devido a problemas de estabilidade.

Neste exemplo, o depurador inicialmente pausado no ponto de interrupção (linha 343) próximo ao final da função toggleColorScheme. Para reiniciar a depuração desde o início da função toggleColorScheme, expanda a seção Pilha de chamadas no painel Debugger, clique com o botão direito do mouse em toggleColorScheme e selecione Reiniciar frame.

Reiniciar frame durante a depuração

Problema do Chromium: 1303521

Opções de repetição lenta no painel do Gravador

Agora é possível reproduzir fluxos de usuários em uma velocidade mais lenta: lenta, muito lenta e extremamente lenta. Essas opções permitem observar melhor cada repetição de etapa na tela.

Abra o painel Gravador e inicie uma nova gravação. Quando a gravação for concluída, clique no botão suspenso Repetir. Selecione uma velocidade para iniciar a repetição.

Opções de repetição lenta no painel do Gravador

Problema do Chromium: 1306756

Criar uma extensão para o painel do Gravador

Agora você pode criar ou instalar uma extensão do Chrome para exportar scripts de repetição no formato que preferir. Consulte a documentação da API de extensão do Recorder para aprender a criar um.

Para instalar uma extensão de demonstração, siga estas etapas descritas na documentação.

extensão personalizada para o painel do Gravador

Problema do Chromium: 1325751

Agrupar arquivos por criado / implantado no painel Origens

Ative a nova opção Group files by Authored / Deployed para organizar seus arquivos no painel Sources. Ao desenvolver aplicativos da Web com frameworks (por exemplo, React, Angular), pode ser difícil navegar pelos arquivos de origem devido aos arquivos minimizados gerados pelas ferramentas de build (por exemplo, Webpack, Vite).

Com esta caixa de seleção, você pode agrupar arquivos em duas categorias para uma pesquisa mais rápida:

  • Criado. Semelhantes aos arquivos de origem que você visualiza no seu ambiente de desenvolvimento integrado. O DevTools gera esses arquivos com base nos mapas de origem (fornecidos pelas suas ferramentas de compilação).
  • Implantado. Os arquivos reais que o navegador lê. Normalmente, esses arquivos são reduzidos.

Teste você mesmo com esta demonstração do React.

Agrupar arquivos por criado / implantado no painel Origens

Problema do Chromium: 960909

Novo acompanhamento da velocidade do usuário no painel "Insights de desempenho"

Visualize as marcações performance.measure() na sua gravação com a nova faixa Velocidade do usuário no painel Insights de desempenho.

Por exemplo, esta página da Web usa o método performance.measure() para calcular o tempo decorrido do carregamento do texto.

Quando você começa a medir o carregamento da página, a faixa Velocidade do usuário aparece na gravação. Clique no item de marcações de tempo para ver os detalhes no painel lateral.

A velocidade do usuário acompanha no painel "Insights de desempenho"

Problema do Chromium: 1322808

Revelar o slot atribuído de um elemento

Os elementos com espaços no painel Elementos têm um novo selo slot. Ao depurar problemas de layout, use esse recurso para identificar o elemento que afeta o layout do nó mais rapidamente.

Este exemplo contém cards com alguns slots nomeados. Inspecione o slot person-occupation de um cartão e clique no selo slot ao lado para ver o slot atribuído.

Saiba como usar os elementos <template> e <slot> para criar um modelo flexível que pode ser usado para preencher o shadow DOM de um componente da Web.

Revelar o slot atribuído de um elemento

Problema do Chromium: 1018906

Simular a simultaneidade de hardware para gravações de desempenho

A nova configuração de Simultaneidade de hardware no painel Desempenho permite que os desenvolvedores configurem o valor informado por navigator.hardwareConcurrency.

Alguns aplicativos usam navigator.hardwareConcurrency para controlar o grau de paralelismo, por exemplo, para controlar o tamanho do pool de linhas de execução Emscripten. Com esse recurso, os desenvolvedores podem testar o desempenho dos aplicativos com diferentes contagens de núcleos.

Simular a simultaneidade de hardware para gravações de desempenho

Problema do Chromium: 1297439

Visualizar o valor sem cor ao preencher automaticamente as variáveis CSS

Ao preencher automaticamente as variáveis CSS, o DevTools agora preenche a variável que não é de cor com um valor significativo para que você possa visualizar o tipo de alteração que o valor terá no nó.

Visualizar o valor sem cor ao preencher automaticamente as variáveis CSS

Problema do Chromium: 1285091

Identificar frames de bloqueio no painel Cache de avanço e retorno

O painel Cache de avanço e retorno no painel Aplicativo tem novas frames para ajudar você a identificar frames de bloqueio que podem estar impedindo que a página seja qualificada para o bfcache.

Identificar frames de bloqueio no painel Cache de avanço e retorno

Problema do Chromium: 1288158

Sugestões de preenchimento automático aprimoradas para objetos JavaScript

O preenchimento automático para propriedades do objeto JavaScript agora é exibido com base nesta ordem:

  1. Ter propriedades enumeráveis
  2. Deter propriedades não enumeráveis
  3. Propriedades enumeráveis herdadas
  4. Propriedades não enumeráveis herdadas

Antes, os desenvolvedores achavam mais difícil encontrar propriedades relevantes porque a sugestão favorecia apenas as propriedades próprias em vez das herdadas, e todas as propriedades herdadas tinham a mesma prioridade.

Sugestões de preenchimento automático aprimoradas para objetos JavaScript

Problema do Chromium: 1299241

Melhorias nos mapas de origem

Estas são algumas correções nos mapas de origem para melhorar a experiência geral de depuração:

  • Os pontos de interrupção agora funcionam no <script> inline com anotações sourceURL
  • O depurador agora resolve variáveis com escopo de bloco na visualização Scope com mapas de origem. Resolve variáveis com escopo de bloco
  • O depurador agora resolve variáveis em funções de seta na visualização Scope com mapas de origem. Resolve variáveis em funções de seta

Problemas do Chromium: 1329113, 1322115

Destaques diversos

Estas são algumas correções importantes nesta versão:

  • Corrigimos a configuração Preenchimento automático do painel Fontes. Antes, esse recurso estava sempre ativado, mesmo que a configuração estivesse desativada. (1323286).
  • Atualizamos a guia Manifest no painel Aplicativo para analisar o formato de esquema de cores mais recente. (1318305).
  • Melhoramos as sugestões para os problemas de bloqueio de renderização de <script async> no painel Insights de desempenho. Anteriormente, o DevTools sugeriu add async attribute to the script tag, mesmo que o script já estivesse marcado como assíncrono. (1334096).
  • O painel Insights de desempenho agora detecta iframes como possíveis causas de mudanças de layout. É possível visualizar os detalhes do iframe no painel Details. (1328873).
  • Quando abrir o arquivo no menu de comando, os arquivos criados (gerados pelos mapas de origem) têm uma classificação mais alta para que apareçam acima dos scripts implantados com nomes semelhantes. (1312929).

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