{"id":278479,"date":"2023-08-28T18:21:00","date_gmt":"2023-08-28T15:21:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=278479"},"modified":"2025-03-14T00:31:43","modified_gmt":"2025-03-13T21:31:43","slug":"google-facilita-a-depuracao-com-novos-recursos-no-devtools-chrome-106","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/pt-pt\/google-facilita-a-depuracao-com-novos-recursos-no-devtools-chrome-106\/","title":{"rendered":"Google facilita a depura\u00e7\u00e3o com novos recursos no Devtools Chrome 106"},"content":{"rendered":"\n

A depura\u00e7\u00e3o pode ser tediosa e ainda mais frustrante quando voc\u00ea n\u00e3o consegue localizar facilmente o bug. As ferramentas de desenvolvedor do Chrome 106 (devtools) s\u00e3o definidas para simplificar o processo de depura\u00e7\u00e3o, tornando-o mais f\u00e1cil e r\u00e1pido.<\/p>\n

Agora voc\u00ea pode facilmente classificar arquivos, otimizar sua pesquisa, ocultar scripts de terceiros, acessar relat\u00f3rios de desempenho detalhados e muito mais discutido neste artigo. Essas devtools s\u00e3o 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\u00f3digo.<\/p>\n

Vamos dar uma olhada em alguns desses novos recursos:<\/p>\n

Para aproveitar ao m\u00e1ximo as novas atualiza\u00e7\u00f5es do Chrome 106, baixe as vers\u00f5es Chrome Canary<\/strong>, Dev<\/strong> ou Beta<\/strong> como seu navegador de desenvolvimento padr\u00e3o. Voc\u00ea ter\u00e1 acesso \u00e0s 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\u00e1rios tenham a melhor experi\u00eancia do cliente.<\/p>\n

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

Nas vers\u00f5es anteriores do Chrome, todos os arquivos de c\u00f3digo-fonte eram vis\u00edveis no painel de navega\u00e7\u00e3o<\/strong>, dificultando a localiza\u00e7\u00e3o de um \u00fanico arquivo.<\/p>\n

\"Google<\/a><\/p>\n

2 Pesquisa de Arquivos Simplificada<\/h2>\n

Voc\u00ea pode restringir sua pesquisa no painel de origem apenas a arquivos relevantes. Nas vers\u00f5es anteriores do Chrome, os arquivos gerados pela estrutura e outros terceiros eram exibidos nos resultados da pesquisa, dificultando a identifica\u00e7\u00e3o do item de pesquisa.<\/p>\n

Esta atualiza\u00e7\u00e3o \u00e9 a vers\u00e3o devtools para otimizar sua pesquisa em navegadores da web com as folhas de dicas de pesquisa do Google.<\/a> Para definir essa configura\u00e7\u00e3o, v\u00e1 para o menu de 3 pontos > Ocultar fontes da lista de ignorados<\/strong>.<\/p>\n

\"Google<\/a><\/p>\n

3 Ocultar scripts de terceiros<\/h2>\n

Scripts de terceiros enchendo seu console? O Chrome 106 adicionou uma extens\u00e3o de lista de ignorados no mapa de origem para permitir que voc\u00ea oculte scripts gerados automaticamente por estruturas e outros terceiros.<\/p>\n

Para ativar esse recurso, v\u00e1 para Configura\u00e7\u00f5es > Lista de ignorados > Adicionar automaticamente scripts de terceiros conhecidos<\/strong> \u00e0 lista de ignorados. Quando voc\u00ea abrir os arquivos novamente, o console mostrar\u00e1 apenas os arquivos relevantes associados ao seu aplicativo. Agora voc\u00ea pode ver seu c\u00f3digo sem distra\u00e7\u00e3o.<\/p>\n

\"Google<\/a><\/p>\n

4 Rastreamentos de Pilha Detalhados<\/h2>\n

Voc\u00ea levar\u00e1 menos tempo para identificar um erro no console, gra\u00e7as a um novo recurso no Chrome 106. As ferramentas do Chrome Developer fornecem uma vis\u00e3o detalhada das opera\u00e7\u00f5es ass\u00edncronas e suas causas principais. Nas vers\u00f5es anteriores, apenas os eventos que levaram \u00e0 opera\u00e7\u00e3o eram vis\u00edveis. As \u00faltimas devTools mostram toda a cadeia de opera\u00e7\u00f5es e suas causas-raiz.<\/p>\n

O Google configurou um m\u00e9todo console.createTask()<\/strong> no Chrome 106. Esse m\u00e9todo permite que as estruturas executem rastreamentos de pilha no console. Depurar JavaScript usando devtools \u00e9 t\u00e3o f\u00e1cil quanto depurar CSS usando chrome.<\/a><\/p>\n

\"Google<\/a><\/p>\n

5 Acompanhe as intera\u00e7\u00f5es no painel de desempenho<\/h2>\n

Acompanhe novas intera\u00e7\u00f5es no painel Desempenho<\/strong> para identificar poss\u00edveis problemas de resposta ao seu aplicativo. No Chrome 106, todas as intera\u00e7\u00f5es s\u00e3o exibidas na faixa de intera\u00e7\u00f5es ap\u00f3s uma opera\u00e7\u00e3o. A faixa mostra a origem das intera\u00e7\u00f5es e seus IDs. O rastreamento ajuda a identificar a fonte e intercept\u00e1-la adequadamente.<\/p>\n

\"Google<\/a><\/p>\n

6 insights de tempo do LCP no painel de desempenho<\/h2>\n

Os detalhes de tempo da maior pintura<\/strong> de conte\u00fado (LCP) agora est\u00e3o dispon\u00edveis no painel de insights de desempenho<\/strong>. O LCP<\/strong> \u00e9 uma m\u00e9trica vital de desempenho da Web que relata o tempo de renderiza\u00e7\u00e3o de imagens ou blocos de texto para carregar na p\u00e1gina da Web. Um 2,5 segundos ou menos \u00e9 uma boa pontua\u00e7\u00e3o de desempenho.<\/p>\n

Para ver os insights, navegue at\u00e9 o painel de desempenho>menu de tr\u00eas pontos-mais ped\u00e1gios>insights de desempenho<\/strong>. Ao reproduzir uma grava\u00e7\u00e3o, o painel Detalhes<\/strong> mostrar\u00e1 os tempos de carregamento.<\/p>\n

\"Google<\/a><\/p>\n

Atualiza\u00e7\u00f5es adicionais no Chrome 106<\/h2>\n

Outras melhorias no Chrome 106 incluem:<\/p>\n