Novidades do DevTools (Chrome 106)

Jecelyn Yeen

Agrupar arquivos por Criado / implantado no painel Origens

Agora a opção Agrupar arquivos por Criado / Implantado aparece no menu de três pontos. Antes, elas apareciam diretamente no painel de navegação.

Abra esta demo. Ative a configuração Agrupar arquivos por Criado / Implantado para ver o código-fonte original (Criado) e acessá-lo mais rapidamente.

Agrupar arquivos por criado / implantado

Bug do Chromium: 1352488

Stack traces aprimorados

Rastreamentos de pilha vinculados para operações assíncronas

Quando algumas operações estão programadas para acontecer de maneira assíncrona, os stack traces no DevTools agora contam a "história completa" da operação. Antes, ele conta apenas parte da história.

Por exemplo, abra esta demo e clique no botão de incremento. Expanda a mensagem de erro no Console. Em nosso código-fonte, a operação inclui uma operação timeout assíncrona.

// application.component.ts

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

Antes, o stack trace só mostrava a operação de tempo limite. Ele não mostrou a "causa raiz" da operação.

Com as mudanças mais recentes, o DevTools agora mostra que a operação se origina do evento onClick no componente do botão, depois da função increment e da operação de tempo limite.

Rastreamentos de pilha vinculados para operações assíncronas

Em segundo plano, o DevTools introduziu um novo recurso de inclusão de tags em pilha assíncrona. É possível contar toda a história da operação vinculando as duas partes do código assíncrono com o novo método console.createTask(). Consulte Depuração moderna no DevTools para saber mais.

Parece complicado? Não. Na maioria das vezes, o framework que você está usando lida com a programação e a execução assíncrona. Nesse caso, cabe à estrutura usar a API, você não precisa se preocupar com isso. Por exemplo, o Angular implementou essas mudanças.

Bug do Chromium: 1334585

Ignorar automaticamente scripts conhecidos de terceiros

Identifique problemas no código mais rapidamente durante a depuração, porque o DevTools agora adiciona automaticamente scripts de terceiros conhecidos à lista de ignorados.

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

Antes, o stack trace incluía scripts de terceiros, como zone.js e core.mjs. Eles não são seu código-fonte, mas são gerados por bundlers (por exemplo, webpack) ou frameworks (por exemplo, Angular). A identificação da causa raiz de um erro levou mais tempo.

Ignorar automaticamente scripts de terceiros conhecidos no stack trace

Em segundo plano, o DevTools ignora scripts de terceiros com base na nova propriedade x_google_ignoreList nos mapas de origem. Frameworks e bundlers precisam fornecer essas informações. Consulte Estudo de caso: melhor depuração Angular com DevTools.

Se você preferir sempre visualizar stack traces completos, desative a configuração em Configurações > Lista de ignorados > Adicione automaticamente scripts de terceiros conhecidos à lista de ignorados.

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

Bug do Chromium: 1323199

Pilha de chamadas aprimorada durante a depuração

Com a configuração Adicionar automaticamente scripts de terceiros conhecidos para ignorar a lista, a pilha de chamadas agora mostra apenas os frames relevantes para seu código.

Abra esta demo e defina um ponto de interrupção na função increment() em app.component.ts. Clique no botão de incremento na página para acionar o ponto de interrupção. A pilha de chamadas mostra apenas frames do seu código (por exemplo, app.component.ts e button.component.ts).

Para conferir todos os frames, ative a opção Mostrar frames na lista de ignorados. Antes, o DevTools exibia todos os frames por padrão.

Pilha de chamadas aprimorada durante a depuração

Bug do Chromium: 1352488

Como ocultar fontes da lista de ignorados no painel Fontes

Ative ocultar fontes na lista de ignorados para ocultar arquivos irrelevantes no painel Navegação. Dessa forma, você pode se concentrar apenas no código.

Abra esta demo. No painel Origens. node_modules e webpack são os scripts de terceiros. Clique no menu de três pontos e selecione Ocultar fontes na lista de ignorados para ocultá-las no painel.

Como ocultar fontes da lista de ignorados no painel Fontes

Bug do Chromium: 1352488

Com a configuração ocultar fontes na lista de ignorados, você encontra seu arquivo mais rapidamente usando o Menu de comando. Antes, a pesquisa de arquivos no menu de comando retornava arquivos de terceiros que podem não ser relevantes para você.

Por exemplo, ative a configuração ocultar fontes na lista de ignorados e clique no menu de três pontos. Selecione Abrir arquivo. Digite “ton” para pesquisar componentes do botão. Antes, os resultados incluíam arquivos de node_modules, um dos arquivos node_modules aparecia como o primeiro resultado.

Ocultar arquivos da lista de ignorados no menu de comando

Bug do Chromium: 1336604

Faixa "Novas interações" no painel "Desempenho"

Use a nova faixa de Interações no painel Performance para conferir as interações e rastrear possíveis problemas de capacidade de resposta.

Por exemplo, inicie uma gravação de performance nesta página de demonstração. Clique em um café e pare a gravação. Duas interações são exibidas na faixa Interações. As duas interações têm os mesmos IDs, o que indica que elas são acionadas pela mesma interação do usuário.

Faixa de interações no painel de desempenho

Bug do Chromium: 1347390

Detalhamento de tempos de LCP no painel de insights de desempenho

O painel Insights de desempenho agora mostra o detalhamento dos tempos da Largest Contentful Paint (LCP). Use essas informações de tempo para entender e identificar uma oportunidade de melhorar a performance da LCP.

Detalhamento de tempos de LCP no painel de insights de desempenho

Bug do Chromium: 1351735

Gerar automaticamente o nome padrão das gravações no painel do Gravador

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

Nome padrão para gravações no painel do Gravador

Bug do Chromium: 1351383

Destaques diversos

  • Antes, as extensões do Gravador não apareciam no painel Gravador de vez em quando. (1351416).
  • O painel Estilos agora mostra um seletor de cores para a propriedade stop-color do elemento SVG <stop>. (1351096).
  • Identifique os scripts que causam a troca de layout como as possíveis causas para mudanças de layout no painel Insights de desempenho. (1343019).
  • Mostre o caminho crítico para fontes da Web LCP no painel Insights de desempenho. (1350390).

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   Mais > 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.