index.md

layout	title	authors	date	updated	description	hero	alt	tags
layouts/blog-post.njk	O que há de novo no DevTools (Chrome 104)	jecelynyeen	2022-07-13	2022-07-13	Reiniciar frames durante o debugging, opções para replay lento no painel de gravação e mais!	image/dPDCek3EhZgLQPGtEG3y0fTn4v82/VQeaOLYsbXAUiUZ0NnHD.jpg		new-in-devtools devtools chrome-104

Tradução realizada por Lucas Santos. Revisão por Alvaro Camillo Neto.

{% Partial 'devtools/banner.md' %}

{% YouTube id='4RXWfw7Xg_Y' %}

Reiniciar frame durante debugging {: #restart-frame }

A funcionalidade de Reiniciar frame voltou! Você pode re-executar o código anterior quando pausado em algum lugar da função. Anteriormente, essa funcionalidade foi depreciada e removida no Chrome 92 por conta de problemas de estabilidade.

Neste [exemplo] (https://jec.fish/), o depurador inicialmente parou 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 Call stack no painel Debugger, clique com o botão direito do mouse em toggleColorScheme e selecione Reiniciar frame

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uBcTkuIaoHHTgJCiGNED.png", alt="Reiniciar frame durante debugging", width="800", height="499" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/7f6749f5cbbfc7d3c89cb2b6b3557d0ff33536ad #}

Issue relacionada: 1303521

Opções de reprodução lenta no painel Gravador {: #recorder}

Agora você pode reproduzir os fluxos do usuário em uma velocidade mais lenta - lenta, muito lenta e extremamente lenta. Essas opções permitem que você observe melhor cada etapa repetida na tela.

Abra o painel Recorder e iniciar uma nova gravação. Quando a gravação estiver concluída, clique no botão suspenso Replay. Selecione uma velocidade para iniciar uma repetição.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yLIIMlaew0EWfEYdDbXJ.png", alt="Opções de reprodução lenta no painel Gravador", width="800", height="486" %}

Issue relacionada: 1306756

Crie uma extensão para o painel Recorder {: #recorder-extension}

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

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/xRO1d79tBe0ILcBoD0oh.png", alt="Crie uma extensão para o painel Recorder", width="800", height="486" %}

Issue relacionada: 1325751

Agrupar arquivos por Autoral/Publicado no painel Sources {: #authored-deployed }

Ative a nova opção Agrupar arquivos por Autoral/Publicado para organizar seus arquivos no painel Fontes. 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 compilação (por exemplo, Webpack, Vite).

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

• Autoral. Semelhante aos arquivos de origem que você visualiza em seu IDE. O DevTools gera esses arquivos com base em source maps (fornecidos por suas ferramentas de compilação).
• Publicado. Os arquivos reais que o navegador lê. Normalmente, esses arquivos são minificados.

Faça um teste com essa demo em React!

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/5E1qbkl0Gx1REx7FdqEr.png", alt="Agrupar arquivos por Autoral/Publicado no painel Sources", width="800", height="521" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/6bc65d0595702fc826ca87e2cfe519a134b62d90 #}

Issue relacionada: 960909

Nova trilha de Tempos de Usuários no painel de Performance insights {: #performance }

Visualize marcas performance.measure() em sua gravação com a nova trilha Tempos do usuário no painel Performance insights.

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

Quando você começa medindo o carregamento da página, a trilha User Timings é exibida na gravação. Clique no item de tempos para ver seus detalhes no painel lateral.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/nxPCp6UaiGWJCWWx4Laa.png", alt="Nova trilha de Tempos de Usuários no painel de Performance insights", width="800", height="499" %}

Issue relacionada: 1322808

Revelar o slot atribuído de um elemento {: #slot }

Os elementos com slot no painel Elements têm um novo emblema 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 cartões com alguns slots nomeados. Inspecione o slot person-occupation de um cartão, clique no emblema slot ao lado dele para revelar o slot atribuído.

Saiba como usar e para criar um modelo flexível que pode ser usado para preencher o shadow DOM de um componente da web.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/7uQGHp9WoMCG1RIAkgIF.png", alt="Revelar o slot atribuído de um elemento", width="800", height="486" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/164e238dabefc08018318a981131eedf2e81736b #}

Issue relacionada: 1018906

Simular a concorrência de hardware para gravações de desempenho {: #simulate }

A nova configuração Concorrência de hardware no painel Desempenho permite que os desenvolvedores configurem o valor relatado por navigator.hardwareConcurrency.

Alguns aplicativos usam navigator.hardwareConcurrency para controlar o grau de paralelismo de seu aplicativo, por exemplo, para controlar o tamanho do pool de pthreads do Emscripten. Com esse recurso, os desenvolvedores podem testar o desempenho de seus aplicativos com diferentes contagens de núcleos.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/PyykGRv29FZbBKJAwWOW.png", alt="Simular a concorrência de hardware para gravações de desempenho", width="800", height="536" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/b26de259d74a45e700d989ad9178c5e3a8b73145 #}

Issue relacionada: 1297439

Visualize valores de non-color ao preencher automaticamente as variáveis CSS {: #css-var }

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/V4slwNtX9HwLPdAyr8JF.png", alt="Visualize valores de non-color ao preencher automaticamente as variáveis CSS", width="800", height="431" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/977cc58cb5654a2b68142ef8ac1b3f9ac2822694 #}

Issue relacionada: 1285091

Identifique os quadros de bloqueio no painel de Back/forward cache {: #bfcache }

O painel Back/forward cache no painel Application tem uma nova seção frames para te ajudar a identificar os frames que podem estar impedindo a página de ser elegível para bfcache.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/UaRYEoYYoXhjSIn9seYK.png", alt="Identifique os quadros de bloqueio no painel de Back/forward cache", width="800", height="486" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/897799b24fff0639d483111dd2d957288ba2bd06 #}

Issue relacionada: 1288158

Sugestões de preenchimento automático aprimoradas para objetos JavaScript {: #autocomplete }

O preenchimento automático das propriedades do objeto JavaScript agora é exibido 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

Anteriormente, os devs achavam mais difícil encontrar propriedades relevantes porque a sugestão só favorecia propriedades próprias sobre propriedades herdadas, e todas as propriedades herdadas recebiam a mesma prioridade.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/IvFTcOWrBOTTMRHqn8u4.png", alt="Sugestões de preenchimento automático aprimoradas para objetos JavaScript", width="800", height="563" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/cee5205ae93c95b1dce49e220b9ebfa8c998d5a6 #}

Issue relacionada: 1299241

Melhorias em source maps {: #sourcemaps }

Aqui estão algumas melhorias em source maps que melhoram a experiência de debugging no geral:

• Breakpoints agora funcionam em tags <script> inline com anotações sourceURL

• O debugger agora resolve variáveis com escopo de bloco na visualização Escopo com source maps. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/gv9cGnDMF7OVlXPWntII.png", alt="Resolução de variáveis em escopo de bloco", width="800", height="532" %}

• O depurador agora resolve variáveis em arrow functions na visualização Escopo com source maps. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/CZk0xjwMQAqknkW5G4Xf.png", alt="Resolução de variáveis em arrow functions", width="800", height="479" %}

Issues relacionadas: 1329113, 1322115

Outras mudanças {: #misc }

Estas são algumas correções dignas de nota nesta versão:

• Corrigida a configuração Auto-completar para o painel Fontes. Anteriormente, o preenchimento automático sempre ativado, mesmo que a configuração estivesse desabilitada. (1323286)

• Atualizada a guia Manifesto no painel Aplicativo para analisar o formato de esquema de cores mais recente. (1318305)

• Melhorias nas sugestões para os problemas de bloqueio de renderização <script async> no painel Percepções de desempenho. Anteriormente, o DevTools sugeria adicionar atributo assíncrono à tag do script mesmo que o script já estivesse marcado como assíncrono. (1334096)

• O painel Performance insights agora detecta iframes como possíveis causas para mudanças de layout. Você pode visualizar os detalhes do iframe no painel Detalhes. (1328873)

• Quando abrir um arquivo no Menu Command, os arquivos de autoria (arquivos gerados por source maps) agora são classificados mais no alto para que apareçam acima de scripts publicados com nomes semelhantes. (1312929)

{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}