Google facilita a depuração com novos recursos no Devtools Chrome 106

A depuração pode ser tediosa e ainda mais frustrante quando você não consegue localizar facilmente o bug. As ferramentas de desenvolvedor do Chrome 106 (devtools) são definidas para simplificar o processo de depuração, tornando-o mais fácil e rápido.

Agora você pode facilmente classificar arquivos, otimizar sua pesquisa, ocultar scripts de terceiros, acessar relatórios de desempenho detalhados e muito mais discutido neste artigo. Essas devtools são essenciais, especialmente para desenvolvedores que trabalham com frameworks JavaScript como Angular, React e Vue.js, que agora possuem um console interativo e simplificado para visualizar e depurar seu código.

Vamos dar uma olhada em alguns desses novos recursos:

Para aproveitar ao máximo as novas atualizações do Chrome 106, baixe as versões Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Você terá acesso às ferramentas de desenvolvedor mais recentes que permitem testar APIs da plataforma web e identificar rapidamente problemas ou bugs em seu site para garantir que seus usuários tenham a melhor experiência do cliente.

Agora você pode navegar diretamente para os componentes do aplicativo agrupando arquivos em autoria/implantado no painel de origem . Vá para Source > 3-dot-menu > Group by Authored/Deployed. Agora, ao abrir os arquivos, você pode ver apenas seus arquivos implementados no painel.

Nas versões anteriores do Chrome, todos os arquivos de código-fonte eram visíveis no painel de navegação, dificultando a localização de um único arquivo.

2 Pesquisa de Arquivos Simplificada

Você pode restringir sua pesquisa no painel de origem apenas a arquivos relevantes. Nas versões anteriores do Chrome, os arquivos gerados pela estrutura e outros terceiros eram exibidos nos resultados da pesquisa, dificultando a identificação do item de pesquisa.

Esta atualização é a versão devtools para otimizar sua pesquisa em navegadores da web com as folhas de dicas de pesquisa do Google. Para definir essa configuração, vá para o menu de 3 pontos > Ocultar fontes da lista de ignorados.

3 Ocultar scripts de terceiros

Scripts de terceiros enchendo seu console? O Chrome 106 adicionou uma extensão de lista de ignorados no mapa de origem para permitir que você oculte scripts gerados automaticamente por estruturas e outros terceiros.

Para ativar esse recurso, vá para Configurações > Lista de ignorados > Adicionar automaticamente scripts de terceiros conhecidos à lista de ignorados. Quando você abrir os arquivos novamente, o console mostrará apenas os arquivos relevantes associados ao seu aplicativo. Agora você pode ver seu código sem distração.

4 Rastreamentos de Pilha Detalhados

Você levará menos tempo para identificar um erro no console, graças a um novo recurso no Chrome 106. As ferramentas do Chrome Developer fornecem uma visão detalhada das operações assíncronas e suas causas principais. Nas versões anteriores, apenas os eventos que levaram à operação eram visíveis. As últimas devTools mostram toda a cadeia de operações e suas causas-raiz.

O Google configurou um método console.createTask() no Chrome 106. Esse método permite que as estruturas executem rastreamentos de pilha no console. Depurar JavaScript usando devtools é tão fácil quanto depurar CSS usando chrome.

5 Acompanhe as interações no painel de desempenho

Acompanhe novas interações no painel Desempenho para identificar possíveis problemas de resposta ao seu aplicativo. No Chrome 106, todas as interações são exibidas na faixa de interações após uma operação. A faixa mostra a origem das interações e seus IDs. O rastreamento ajuda a identificar a fonte e interceptá-la adequadamente.

6 insights de tempo do LCP no painel de desempenho

Os detalhes de tempo da maior pintura de conteúdo (LCP) agora estão disponíveis no painel de insights de desempenho. O LCP é uma métrica vital de desempenho da Web que relata o tempo de renderização de imagens ou blocos de texto para carregar na página da Web. Um 2,5 segundos ou menos é uma boa pontuação de desempenho.

Para ver os insights, navegue até o painel de desempenho>menu de três pontos-mais pedágios>insights de desempenho. Ao reproduzir uma gravação, o painel Detalhes mostrará os tempos de carregamento.

Atualizações adicionais no Chrome 106

Outras melhorias no Chrome 106 incluem:

• Você pode exportar suas gravações de script sem problemas no painel Gravador . O botão de exportação tinha um problema nas versões anteriores.
• Agora você tem um seletor de cores nos elementos SVG do painel Estilos .
• Você pode identificar scripts que distorcem seu layout no painel Performance Insights .
• Você pode exibir caminhos para fontes da Web LCP no painel Performance Insights .

Esses recursos podem melhorar a forma como você usa as ferramentas de desenvolvimento do navegador.

O que você obtém do Chrome 106

As melhorias mais recentes nas ferramentas de desenvolvimento no Chrome 106 tornam o processo de depuração mais rápido. As novas atualizações facilitam a visualização das operações por meio de um console simplificado e dinâmico que permite ocultar arquivos, desabilitar scripts, gravar e ter uma visão detalhada do seu aplicativo durante a depuração.

As adições do Chrome 106 permitirão que você gerencie seu aplicativo e otimize seu desempenho. Vá em frente e aproveite esses benefícios atualizando para a versão mais recente do Chrome 106.