Comment copier des requêtes API depuis l'onglet Réseau

Lorsque vous déboguez des requêtes API dans le navigateur et que vous repérez une erreur 400 ou 500, le moyen le plus rapide d’investiguer est de copier cette requête directement depuis l’onglet Réseau et de la rejouer dans un client API dédié. Aucune configuration de proxy n’est nécessaire. Voici comment procéder efficacement dans Chrome, Edge et Firefox.

Le workflow standard

Ouvrez les DevTools (F12 ou Cmd+Option+I sur Mac), accédez à l’onglet Réseau (Network), et déclenchez l’action qui génère la requête. Une fois que la requête apparaît dans la liste, faites un clic droit dessus pour accéder aux options de copie.

Avant de copier, deux paramètres méritent d’être vérifiés :

• Filtrer par Fetch/XHR — Cliquez sur le bouton de filtre “Fetch/XHR” pour masquer les ressources statiques et vous concentrer uniquement sur les appels API. Cela facilite grandement la localisation de la bonne requête.
• Conserver le journal (Preserve log) — Activez cette option si la requête se produit pendant une navigation de page ou une redirection. Sans cela, l’onglet Réseau se vide lors de la navigation et vous perdrez l’entrée.

Pour trouver rapidement un endpoint spécifique, utilisez le panneau Recherche (Ctrl+F / Cmd+F dans l’onglet Réseau) et recherchez par fragment d’URL ou nom d’endpoint.

Copier comme cURL vs. Copier comme fetch

Un clic droit sur une requête vous donne plusieurs options de copie. Les deux plus utiles sont Copier comme cURL (Copy as cURL) et Copier comme fetch (Copy as fetch).

Copier comme cURL

C’est l’option la plus largement supportée dans Chrome, Edge et Firefox. Elle produit une commande shell que vous pouvez coller directement dans un terminal ou importer dans des outils comme Postman ou Insomnia.

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"page":1}'

Idéal pour : Les tests en terminal, le partage avec les collègues backend, l’import dans des clients API, ou la création de rapports de bugs avec une requête reproductible.

Copier comme fetch

Cette option génère un appel JavaScript fetch() que vous pouvez coller directement dans la console du navigateur ou un script Node.js.

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Authorization": "Bearer eyJhbGci...",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ page: 1 })
});

Idéal pour : Les tests rapides en console, la reproduction de problèmes dans des environnements JavaScript, ou la création de squelettes d’appels fetch dans votre code.

Chrome et Edge offrent également Copy as Node.js fetch et Copy as PowerShell pour des workflows spécifiques à certains environnements.

Quand les requêtes copiées ne peuvent pas être rejouées avec succès

Copier une requête capture son état à ce moment précis, y compris les cookies de session, les jetons d’authentification et les en-têtes CSRF. La rejouer plus tard peut échouer pour plusieurs raisons :

• Jetons ou sessions expirés — Les JWT et cookies de session ont des durées de vie limitées (TTL). Une requête copiée il y a une heure peut retourner une erreur 401.
• Authentification liée aux cookies — Certains flux d’authentification reposent sur des cookies HttpOnly qui ne sont pas entièrement visibles dans la sortie copiée.
• Séquencement des requêtes — Certaines API nécessitent une requête préalable (par exemple, récupérer un jeton CSRF) avant que l’appel cible ne réussisse.

Si une requête rejouée échoue de manière inattendue, vérifiez d’abord les en-têtes d’authentification.

Exporter plusieurs requêtes : fichiers HAR

Pour capturer et exporter plusieurs requêtes à la fois, utilisez l’option d’export HAR dans l’onglet Réseau. Dans les versions actuelles de Chrome et Edge, les exports HAR sont nettoyés par défaut et peuvent exclure les en-têtes sensibles tels que les cookies et les données d’autorisation, sauf si vous activez explicitement l’export avec les données sensibles. Le fichier .har résultant (format JSON) peut être importé dans des outils comme Postman ou Insomnia, ou traité avec des outils comme jq pour extraire en masse les URL et les payloads.

Note sur la sécurité

Les requêtes copiées contiennent souvent des données sensibles : jetons d’authentification, cookies de session, clés API et corps de requête. Avant de partager une commande cURL ou un fichier HAR avec un collègue ou dans un rapport de bug, nettoyez-le — remplacez les vrais jetons par des placeholders comme <TOKEN> et supprimez toute donnée personnelle du payload.

Conclusion

Copier des requêtes API depuis l’onglet Réseau est l’une des techniques de débogage les plus pratiques dans la boîte à outils d’un développeur frontend. Utilisez Copier comme cURL lorsque vous avez besoin de portabilité et de compatibilité avec différents outils. Utilisez Copier comme fetch lorsque vous restez dans un contexte JavaScript. Dans tous les cas, vous êtes à quelques secondes d’une requête reproductible et inspectable.

FAQ

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.