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.
Neste artigo, compartilhamos um conjunto de melhorias muito desejadas no painel Rede que Ioana Forfota e Silvia Eremia fizeram durante o estágio STEP. Essas melhorias foram ansiosamente aguardadas e selecionadas cuidadosamente do grande volume de pendências no rastreador de problemas do Chromium para tornar o painel mais acessível, intuitivo e informativo.
Com esses novos recursos, o painel Rede permite que os desenvolvedores da Web façam o seguinte:
- Concentre-se apenas em 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 de subtipo JSON.
Confira todos os detalhes abaixo.
Filtrar solicitações de extensão do Chrome
As extensões do Chrome podem fazer as próprias solicitações de rede, que aparecem ao lado das solicitações da página no painel Network. Se você não estiver desenvolvendo uma extensão ativamente, 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 Navegação anônima.
No Chrome 117, isso ficou mais fácil. Para organizar o painel Rede, 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, consideramos ativar essa opção por padrão, com a ideia de que ela poderia melhorar a experiência da maioria dos usuários. No entanto, essa abordagem pode fazer com que alguns usuários não saibam que os URLs de extensões do Chrome podem acionar solicitações. Isso também pode representar desafios para os desenvolvedores de extensões. Portanto, o estado padrão é definido como "desativado".
Com essa caixa de seleção ativada, a lista de solicitações fica mais limpa, menos distrativa e mais focada nas solicitações mais importantes. Assim, você tem 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 os significados pode ser inconveniente. As DevTools introduziram uma melhoria útil: quando você mantém o ponteiro sobre um código de status na lista de solicitações, uma dica de ferramenta mostra instantaneamente o texto de status, um título descritivo que esclarece o significado.
O texto de status também aparece na visualização de cabeçalhos, ao lado do código. Antes disponíveis apenas para HTTP/1.1, esses recursos agora são estendidos para HTTP/2 e HTTP/3. Esses ajustes aparentemente pequenos têm um impacto significativo, economizando seu tempo e permitindo que você se concentre na depuração em vez de pesquisar significados de código.
Melhor visibilidade de erros
Agora é mais fácil identificar e resolver erros sem precisar navegar pelo painel. Para isso, em vez de apenas destacar mensagens de erro com mudanças de cor do texto, adicionamos ícones indicativos para chamar a atenção para erros de solicitação, como aqueles com um código de status 404. Esses indicadores sutis, mas úteis, tornam os erros mais perceptíveis, garantindo que você não perca questões importantes.
Subtipos de JSON com impressão bonita
O desenvolvimento da Web geralmente envolve a inspeção de respostas 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 elas aparecem em uma única linha. Para facilitar as coisas, o DevTools introduziu uma apresentação mais fácil de usar e redimensionável para subtipos JSON. Agora, essas respostas são formatadas, eliminando a necessidade de os desenvolvedores dependerem de ferramentas externas. Esse novo design oferece uma representação simples e de fácil leitura.
Feedback positivo da comunidade
Embora esses recursos estejam apenas nos estágios iniciais de adoção, a resposta da comunidade é extremamente positiva. A implementação bem-sucedida deixou muitos usuários satisfeitos com as melhorias, melhorando significativamente a experiência deles. Você pode ler algumas das respostas em X:
"Ah, que legal! O ChromeDevTools acabou de melhorar, mostrando códigos de status HTTP legíveis por humanos, facilitando a identificação do que deu errado em uma solicitação de rede." —TribalIdeas on X
"Tem sido muito útil ultimamente. Principalmente ao lidar com formulários com bloqueadores de anúncios e extensões de gramática." -MrAhmadAwais no X
Tudo pronto para conhecer os novos recursos? Acesse o Chrome DevTools e confira o painel aprimorado de rede. Boa depuração!
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.
Entre em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.
- Envie feedback e solicitações de recursos para crbug.com.
- Informe um problema do DevTools usando a opção Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
- Envie um tweet para @ChromeDevTools.
- Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.