Comment utiliser efficacement le filtre réseau DevTools

Dans cet article, nous allons examiner la fonctionnalité de filtrage du réseau de Chrome DevTools pour vous montrer comment l'utiliser efficacement dans divers cas d'utilisation.

Avant d'entrer dans les détails, prenons un moment pour comprendre ce que Chrome DevTools est tout au sujet. Chrome DevTools est un ensemble d’outils de développement Web directement intégrés à Google Chrome qui permettent aux développeurs de diagnostiquer des problèmes lors de leurs déplacements et de créer plus rapidement des sites Web satisfaisants. L'utilisation de DevTools facilite la visualisation et la manipulation des pages du navigateur en inspectant leurs éléments et en modifiant les valeurs CSS et HTML.

Il convient de suivre quelques étapes pour ouvrir DevTools sur Google Chrome, comme nous le verrons plus bas. sont invités à utiliser n’importe lequel d’entre eux:

1. Raccourcis clavier:
       
   • Commande + Contrôle + C sur Mac.
   • Contrôle + Maj + C sur Windows et Linux.

2. Menu principal de Chrome

   1. Cliquez sur le menu principal de Chrome.
   2. Sélectionnez sur Autres outils .
   3. Sélectionnez Outils de développement .

3. Inspecter la page.

   • Cliquez avec le bouton droit de la souris sur le navigateur et sélectionnez Inspecter.

DevTools is includes de nombreux panneaux onglets et comporte . Cependant, dans ce billet, nous nous concentrerons davantage sur le panneau Réseau de DevTools et plus particulièrement sur l’outil Filtre . Puisque nous avons maintenant une bonne compréhension de DevTools et de la façon de l’ouvrir dans Chrome, voyons l’outil de filtrage des réseaux

. L’outil de filtrage permet de limiter les ressources du navigateur aux besoins actuels du développeur. Il est chargé de filtrer les requêtes HTTP en cours d'inspection dans le navigateur. Il peut également être utilisé pour vérifier les paramètres envoyés via une requête Ajax. Les requêtes Ajax sont des requêtes asynchrones lancées par le navigateur et ne résultant pas directement en une transition de page.

• Note : le panneau Console comporte également un outil de filtrage. Ne confondez pas les uns avec les autres, car ils ont des objectifs différents. *

L'outil de filtrage est situé à l'intérieur du panneau Réseau de DevTools. Avec nos raccourcis clavier, DevTools s'ouvrira directement dans l'onglet Elements . Dans ce cas, nous allons passer à l’onglet Réseau, où nous aurons accès à l’outil de filtrage, comme suit:

Les demandes HTTP sont générées par les activités qui se déroulent dans le navigateur. Ces demandes sont envoyées à un serveur Web qui renvoie une ressource. Lorsque ces demandes sont reçues, l'outil Filtre aide les développeurs à rechercher des paramètres spécifiques. Cela permet également de limiter les requêtes que vous inspectez afin d'éviter toute surcharge.

Par exemple, avec l'outil de filtrage, vous pouvez rechercher XHR, Media ou WS ou spécifier le paramètre exact que vous souhaitez en le saisissant. en dehors. De cette façon, il restreint les autres paramètres et ne vous montre que ce dont vous avez besoin à ce moment-là. Travailler sur le projet est moins stressant et vous travaillez plus rapidement. De même, lorsque vous filtrez et que vous n'obtenez pas le résultat attendu, assurez-vous que le sélecteur rapide de type de demande est activé All . Comme son nom l'indique, tous les types sont affichés.

1. Filtrage des demandes par types

Pour rechercher un appel Ajax afin de vérifier les variables envoyées, vous devez le trouver dans l'onglet Réseau et vérifier les paramètres de la chaîne de requête. dans l'en-tête . Mais suivre l'appel de Ajax dans l'onglet du réseau est stressant. C'est là qu'intervient l'outil Filtre . Grâce à l'outil Filtre, vous pouvez simplement filtrer par type. Par exemple, vous pouvez filtrer pour XHR, JS, IMG comme suit:

De plus, vous pouvez également filtrer l'activité du réseau avec le contenu de l'URL du serveur en le tapant dans le filtre . et la recherche automatique.

2. Filtrage par domaines et codes d’état

Vous pouvez filtrer des éléments tels que le domaine, le code d’état, l’en-tête de la réponse, etc. Dans le volet de recherche de l’outil de filtrage, entrez le domaine ou le code d’état pour afficher leurs valeurs telles qu’elles sont appliquées à la page Web. êtes actuellement sur.

3. Filtrage par taille de fichier

Outre les codes d'état et les domaines, l'outil de filtrage du réseau nous permet de filtrer les demandes en fonction de la taille des fichiers à l'aide du mot clé supérieur à . Si vous définissez la valeur du mot clé supérieur à à un certain nombre, tous les fichiers de demande inférieurs à la taille de fichier spécifiée seront listés de la manière suivante:

4. Filtrage par type MIME

L'outil de filtrage permet également de filtrer les demandes par type MIME. Cela aide les développeurs à filtrer via la requête HTTP et à afficher des tables contenant des données des types mime sélectionnés. En fonction de la page Web sur laquelle vous vous trouvez, les types de mime disponibles peuvent aller de png, jpeg, x-icon, etc. :

1919909305]

5. Filtrage par méthodes de requête

Nous pouvons utiliser les méthodes de requête disponibles pour filtrer notre table de requêtes. Nous avons généralement les méthodes de requête GET et POST disponibles sur nos pages. Cependant, dans les pages Web plus avancées, nous pouvons avoir jusqu'à cinq méthodes de demande. Nous pouvons utiliser la fonction d’outil de filtrage pour déterminer et explorer ces méthodes, comme suit:

Conclusion

Dans ce message, nous avons défini l'outil Filtre dans le panneau Réseau de l'outil de développement Chrome. Nous avons également examiné les cas d'utilisation avec des exemples démonstratifs pour vous aider à comprendre comment utiliser efficacement l'outil. Nous pouvons faire beaucoup avec DevTools et le panneau Réseau. Pour en savoir plus sur le panneau Network sur la documentation officielle de Chrome DevTools .

Pour plus d'informations sur la création de superbes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes interfaces utilisateur? Découvrez Kendo UI – notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.