Novidades do DevTools (Chrome 104)

Jecelyn Yeen

Reiniciar frame durante a depuração

O recurso Reiniciar frame está de volta. É possível executar novamente o código anterior quando ele estiver pausado em algum lugar de uma função. Esse recurso foi descontinuado e removido no Chrome 92 devido a problemas de estabilidade.

Neste exemplo, o depurador foi pausado inicialmente no ponto de interrupção (linha 343) perto do final da função toggleColorScheme. Para reiniciar a depuração desde o início da função toggleColorScheme, abra a seção Call stack no painel Debugger, clique com o botão direito do mouse em toggleColorScheme e selecione Restart frame.

Problema do Chromium: 1303521

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

Agora é possível reproduzir fluxos de usuários em uma velocidade mais lenta: lenta, muito lenta e extremamente lenta. Essas opções permitem que você observe melhor 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 de menu suspenso Repetir. Selecione uma velocidade para iniciar a repetição.

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 seu formato favorito. Consulte a documentação da API da 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 autoria / implantação 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, você pode agrupar arquivos em duas categorias para uma pesquisa mais rápida:

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

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

Problema do Chromium: 960909

Nova métrica "Tempos do usuário" no painel "Insights de desempenho"

Visualize as marcas performance.measure() na sua gravação com a nova faixa Tempos do usuário no painel Insights de performance.

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

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

Problema do Chromium: 1322808

Mostrar o slot atribuído de um elemento

Os elementos com ranhura no painel Elementos têm um novo ícone 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 algumas posições nomeadas. Inspecione o slot person-occupation de um card e clique no selo slot ao lado dele para revelar 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.

Problema do Chromium: 1018906

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

A nova configuração Concorrência de hardware no painel Performance 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 pthread do Emscripten. Com esse recurso, os desenvolvedores podem testar o desempenho do aplicativo com diferentes contagens de núcleos.

Problema do Chromium: 1297439

Visualizar o valor não colorido ao preencher automaticamente variáveis CSS

Ao preencher automaticamente variáveis CSS, o DevTools agora preenche a variável não colorida com um valor significativo para que você possa ter uma prévia do tipo de mudança que o valor vai ter no nó.

Problema do Chromium: 1285091

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

O painel Cache de ida/volta no painel Aplicativo tem uma nova seção de frames para ajudar a identificar frames de bloqueio que podem estar impedindo que a página seja qualificada para 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 é mostrado com base nesta ordem:

1. Propriedades enumeráveis próprias
2. Propriedades não enumeráveis próprias
3. Propriedades enumeráveis herdadas
4. Propriedades não enumeráveis herdadas

Antes, os desenvolvedores tinham mais dificuldade para encontrar propriedades relevantes porque a sugestão favorecia apenas as propriedades próprias em relação às herdadas, e todas as herdadas tinham 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 de sourceURL.
• O depurador agora resolve variáveis com escopo de bloco na visualização Escopo 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

Confira algumas correções importantes desta versão:

• Corrigimos a configuração Preenchimento automático do painel Origens. Anteriormente, o preenchimento automático estava sempre ativado, mesmo com a configuração desativada. (1323286).
• Atualizamos a guia Manifesto no painel App para analisar o formato mais recente do esquema de cores. (1318305).
• Melhoramos as sugestões para os problemas de bloqueio de renderização <script async> no painel Insights de desempenho. Anteriormente, as Ferramentas do desenvolvedor sugeriam add async attribute to the script tag, mesmo que o script já estivesse marcado como assíncrono. (1334096).
• O painel Insights de performance agora detecta iframes como possíveis causas de mudanças de layout. É possível conferir os detalhes do iframe no painel Details. (1328873).
• Quando abrir o arquivo no menu "Command", os arquivos criados (gerados por mapas de origem) agora são classificados com uma classificação mais alta para aparecer acima dos scripts implantados com nomes semelhantes. (1312929).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.