Requêtes réseau : testez votre site en bloquant ou en limitant les requêtes réseau

Ewa Gasperowicz

Utilisez le tiroir Conditions de la requête pour tester le comportement de votre page si certaines ressources, telles que des images ou des feuilles de style, ne peuvent pas se charger ou si elles se chargent plus lentement.

Présentation

Le tiroir Conditions de la requête vous permet de bloquer plusieurs ressources ou "patterns" en même temps et de les activer/désactiver dans une liste. Vous pouvez également bloquer des domaines ou des URL de requêtes réseau à partir du panneau Réseau. Les modèles correspondants s'affichent dans le panneau Conditions de requête.

Le panneau Conditions de la requête vous permet :

  • Ajoutez ou supprimez des schémas.
  • Modifier des schémas
  • Supprimez tous les schémas.
  • Activez ou désactivez le blocage ou la limitation des requêtes réseau. Une fois activé, vous pouvez activer ou désactiver le blocage ou la limitation pour un modèle spécifique.

La fermeture des outils de développement désactive le blocage et la limitation des requêtes réseau. Vous devez ouvrir le panneau et réactiver le blocage. Toutefois, les outils de développement enregistrent les modèles même après la fermeture du navigateur.

Bloquer ou limiter une requête réseau

Vous pouvez bloquer les requêtes réseau à partir du panneau Réseau des outils de développement.

  1. Dans le panneau Réseau, sous la section Nom, effectuez un clic droit sur une requête et sélectionnez "Bloquer la requête" ou "Limiter la requête". image
  2. Le panneau Conditions de requête s'ouvre automatiquement et indique si le modèle concerné est bloqué ou limité. La case "Activer le blocage et la limitation" est également cochée automatiquement.

Comprendre quelles requêtes sont limitées ou bloquées

Pour faire la différence entre les requêtes lentes et celles qui sont limitées par les outils de développement, vous pouvez consulter les panneaux "Réseau" et "Performances".

Dans le panneau "Réseau" :

  • Demandes bloquées : consultez la colonne État. Les requêtes bloquées seront explicitement indiquées (blocked:devtools) et seront de couleur rouge.
  • Requêtes limitées : une icône dorée ou marron s'affiche à côté de l'URL de la requête. Vous pouvez également consulter la colonne Heure. L'icône s'affiche à côté du timing.
    • Pointez sur l'icône pour voir exactement quelle condition de réseau a été appliquée.
    • Cliquez sur l'icône pour ouvrir immédiatement le panneau Conditions requises et mettre en évidence la règle responsable de la limitation.

Panneau "Réseau" des outils de développement affichant les indicateurs de requêtes bloquées et limitées.

Dans le panneau "Performances" : Vous pouvez également rechercher les conditions du réseau lorsque vous enregistrez un profil de performances. Pour ce faire :

  1. Accédez au panneau Performances et capturez un enregistrement.
  2. Localisez la requête dans la piste "Réseau".
  3. Pointez sur la requête pour afficher une info-bulle détaillant les conditions réseau appliquées.

Ouvrir le panneau des conditions de la requête

Pour ouvrir le panneau Conditions de la requête :

  1. Ouvrez les outils de développement.
  2. Ouvrez le menu Command (Commande) en appuyant sur :
    • macOS : Commande+Maj+P
    • Windows, Linux, ChromeOS : Ctrl+Maj+P Menu de commandes avec
  3. Commencez à saisir Request conditions, sélectionnez Afficher les conditions de la demande, puis appuyez sur Entrée. Les outils de développement affichent le tiroir Conditions requises en bas de la fenêtre.

Vous pouvez également sélectionner Plus d'outils > Conditions requises en haut à droite.

Modifier un paramètre de limitation

Pour personnaliser un paramètre de limitation :

  1. Ouvrez le tiroir Conditions de la demande et accédez à la demande spécifique.
  2. Dans la colonne "Limitation du débit", sélectionnez un préréglage (par exemple, "3G lente" ou "3G rapide") dans le menu déroulant. Vous pouvez également ajouter un profil réseau personnalisé.

Modifier un modèle de requête

Pour modifier un modèle, dans le panneau Conditions de la demande, cliquez sur le bouton Modifier à côté du modèle, modifiez-le, puis cliquez sur Enregistrer. Vous pouvez également cliquer sur le bouton Ajouter une condition pour en créer une. Lorsque vous saisissez un modèle d'URL, vous pouvez utiliser des caractères génériques (*) pour faire correspondre les parties dynamiques de l'URL. Par exemple, *://example.com correspondra à toutes les requêtes d'API envoyées à ce domaine. Vous pouvez utiliser des caractères génériques pour appliquer des conditions à plusieurs ressources à la fois à l'aide de l'API URL Pattern.

Activer/Désactiver le blocage des requêtes réseau

La case à cocher Activer le blocage et la limitation vous permet d'activer et de désactiver le blocage des requêtes réseau pour tous les schémas à la fois.

Réorganiser les formats de correspondance d'URL

Si une requête correspond à plusieurs modèles, les outils de développement appliquent la première règle trouvée. Pour contrôler cette priorité, cliquez sur les flèches à côté de la règle spécifique dans le tiroir Conditions de la demande afin de déplacer les règles de priorité élevée en haut de la liste.

Supprimer un schéma de blocage de requête réseau

Pour supprimer un schéma de blocage de requête réseau spécifique de la liste :

  • Dans le panneau Conditions de la demande, cliquez sur le bouton Supprimer.

Pour supprimer tous les schémas de blocage des requêtes réseau, cliquez sur le bouton Supprimer tous les schémas de blocage du réseau dans la barre d'activité.