Dans les Outils pour les développeurs Chrome, le panneau Network, qui fournit des informations précieuses 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 souhaitées apportées au panel Network (Réseau) qu'Ioana Forfota et Silvia Eremia ont apportées au cours de leur stage STEP. Ces améliorations étaient très attendues. Elles ont été soigneusement sélectionnées parmi les nombreuses tâches que nous avons mises en place dans l'outil Issue Tracker de Chromium, qui rendent le panneau plus accessible, intuitif et informatif.
Grâce à ces nouvelles fonctionnalités, le panneau 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 demande.
- Découvrez les réponses de sous-type JSON.
Lisez la suite pour en savoir plus.
Filtrer les demandes d'extension Chrome
Les extensions Chrome peuvent effectuer leurs propres requêtes réseau. Celles-ci s'affichent à côté des requêtes de la page dans le panneau Réseau. Si vous ne développez pas activement une extension, ces demandes ne seront probablement pas pertinentes pour vous. Auparavant, le seul moyen de les masquer était d'utiliser le filtre -scheme:chrome-extension ou de procéder au débogage en mode navigation privée.
Depuis Chrome 117, c'est plus facile. Pour désencombrer le panneau Network, les outils de développement proposent désormais une case à cocher permettant d'exclure les demandes d'extension Chrome.
Des discussions sont toujours en cours concernant l'état par défaut de cette fonctionnalité. Au départ, nous avions envisagé de l'activer par défaut, dans l'idée qu'elle pourrait améliorer l'expérience de la majorité des utilisateurs. Toutefois, cette approche peut empêcher certains utilisateurs de savoir que les URL des extensions Chrome peuvent déclencher des requêtes. Cela peut également poser problème pour les 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 demandes est plus claire, moins gênante et concentrée sur les requêtes les plus importantes. Vous bénéficiez ainsi d'une expérience de débogage beaucoup plus agréable.
Textes d'état de la réponse HTTP
Comprendre les codes d'état HTTP est essentiel pour un débogage efficace. Cependant, il n'est pas toujours pratique de rechercher constamment leur signification. Les outils de développement ont apporté une amélioration utile: lorsque vous pointez sur un code d'état dans la liste des demandes, une info-bulle affiche instantanément son texte d'état, un titre descriptif qui clarifie sa signification.
Le texte de l'état est également visible dans les en-têtes, à côté du code. Auparavant disponibles uniquement pour HTTP/1.1, ces fonctionnalités sont désormais étendues à HTTP/2 et HTTP/3. Ces ajustements apparemment mineurs ont un impact important. Ils vous font gagner du temps et vous permettent de vous concentrer sur le débogage plutôt que sur la recherche de la signification du code.
Visibilité améliorée des erreurs
Il est désormais plus facile de repérer les erreurs et de les corriger sans creuser dans les détails. Pour ce faire, au lieu de simplement mettre en surbrillance les messages d'erreur dont la couleur de texte change, nous avons ajouté des icônes indiquant des indications pour attirer l'attention sur les erreurs de requête, telles que celles dont le code d'état est 404. Ces indicateurs, à la fois subtils et utiles, permettront de repérer les erreurs et de ne pas négliger les problèmes importants.
Impression élégante des sous-types JSON
Le développement Web implique souvent d'inspecter les réponses JSON, mais la lecture de fichiers JSON bruts non formatés n'est pas pratique. Il peut être frustrant de traiter de telles réponses, en particulier les sous-types tels que ld+json, hal+json ou sparql-results+json, lorsqu'elles apparaissent sur une seule ligne, par exemple. Pour vous faciliter la tâche, DevTools propose une présentation réductible et plus conviviale pour les sous-types JSON. Ces réponses sont désormais formatées, ce qui évite aux développeurs d'avoir à utiliser 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 n'en sont qu'aux premiers stades de leur adoption, la réaction de la communauté est extrêmement positive. Leur mise en œuvre réussie a séduit de nombreux utilisateurs, qui ont été ravis des améliorations, améliorant considérablement leur expérience. Vous pouvez lire certaines des réponses sur X:
« Oh, c'est chouette ! Les outils pour les développeurs Chrome sont désormais plus performants en affichant des codes d'état HTTP lisibles par l'humain, ce qui permet d'identifier plus facilement le problème lié à une requête réseau." – TribalIdeas sur X
"Il m'a été très utile ces derniers temps. surtout en ce qui concerne les formulaires comportant 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 par vous-même le panneau amélioré Network. Bon débogage !
Télécharger les canaux de prévisualisation
Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de toute autre question concernant les outils de développement.
- Envoyez-nous une suggestion ou des commentaires via crbug.com.
- Signalez un problème dans les outils de développement via Plus d'options
> Aide > Signaler un problème dans les outils de développement dans les Outils de développement. - Envoyez un tweet à @ChromeDevTools.
- Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.