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 pausado em algum lugar em uma função. Antes, esse recurso foi descontinuado e removido no Chrome 92 por problemas de estabilidade.

Neste exemplo, o depurador inicialmente pausou 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, abra a seção Pilha de chamadas no painel Debugger, clique com o botão direito do mouse em toggleColorScheme e selecione Reiniciar frame.

Problema do Chromium: 1303521

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

Agora você pode reproduzir os fluxos de usuários em uma velocidade mais lenta: lenta, muito lenta e extremamente lenta. Essas opções permitem observar melhor a repetição de cada 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.

Problema do Chromium: 1306756

Criar uma extensão para o painel Gravador

Agora você pode criar ou instalar uma extensão do Chrome para exportar scripts de repetição no seu formato favorito. Consulte a documentação da API de extensão Recorder para saber como criar uma.

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

Problema do Chromium: 1325751

Agrupar arquivos por Criado / implantado no painel Origens

Ative a nova opção Agrupar arquivos por Criado / Implantado para organizar seus arquivos no painel "Origens". Ao desenvolver aplicativos da Web com frameworks (por exemplo, React, Angular), pode ser difícil navegar pelos arquivos de origem devido aos arquivos minificados gerados pelas ferramentas de build (por exemplo, Webpack, Vite).

Com essa caixa de seleção, é possível agrupar arquivos em duas categorias para uma pesquisa mais rápida:

• Criado. Semelhante aos arquivos de origem exibidos no ambiente de desenvolvimento integrado. O DevTools gera esses arquivos com base em mapas de origem (fornecidos pelas suas ferramentas de build).
• Implantado. Os arquivos que o navegador lê. Normalmente, esses arquivos são reduzidos.

Faça um teste com esta demonstração do React.

Problema do Chromium: 960909

Nova faixa de velocidade do usuário no painel de insights de desempenho

Visualize as marcas de performance.measure() no seu registro com a nova faixa de Velocidades 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 até o carregamento do texto.

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

Problema do Chromium: 1322808

Revelar o espaço atribuído de um elemento

Os elementos com slots 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 dele para revelar o slot atribuído.

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

Problema do Chromium: 1018906

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

A nova configuração 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 do aplicativo, por exemplo, para controlar o tamanho do pool de pthread Emscripten. Com esse recurso, os desenvolvedores podem testar o desempenho do aplicativo com diferentes contagens de núcleos.

Problema do Chromium: 1297439

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

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

Problema do Chromium: 1285091

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

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

Problema do Chromium: 1288158

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

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

1. Ter propriedades enumeráveis
2. Ter 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 próprias propriedades em vez de herdadas, e todas as propriedades herdadas recebiam a mesma prioridade.

Problema do Chromium: 1299241

Melhorias nos mapas de origem

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

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

Problemas do Chromium: 1329113, 1322115

Destaques diversos

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

• Corrigimos a configuração de Preenchimento automático do painel Origens. Antes, esse recurso estava sempre ativado, mesmo quando a configuração estava 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 sugeria a 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 para mudanças de layout. Confira os detalhes do iframe no painel Detalhes. (1328873).
• Quando abrir arquivo no Menu de comando, os arquivos criados (gerados pelos mapas de origem) agora recebem uma classificação mais alta e aparecem acima de 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 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.