Get Inspired
Docs
Blog
Articles

O que há de novo no DevTools (Chrome 106)

Published on • Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Jecelyn Yeen
Jecelyn Yeen

Developer Advocate trabalhando no Chrome DevTools no Google.

Website Twitter GitHub

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

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Agrupamento de arquivos por Original / Publicado no painel de fontes

O Agrupamento de arquivos por Original / Publicado mudou de lugar e está localizado no menu com os três pontos (...). Anteriormente, ele era mostrado diretamente no painel de navegação.

Abra essa demo. Ative a configuração Agrupamento de arquivos por Original / Publicado para ver o seu código fonte original (Criado) primeiro e navegar para ele mais rápido

Agrupamento de arquivos por Original / Publicado

Issue no Chromium: 1352488

Melhoria de stack traces

Stack traces completos para operações assíncronas

Quando alguma operação está agendada para acontecer de forma assíncrona, os stack traces no DevTools vão mostrar a "história completa" da operação. Anteriormente, só era mostrado parte do que aconteceu.

Por exemplo, abra essa demo e clique no botão de incremento. Expanda a mensagem de erro no Console. No nosso código fonte, a operação inclui um timeout assíncrono.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Anteriormente, o stack trace só mostrava a operação de timeout. Ele não mostrava também a "causa raiz" da operação.

Com essa última alteração, o DevTools agora mostra que a operação se origina a partir do evento onClick no componente do botão, depois na função increment, seguida da operação de timeout.

Stack traces completos para operações assíncronas

Por baixo dos panos, o DevTools introduziu uma funcionalidade chamada "Async Stack Tagging". Você pode contar toda a história de uma operação através de um link entre as duas partes do código assíncrono juntas usando o novo método console.createTask(). Veja Debugging modernizado com o DevTools para saber mais.

Parece complicado? Nem um pouco! Na maioria do tempo, o framework que você está usando vai lidar com a parte de executar e agendar operações assíncronas. Nesse caso, é trabalho do framework implementar a API, você não precisa se preocupar. (Por exemplo, o Angular implementou essas mudanças aqui).

Issue do Chromium: 1334585

Ignorar os scripts de terceiros conhecidos automaticamente

Identifique problemas no seu código mais rapidamente durante o debug porque o DevTools agora adiciona automaticamente todos os scripts de terceiros que são conhecidos à sua lista de ignorados.

Abra essa demo e clique no botão de incremento. Expanda a mensagem de erro no Console. O stack trace vai mostrar apenas o seu código (app.component.ts, button.component.ts). Clique em Mostrar mais frames para ver o stack trace completo.

Ignorar os scripts de terceiros conhecidos automaticamente

Anteriormente, o stack trace incluía também os scripts de terceiros como zone.js e core.mjs. Esses scripts não são parte do seu código fonte, eles são gerados por bundlers como o Webpack ou frameworks como o Angular. Com eles no meio do caminho, era mais demorado para identificar a causa raiz de um erro.

Ignorar os scripts de terceiros conhecidos automaticamente

Por baixo do capô, o DevTools ignora esses scripts baseados na nova propriedade x_google_ignoreList nos source maps. Os frameworks e bundlers precisam prover essa informação. Veja o Estudo de caso: Melhor debug com Angular e DevTools.

Opcionalmente, se você preferir sempre ver os stack traces completos, você pode desabilitar essa cofiguração através do caminho Configurações > Lista de ignorados > Adicionar scripts de terceiros conhecidos na lista automaticamente

Configuração para adicionar scripts de terceiros conhecidos à lista automaticamente

Issue do Chromium: 1323199

Melhorias no call stack durante o debugging

Com a configuração Adicionar scripts de terceiros conhecidos na lista automaticamente, a call stack agora só vai mostrar frames que forem relevantes para o seu código.

Abra essa demo e crie um breakpoint na função increment() dentro de app.component.ts. Clique no botão de incremento para ativar esse breakpoint. A call stack agora só mostra os frames do seu código (app.component.ts e button.component.ts).

Para ver todos os frames, ative a configuração Mostrar frames na lista de ignorados. Anteriormente, o DevTools mostrava todos os frames por padrão.

Melhorias no call stack durante o debugging

Issue do Chromium: 1352488

Escondendo fontes na lista de ignorados do painel de Fontes

Ative a opção esconder fontes ignoradas para esconder arquivos irrelevantes no painel Navegação. Dessa forma você pode focar só no seu código.

Abra essa demo. No painel Fontes, os scripts node_modules e webpack são scripts de terceiros, fora do seu código fonte. Clique no menu com os três pontos e selecione esconder fontes ignoradas para escondê-los no painel.

Escondendo fontes na lista de ignorados do painel de Fontes

Issue do Chromium: 1352488

Com a configuração esconder fontes ignoradas, você pode encontrar seus arquivos mais rapidamente com o Command Menu. Anteriormente, buscar arquivos com o Command menu retornava também arquivos de terceiros que poderiam não ser relevantes para você.

Por exemplo, ative a opção esconder fontes ignoradas e clique no menu com três pontos. Selecione Abrir arquivo. Digite ton para procurar por componentes do tipo "button". Anteriormente, os resultados incluíam arquivos do script node_modules, um deles inclusive era mostrado como primeiro resultado.

Escondendo arquivos ignorados no Command Menu

Issue do Chromium: 1336604

Nova trilha de interações no painel de performance

Use a nova trilha interações no painel Performance para visualizar as interações e acompanhar potenciais problemas de responsividade.

Por exemplo, inicie uma nova gravação de performace nessa demo. Clique em qualquer café e pare a gravação. Duas interações vão ser mostradas na trilha de Interações. Ambas vão ter o mesmo ID, indicando que elas foram iniciadas pela mesma interação de usuário.

Nova trilha de interações no painel de performance

Issue do Chromium: 1347390

Detalhamento de tempos de LCP no painel de Performance Insights

Detalhamento de tempos de LCP no painel de Performance Insights

Issue do Chromium: 1351735

Nomes padrão auto-gerados para as gravações do painel do Gravador

O painel do Gravador agora automaticamente gera um nome para novas gravações.

Nomes padrão auto-gerados para as gravações do painel do Gravador

Issue do Chromium: 1351383

Outras novidades

  • O painel Estilos agora mostra um seletor de cores para a propriedade stop-color da tag <stop> do SVG. (1351096)
  • Identifique scripts causando layout thrashing como uma potencial causa para mudanças de layout no painel de Performance Insights. (1343019)
  • O caminho crítico para fontes LCP agora é mostrado no painel Performance Insights. (1350390)

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on • Improve article

Back

O que há de novo no DevTools (Chrome 107)

Next

Container queries begin to land in stable browsers while the polyfill gets a big update

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.