Novidades do DevTools (Chrome 106)

Jecelyn Yeen

Agrupar arquivos por criado / implantado no painel Origens

A opção Agrupar arquivos por autoria / implantada agora aparece no menu de três pontos. Antes, ela era mostrada diretamente no painel de navegação.

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

Agrupar arquivos por criado / implantado

Bug do Chromium: 1352488

Stack traces aprimorados

stack traces vinculados para operações assíncronas.

Quando algumas operações são programadas para acontecer de modo assíncrono, 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 demonstração e clique no botão "Aumentar". Expanda a mensagem de erro no Console. No 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. Não mostrava 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, seguida pela operação de tempo limite.

stack traces vinculados para operações assíncronas.

Em segundo plano, o DevTools introduziu o novo recurso "Async Stack Tagging". É possível contar toda a história da operação vinculando as duas partes do código assíncrono ao 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 ao framework 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 de terceiros conhecidos

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 demonstração 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). Levou mais tempo para identificar a causa raiz de um erro.

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 o DevTools.

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

Configuração para adicionar automaticamente scripts de terceiros conhecidos à 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 à lista de ignorados, a pilha de chamadas agora mostra apenas os frames relevantes para seu código.

Abra esta demonstração 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 os frames do seu código (por exemplo, app.component.ts e button.component.ts).

Para conferir todos os frames, ative Mostrar frames da 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

Ocultando fontes da lista de ignorados no painel Origens

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

Abra esta demonstração. No painel Origens. O node_modules e o 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 do painel.

Ocultando fontes da lista de ignorados no painel Origens

Bug do Chromium: 1352488

Com a configuração ocultar fontes na lista de ignorados, é possível encontrar seu arquivo mais rapidamente com 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. Anteriormente, os resultados incluíam arquivos de node_modules, e um dos arquivos node_modules até mesmo aparecia como o primeiro resultado.

Como ocultar arquivos da lista de ignorados no menu de comando

Bug do Chromium: 1336604

Faixa "Novas interações" no painel de desempenho

Use a nova faixa Interações no painel Desempenho para visualizar 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, indicando que são acionadas na mesma interação do usuário.

Faixa de interações no painel de desempenho

Bug do Chromium: 1347390

Detalhamento dos tempos da LCP no painel de insights de desempenho

O painel Insights de desempenho agora mostra o cronograma da Maior exibição de conteúdo (LCP, na sigla em inglês). Use essas informações de tempo para entender e identificar uma oportunidade de melhorar a performance da LCP.

Detalhamento dos tempos da LCP no painel de insights de desempenho

Bug do Chromium: 1351735

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

O painel Gravador agora gera automaticamente um nome para 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 Styles agora mostra um seletor de cores para a propriedade stop-color do elemento SVG <stop>. (1351096).
  • Identifique os scripts que causam a sobrecarga de layout como as possíveis causas de alterações 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59