Network Monitor capture et affiche chaque requête réseau effectuée par la page courante — appels XHR/Fetch API, chargements de scripts, récupérations de feuilles de style, téléchargements d'images, fichiers de polices, et bien plus. Consultez les URL, méthodes HTTP, codes de statut, tailles des réponses et durées — le tout dans un panneau flottant mis à jour en direct, sans ouvrir les DevTools du navigateur.
L'onglet Network de Chrome DevTools est puissant mais lourd — il occupe beaucoup d'espace à l'écran, se réinitialise à chaque navigation et vous oblige à quitter le contenu de la page. Network Monitor offre les fonctionnalités essentielles de surveillance réseau dans un panneau flottant léger superposé à la page. Il intercepte les requêtes XHR et Fetch et surveille le chargement des ressources via la Performance API, affichant chaque requête réseau au fur et à mesure. Chaque requête indique l'URL, la méthode HTTP (GET, POST, PUT, DELETE), le code de statut (avec code couleur : vert pour 2xx, jaune pour 3xx, rouge pour 4xx/5xx), la taille de la réponse en octets et la durée en millisecondes. Cliquez sur une requête pour en voir les détails : en-têtes de requête, en-têtes de réponse, payload (pour POST/PUT), aperçu du corps de la réponse et décomposition des temps. Filtrez par type (XHR/Fetch, JS, CSS, Images, Fonts) pour vous concentrer sur un trafic spécifique.
Chaque requête réseau apparaît dans le panneau dès qu'elle est émise — chargements de page, appels API, ressources chargées en différé et requêtes en arrière-plan. Le flux se met à jour en temps réel, sans actualisation manuelle.
Cliquez sur n'importe quelle requête pour voir tous les détails : URL, méthode, en-têtes, payload (pour POST/PUT), en-têtes de réponse, aperçu du corps de la réponse (JSON formaté automatiquement), code de statut, taille et décomposition des temps.
Filtrez les requêtes par type : XHR/Fetch (appels API), JS (scripts), CSS (feuilles de style), IMG (images), Font (polices web) ou Tout. Isolez le trafic API du chargement des ressources pour vous concentrer sur l'essentiel.
Les codes de statut sont colorés pour une reconnaissance instantanée : vert pour 2xx (succès), jaune pour 3xx (redirections), rouge pour 4xx (erreurs client) et 5xx (erreurs serveur). Les requêtes échouées sont immédiatement visibles.
Chaque requête affiche la taille de la réponse (en Ko) et la durée totale (en millisecondes). Identifiez les appels API lents, les ressources surdimensionnées et les requêtes superflues qui impactent les performances de la page.
Une barre de résumé affiche le nombre total de requêtes et la taille cumulée de toutes les requêtes capturées. Filtrez le résumé pour voir les totaux par type — quelle bande passante est utilisée par les scripts, les images ou les appels API.
Surveillez les requêtes XHR/Fetch pour vérifier que votre frontend appelle les bons endpoints API avec les bons paramètres. Cliquez pour inspecter les payloads et les corps de réponse — détectez instantanément les formats de données incohérents.
Les entrées rouges 404 et 500 mettent immédiatement en évidence les ressources manquantes ou les appels API défaillants. Voyez quelles URL échouent, à quel moment, et quelle réponse d'erreur le serveur renvoie.
Triez par durée pour trouver les requêtes les plus lentes. Triez par taille pour trouver les ressources les plus volumineuses. Les totaux du résumé donnent une vue complète de la bande passante — la page fait-elle trop de requêtes ou télécharge-t-elle trop de données ?
Voyez quelles requêtes réseau la page effectue en arrière-plan — pings analytics, appels heartbeat, requêtes de polling, ressources chargées en différé. Comprenez l'intégralité de l'activité réseau au-delà de ce qui est visible par l'utilisateur.
Filtrez les requêtes et vérifiez quels domaines sont contactés. Identifiez les scripts tiers effectuant des appels réseau inattendus — pixels de tracking, collecte de données ou appels API externes dont vous ignoriez l'existence.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Network Monitor. Un panneau s'ouvre et commence immédiatement à capturer les requêtes réseau.
Utilisez la page normalement. Chaque requête réseau apparaît dans le flux au moment où elle est émise — appels API, chargements de ressources et requêtes en arrière-plan sont tous capturés.
Cliquez sur les filtres de type (XHR, JS, CSS, IMG, Font) pour affiner la vue. Affichez uniquement les appels API pour déboguer la récupération de données, ou uniquement les images pour vérifier le chargement des ressources.
Cliquez sur n'importe quelle ligne de requête pour en afficher les détails : URL, en-têtes, payload, corps de la réponse, code de statut, taille et durée.
Les codes de statut rouges (404, 500) indiquent des requêtes échouées. Les durées longues signalent des goulots d'étranglement de performance. Les tailles importantes suggèrent des ressources à optimiser.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
