Comment ouvrir l'onglet Réseau et ce que XHR signifie réellement

Quelqu’un vous a dit « ouvrez l’onglet Réseau et voyez si des requêtes échouent », et maintenant vous regardez un panneau rempli de lignes, de couleurs et de colonnes qui n’ont aucun sens pour vous. C’est le chemin le plus court de là à la réponse qu’il attendait.

L’onglet Réseau enregistre chaque requête que la page effectue : chaque image, chaque script et chaque appel que votre navigateur envoie à un serveur pour récupérer des données. Quand une page est cassée d’une manière que vous ne pouvez pas voir - un bouton qui ne fait rien, une liste qui ne se charge pas, une sauvegarde qui échoue silencieusement - la raison est très souvent l’une de ces requêtes, et c’est là que c’est écrit.

L’ouvrir

Chrome, Edge, Brave et le reste de Chromium. Appuyez sur F12, ou Cmd + Option + I sur un Mac. Les outils de développement s’ouvrent ; cliquez sur l’onglet Réseau en haut. Si vous ne le voyez pas, il est derrière la flèche de débordement ».

Firefox. La même F12, puis l’onglet Réseau.

Safari. L’onglet Réseau se trouve derrière un menu qui est désactivé par défaut. Ouvrez Paramètres, allez dans Avancées, et cochez Afficher les fonctionnalités pour les développeurs web. Puis Développement, Afficher l’inspecteur web, et l’onglet Réseau est là.

Le panneau est presque toujours vide quand il s’ouvre, et c’est la première chose qui déroute les gens.

Pourquoi il est vide et comment le remplir

L’onglet Réseau n’enregistre que quand il est ouvert. Il ne se souvient pas de ce qui s’est passé avant votre arrivée, donc les requêtes qui se sont exécutées quand la page s’est chargée pour la première fois ont déjà disparu.

Donc : avec l’onglet ouvert, rechargez la page. Tout ce que la page récupère va défiler sous forme de liste de lignes. Si le problème se produit quand vous cliquez sur quelque chose plutôt qu’au chargement, vous n’avez même pas besoin de recharger - faites juste l’action, et regardez les lignes apparaître au fur et à mesure.

Un paramètre vaut la peine d’être activé avant de commencer : Conserver le journal (Firefox l’appelle la même chose). Sans cela, une page qui redirige ou recharge efface la liste, et la requête que vous traçiez disparaît avec elle. Coché, la liste survit, et vous pouvez voir la requête qui s’est produite juste avant que la page change.

Lire une ligne

Chaque ligne est une requête. De gauche à droite, les colonnes qui importent :

• Nom - le fichier ou le point de terminaison qui a été demandé
• Statut - le code HTTP qui est revenu. C’est celui pour lequel vous avez été envoyé ici
• Type - quel type de chose c’était : un document, un script, une image, ou fetch/xhr pour un appel de données
• Durée - combien de temps cela a pris

Les couleurs sont un raccourci. Une ligne rouge est une requête qui a échoué. Si quelqu’un a dit « voyez si quelque chose échoue », vous cherchez du rouge, ou un statut de 400 ou plus.

Cliquez sur une ligne et un panneau s’ouvre avec le détail : En-têtes pour ce qui a été envoyé et reçu, Réponse ou Aperçu pour ce qui est revenu, et Minutage pour où le temps s’est écoulé. Pour une requête qui échoue, Réponse est généralement où se trouve l’explication du serveur.

Ce que XHR signifie, car c’est le filtre qu’on vous dira d’utiliser

Le long du haut du panneau se trouve une ligne de filtres : Tous, Fetch/XHR, Doc, CSS, JS, Img. « Ouvrez l’onglet Réseau et filtrez sur XHR » est une instruction courante, et XHR est le mot le moins évident dedans.

XHR signifie XMLHttpRequest. En pratique, cela signifie une requête que votre page a faite en arrière-plan pour récupérer des données, sans charger une nouvelle page - la façon moderne du web de mettre à jour une partie d’un écran sans un rechargement complet. Quand vous tapez dans une zone de recherche et que des résultats apparaissent en dessous, c’est un XHR. Quand un bouton « Charger plus » ajoute des éléments sans que la page clignote, c’est un XHR.

Le nom est un accident historique - la fonctionnalité de navigateur d’origine a été construite pour XML, que presque personne n’envoie plus ; aujourd’hui, ils transportent JSON. Son remplacement plus récent est la fonction fetch(), ce qui explique pourquoi le filtre se lit Fetch/XHR : deux noms, signifiant tous deux la même chose, une requête de données plutôt qu’une page, une image ou une feuille de style.

En cliquant sur Fetch/XHR, vous masquez les images, les scripts et les polices et ne laissez que les appels de données, ce qui est presque toujours où se trouve l’échec d’une fonctionnalité cassée. Un bouton qui ne fait rien a généralement envoyé une requête ; elle est juste là, en rouge, avec la raison dans sa Réponse.

En faire quelque chose que vous pouvez envoyer

Lire l’onglet Réseau vous-même est une chose. La partie plus difficile est de transmettre ce que vous avez vu à la personne qui peut le corriger, car une capture d’écran du panneau perd le détail - les en-têtes, le corps de la réponse, l’ordre - qui explique réellement l’échec.

L’onglet peut exporter la session entière en tant que fichier HAR : cliquez avec le bouton droit sur une ligne et choisissez Enregistrer tout en tant que HAR avec contenu. C’est le journal réseau sous forme d’un fichier, que quelqu’un peut ouvrir dans son propre onglet Réseau, ou dans le visionnneur de HAR, exactement comme s’il l’avait enregistré. Lisez ce guide avant d’en envoyer un, cependant - un HAR contient généralement vos cookies de session, et il doit être traité comme un mot de passe.

Si la requête qui échoue est celle qui retourne « TypeError: Failed to fetch » dans la console sans rien d’utile dans l’onglet Réseau, ce cas spécifique a sa propre explication - cela signifie généralement que la requête ne s’est pas rendue assez loin pour avoir un statut du tout.

Le journal réseau qu’il capture est la même liste de requêtes que vous auriez lues dans l’onglet, déjà enregistrée et jointe, donc la personne qui reprend le rapport n’a pas à vous guider à travers son ouverture. Pour tout ce qui l’entoure - ce que vous attendiez et ce qui s’est passé à la place - le guide de rapport de bogue a le modèle.