A depuração pode ser tediosa e ainda mais frustrante quando você não consegue localizar o bug com facilidade. 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 ferramentas de desenvolvimento são essenciais, especialmente para desenvolvedores que trabalham com frameworks JavaScript como Angular, React e Vue.js, que agora contam com 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 o Chrome Canário, Dev, ou Beta versões como seu navegador de desenvolvimento padrão. Você terá acesso às ferramentas de desenvolvedor mais recentes que permitem testar as APIs da plataforma da Web e identificar rapidamente problemas ou bugs em seu site para garantir que seus usuários tenham a melhor experiência do cliente.

1. Arquivos agrupados por autoria/implantação

Agora você pode navegar diretamente para os componentes do aplicativo agrupando arquivos em criado/implantado no fonte painel. Vá para Origem > menu de 3 pontos > Agrupar por Criado/Implantado. Agora, ao abrir os arquivos, você só pode ver seus arquivos implantados no painel.

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

2. Pesquisa simplificada de arquivos

Você pode restringir sua pesquisa no painel de origem apenas aos 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 do devtools para otimizar sua pesquisa em navegadores da web com Folhas de dicas de pesquisa do Google. Para definir esta configuração, vá para o Menu de 3 pontos > Ocultar fontes da lista de ignorados.

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 para a 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ções.

4. Traços Detalhados de Pilha

Você levará menos tempo para identificar um erro no console, graças a um novo recurso do Chrome 106. As ferramentas do Chrome Developer oferecem 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 ferramentas de desenvolvimento mais recentes mostram toda a cadeia de operações e suas causas principais.

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

5. Rastrear interações no painel de desempenho

Acompanhe novas interações no Desempenho painel para identificar possíveis problemas de capacidade de resposta para seu aplicativo. No Chrome 106, todas as interações são exibidas na trilha Interações após uma operação. A trilha 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

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

Para ver os insights, navegue até painel de desempenho>menu de 3 pontos-mais pedágios>insights de desempenho. Ao reproduzir uma gravação, o Detalhes painel 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 do Gravador painel. O botão de exportação apresentava um problema nas versões anteriores.
  • Agora você tem um seletor de cores no estilos elementos SVG do painel.
  • Você pode identificar scripts que distorcem seu layout no Insights de desempenho painel.
  • Você pode exibir caminhos para fontes da Web LCP no Insights de desempenho painel.

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 para 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 aprofundada de seu aplicativo ao 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.