No Chrome DevTools, o painel Rede, que oferece insights valiosos sobre a atividade de rede de uma página da Web, é uma das ferramentas mais usadas.
Este artigo compartilha um conjunto de melhorias muito esperadas no painel Network que Ioana Forfota e Silvia Eremia fizeram durante o estágio STEP. Essas melhorias foram aguardadas com ansiedade e foram cuidadosamente selecionadas a partir do extenso backlog no Issue Tracker do Chromium e tornar o painel mais acessível, intuitivo e informativo.
Com esses novos recursos, o painel Rede oferece aos desenvolvedores da Web a capacidade de:
- Concentrar-se apenas nas solicitações de rede relevantes.
- Entenda os códigos de status HTTP sem a necessidade de referências externas.
- Identifique e resolva rapidamente os erros de solicitação.
- Entenda as respostas do subtipo JSON.
Continue lendo para saber todos os detalhes.
Filtrar solicitações de extensões do Chrome
As extensões do Chrome podem fazer as próprias solicitações de rede, que são exibidas ao lado das solicitações da página no painel Rede. Se você não estiver desenvolvendo ativamente uma extensão, essas solicitações provavelmente não serão relevantes para você. Antes, a única maneira de ocultá-los era usar o filtro -scheme:chrome-extension ou depurar no modo de navegação anônima.
Isso ficou mais fácil desde o Chrome 117. Para organizar o painel Network, o DevTools agora oferece uma caixa de seleção para excluir solicitações de extensão do Chrome.
As discussões sobre o estado padrão desse recurso estão em andamento. Inicialmente, pensamos em ativá-lo por padrão, com a ideia de que poderia melhorar a experiência da maioria dos usuários. No entanto, com essa abordagem, alguns usuários podem não saber que os URLs da extensão do Chrome podem acionar solicitações. Isso também pode apresentar desafios para os desenvolvedores de extensões. Portanto, o estado padrão é definido como "desativado".
Com essa caixa de seleção marcada, sua lista de solicitações fica mais limpa, com menos distrações e mais focada nas solicitações mais importantes, para que você possa ter uma experiência de depuração muito mais agradável.
Textos de status de resposta HTTP
Entender os códigos de status HTTP é essencial para uma depuração eficaz. No entanto, pesquisar constantemente seus significados pode ser inconveniente. O DevTools introduziu uma melhoria útil: quando você mantém o ponteiro do mouse sobre um código de status na lista de solicitações, uma dica fornece instantaneamente o texto de status, um título descritivo que esclarece o significado.
O texto de status também pode ser visto na visualização de cabeçalhos ao lado do código. Antes disponíveis apenas para HTTP/1.1, agora esses recursos foram estendidos para HTTP/2 e HTTP/3. Esses ajustes aparentemente pequenos têm um impacto significativo, economizando tempo e permitindo que você se concentre na depuração em vez de pesquisar significados do código.
Maior visibilidade de erros
Facilitamos a identificação rápida de erros e a resolução deles sem precisar se aprofundar no painel. Para conseguir isso, em vez de apenas destacar mensagens de erro com mudanças na cor do texto, adicionamos ícones indicativos para chamar a atenção para erros de solicitação, como aqueles com código de status 404. Esses indicadores sutis, mas úteis, tornarão os erros mais perceptíveis, garantindo que você não ignore questões importantes.
Subtipos JSON de impressão de alta qualidade
O desenvolvimento da Web frequentemente envolve a inspeção de respostas de JSON, mas a leitura de JSONs brutos não formatados é muito inconveniente. Lidar com essas respostas, principalmente subtipos como ld+json, hal+json ou sparql-results+json, pode ser frustrante, por exemplo, quando eles aparecem em uma única linha. Para facilitar, o DevTools introduziu uma apresentação recolhível para subtipos de JSON mais fácil de usar. Agora, essas respostas são formatadas, eliminando a necessidade dos desenvolvedores dependerem de ferramentas externas. Esse novo design oferece uma representação simples e legível.
Feedback positivo da comunidade
Embora esses recursos estejam apenas nos estágios iniciais de adoção, a resposta da comunidade foi extremamente positiva. A implementação bem-sucedida deixou muitos usuários encantados com as melhorias, melhorando significativamente a experiência. Confira algumas das respostas no X:
"Ah, que legal! O ChromeDevTools aprimorou o jogo mostrando códigos de status HTTP legíveis por humanos, facilitando a visualização do que deu errado com uma solicitação de rede."— TribalIdeas on X
"Tem ajudado muito nos últimos tempos. Principalmente quando se trata de formulários com bloqueadores de anúncios e extensões gramaticais." – MrAhmadAwais no X
Tudo pronto para explorar esses novos recursos? Acesse o Chrome DevTools e teste o painel Network aprimorado por conta própria. Boa depuração!
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
> 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.