Article original : Chrome DevTools: How to Filter Network Requests
Par Adeel Imran
En tant que développeurs front-end, la plupart de notre temps est passé dans le navigateur avec DevTools ouvert (presque toujours, sauf si nous regardons YouTube ... parfois même alors).
L'une des principales sections de DevTools est l'onglet network. Il y a plusieurs choses que vous pouvez faire dans l'onglet network, comme les suivantes :
- Trouver des requêtes réseau par texte
- Trouver des requêtes réseau par expression regex
- Filtrer (exclure) les requêtes réseau
- Utiliser le filtre de propriété pour voir les requêtes réseau par un certain domaine
- Trouver des requêtes réseau par type de ressource
Pour les besoins de ce tutoriel, j'utilise la page d'accueil de freeCodeCamp, freecodecamp.org/news. Il suffit d'aller sur la page et d'ouvrir l'onglet network.
Vous pouvez voir l'onglet network en appuyant sur cmd + opt + j sur votre Mac ou ctrl + shift + j sous Windows. Cela ouvrira par défaut l'onglet console dans DevTools.
Cliquer sur "cmd + opt + j" ouvre le panneau de la console dans DevTools
Une fois l'onglet console ouvert, cliquez simplement sur l'onglet network pour le rendre visible.
Cliquer sur l'onglet "network" vous montrera toutes les requêtes réseau effectuées pour une certaine page
Une fois l'onglet network ouvert, nous pouvons commencer notre tutoriel.
Commençons
Assurez-vous que la page correcte est ouverte (freecodecamp.org/news) et que le panneau de l'onglet "network" est ouvert dans DevTools :
Illustration de l'emplacement de la barre de filtre dans le panneau réseau.
- La boîte verte ici illustre l'icône qui peut masquer/afficher la zone de filtre dans l'onglet du panneau réseau.
- La boîte rouge ici illustre la zone de filtre. Avec cette boîte, nous pouvons filtrer les requêtes réseau.
Trouver une requête réseau par texte
Tapez analytics dans la zone de texte du filtre. Seuls les fichiers contenant le texte analytics sont affichés.
Trouver une requête réseau par expression regex
Tapez /.*\min.[c]s+$/. DevTools filtre toutes les ressources dont les noms de fichiers se terminent par min.c suivi d'un ou plusieurs caractères s.
Filtrer (exclure) une requête réseau
Tapez -min.js. DevTools filtre tous les fichiers contenant min.js. Si un autre fichier correspond au motif, il sera également filtré et ne sera pas visible dans le panneau réseau.
Utiliser le filtre de propriété pour voir les requêtes réseau par un certain domaine
Tapez domain:code.jquery.com dans la zone de filtre. Il n'affichera que les requêtes réseau appartenant à l'URL code.jquery.com.
Trouver une requête réseau par type de ressource
Si vous souhaitez uniquement voir quel(s) fichier(s) de police est/sont utilisé(s) sur une certaine page, cliquez sur Font :
Filtrer les requêtes réseau par les fichiers de type "font" uniquement
Ou si vous souhaitez uniquement voir les fichiers web socket chargés sur une certaine page, cliquez sur WS :
Filtrer les requêtes réseau par les fichiers de type "web socket" uniquement
Vous pouvez également aller plus loin et afficher à la fois les fichiers Font et WS ensemble. Cliquez simplement sur Font en premier, puis cmd cliquez sur WS pour multi-sélectionner les onglets. (Si vous êtes sur une machine Windows, vous pouvez multi-sélectionner en utilisant ctrl clic).
Multi-sélection de plusieurs types de ressources par "cmd` clic sur les types
C'est tout pour ce tutoriel. Si vous l'avez trouvé utile, partagez-le avec vos collègues et faites-moi savoir ce que vous en pensez également sur twitter.com/adeelibr.