Dans Chrome DevTools, le panneau Network (Réseau) qui vous fournit des insights précieux sur l'activité réseau d'une page Web est l'un des outils les plus utilisés.
Cet article présente un ensemble d'améliorations très appréciées apportées au panneau Network (Réseau) par Ioana Forfota et Silvia Eremia au cours de leur stage STEP. Ces améliorations, très attendues, ont été soigneusement sélectionnées parmi la longue liste de demandes du outil de suivi des problèmes de Chromium. Elles rendent le panneau plus accessible, intuitif et informatif.
Grâce à ces nouvelles fonctionnalités, le panneau Network (Réseau) permet aux développeurs Web de:
- Concentrez-vous uniquement sur les requêtes réseau pertinentes.
- Comprendre les codes d'état HTTP sans avoir besoin de références externes
- Identifiez et corrigez rapidement les erreurs de requête.
- Comprendre les réponses de sous-type JSON
Lisez la suite pour en savoir plus.
Filtrer les requêtes d'extensions Chrome
Les extensions Chrome peuvent effectuer leurs propres requêtes réseau, qui apparaissent à côté des requêtes de la page dans le panneau Network (Réseau). Si vous ne développez pas activement d'extension, ces demandes ne vous concerneront probablement pas. Auparavant, le seul moyen de les masquer était d'utiliser le filtre -scheme:chrome-extension ou de déboguer en mode navigation privée.
Depuis Chrome 117, cela est devenu plus facile. Pour désencombrer le panneau Réseau, DevTools propose désormais une case à cocher pour exclure les requêtes des extensions Chrome.
Des discussions sont en cours concernant l'état par défaut de cette fonctionnalité. Au départ, nous avons envisagé de l'activer par défaut, car nous pensions qu'il pourrait améliorer l'expérience pour la majorité des utilisateurs. Toutefois, cette approche peut laisser certains utilisateurs dans l'ignorance du fait que les URL des extensions Chrome peuvent déclencher des requêtes. Cela peut également poser des défis aux développeurs d'extensions. Par conséquent, l'état par défaut est défini sur "désactivé".
Lorsque cette case est cochée, votre liste de requêtes est plus claire, moins distrayante et plus axée sur les requêtes les plus importantes. Vous pouvez ainsi profiter d'une expérience de débogage beaucoup plus agréable.
Textes d'état de réponse HTTP
Comprendre les codes d'état HTTP est essentiel pour déboguer efficacement. Cependant, rechercher constamment leur signification peut s'avérer gênant. DevTools a introduit une amélioration utile: lorsque vous maintenez le pointeur sur un code d'état dans la liste des requêtes, une info-bulle fournit instantanément son texte d'état (un titre descriptif qui clarifie sa signification).
Le texte d'état est également visible dans la vue des en-têtes, juste à côté du code. Ces fonctionnalités, qui n'étaient auparavant disponibles que pour HTTP/1.1, sont désormais étendues à HTTP/2 et HTTP/3. Ces ajustements apparemment mineurs ont un impact significatif. Ils vous font gagner du temps et vous permettent de vous concentrer sur le débogage plutôt que de chercher la signification du code.
Visibilité améliorée des erreurs
Nous avons facilité la détection et la résolution rapides des erreurs sans avoir à examiner en détail le panneau. Pour ce faire, au lieu de simplement mettre en surbrillance les messages d'erreur en modifiant la couleur du texte, nous avons ajouté des icônes indicatives pour attirer l'attention sur les erreurs de requête, comme celles associées au code d'état 404. Ces indicateurs subtils, mais utiles, rendent les erreurs plus visibles, ce qui vous permet de ne pas passer à côté de problèmes importants.
Mise en forme des sous-types JSON
Le développement Web implique souvent d'inspecter les réponses JSON, mais la lecture de JSON bruts non formatés est très incommode. Gérer de telles réponses, en particulier les sous-types tels que ld+json, hal+json ou sparql-results+json, peut être frustrant, par exemple lorsqu'ils s'affichent sur une seule ligne. Pour simplifier la tâche, DevTools a introduit une présentation plus conviviale et réductible pour les sous-types JSON. Ces réponses sont désormais mises en forme, ce qui évite aux développeurs de s'appuyer sur des outils externes. Cette refonte offre une représentation simple et très lisible.
Commentaires positifs de la communauté
Même si ces fonctionnalités ne sont qu'à leurs débuts, la communauté a été très positive à leur égard. Leur implémentation réussie a ravi de nombreux utilisateurs, qui ont vu leur expérience considérablement améliorée. Vous pouvez lire certaines des réponses sur X:
"Oh, c'est bien ! ChromeDevTools vient de passer à la vitesse supérieure en affichant des codes d'état HTTP lisibles par l'homme, ce qui permet de voir beaucoup plus facilement ce qui ne va pas avec une requête réseau." – TribalIdeas sur X
"Elle m'a été très utile ces derniers temps. En particulier avec les formulaires avec des bloqueurs de publicité et des extensions de grammaire." – MrAhmadAwais sur X
Prêt à découvrir ces nouvelles fonctionnalités ? Accédez aux outils pour les développeurs Chrome et découvrez le panneau Réseau amélioré. Bon débogage !
Télécharger les canaux de prévisualisation
Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.
- Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
- Signalez un problème dans les outils de développement à l'aide de l'icône Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.