Use a guia "Condições de solicitação" para bloquear URLs específicos ou aplicar perfis personalizados de limitação de rede a recursos individuais.
Visão geral
Antes, o Chrome DevTools permitia limitar as condições de rede globalmente para toda a sessão (afetando todas as solicitações) ou bloquear solicitações específicas completamente. No entanto, testar como o aplicativo lida com recursos lentos específicos, como uma API de terceiros com problemas de latência ou uma imagem principal grande carregando em uma conexão lenta, era difícil sem diminuir a velocidade de toda a página.
A partir do Chrome 144, o DevTools agora oferece suporte ao limite de solicitações individuais. Você pode escolher solicitações de rede individuais para aplicar condições de rede específicas, além da capacidade atual de bloqueá-las. Esse recurso move as funcionalidades encontradas anteriormente na gaveta "Bloqueio de solicitações de rede" para uma nova gaveta Condições de solicitação mais abrangente. Esse recurso é mais preciso e permite depurar mais rápido, diminuindo a velocidade apenas dos recursos solicitados e não de todo o site.
Limitar ou bloquear uma solicitação
Para bloquear ou limitar um recurso específico, clique com o botão direito do mouse em qualquer solicitação no painel Rede e selecione Bloquear solicitação ou Limitar solicitação para o URL exato ou o domínio inteiro. Essa ação abre automaticamente o painel Condições de solicitação, cria uma regra para a entrada e aplica imediatamente as restrições de rede selecionadas.
Gaveta de condições de solicitação
No novo painel Condições de solicitação, é possível controlar quais solicitações são afetadas e quanto elas devem ser desaceleradas.
É possível personalizar as configurações de limitação selecionando predefinições padrão (como 3G lento) ou seus próprios perfis personalizados, além de editar padrões de URL usando caracteres curinga (*) para aplicar essas condições a recursos dinâmicos específicos ou grupos de solicitações.
Se uma solicitação corresponder a vários padrões, o DevTools vai aplicar a primeira regra encontrada. Para controlar essa precedência, use os botões de seta na gaveta e mova as regras de alta prioridade para a parte de cima da lista.
Entender quais solicitações são limitadas ou bloqueadas
É essencial distinguir entre solicitações naturalmente lentas e aquelas que estão sendo artificialmente limitadas pelo DevTools. Quando você recarrega a página, as novas regras de limitação são aplicadas. É fácil identificar as solicitações afetadas no painel Network:
- As solicitações bloqueadas aparecem em vermelho, e o status é
(blocked:devtools)na coluna "Status". - As solicitações limitadas aparecem em amarelo ou dourado e têm um ícone de relógio na coluna "Tempo". Passe o cursor sobre o ícone para ver exatamente qual condição de rede está sendo aplicada. Isso também fica visível no subpainel "Tempos".
A limitação de solicitações pode influenciar o desempenho da página. Ao gravar um perfil de desempenho, passe o cursor sobre a solicitação na faixa "Rede" para ver uma dica com detalhes sobre as condições de rede aplicadas.
