20 - Debugger HTTP : curl, DevTools, Wireshark et les autres

Ce que tu vas apprendre

• curl en mode verbose et ses options les plus utiles
• httpie comme alternative human-friendly
• Chrome DevTools onglet Network en détail
• Wireshark pour l'inspection au niveau paquet
• mitmproxy pour intercepter du HTTPS
• Rejouer des requêtes et "Copy as curl"

Prerequisites

• 19 - Security headers
• Avoir acces a un terminal et un navigateur

---

Un bug HTTP, ca peut etre n'importe quoi. Un header manquant, un cookie qui ne part pas, un redirect infini, un problème de CORS, un body mal encode, un certificat expire. Et dans tous ces cas, la première chose a faire est de regarder ce qui passe sur le réseau. Pas deviner. Pas lire le code. Regarder. Les outils existent, ils sont gratuits, et ils te feront gagner des heures.

curl : le couteau suisse

curl est installe partout. Linux, macOS, Windows (depuis Windows 10). C'est l'outil que tu utiliseras le plus pour debugger du HTTP.

Les options essentielles

Voir les headers de réponse :

bashcurl -I https://example.com

-I envoie un HEAD et affiche uniquement les headers. Parfait pour vérifier un Content-Type, un cache header ou un redirect.

Mode verbose :

bashcurl -v https://example.com

-v affiche TOUT : la résolution DNS, le handshake TLS, les headers envoyes, les headers reçus, le body. Les lignes prefixees par > sont ce que curl envoie. Les lignes prefixees par < sont ce que le serveur répond. Les lignes prefixees par * sont des infos de connexion.

* Connected to example.com (93.184.216.34) port 443
> GET / HTTP/2
> Host: example.com
> User-Agent: curl/8.4.0
> Accept: */*
>
< HTTP/2 200
< content-type: text/html; charset=UTF-8
< content-length: 1256

Suivre les redirections :

bashcurl -L https://example.com

Sans -L, curl s'arrêté au premier 301/302. Avec, il suit la chaîne de redirections.

Envoyer des headers custom :

bashcurl -H "Authorization: Bearer mon-token" -H "Accept: application/json" https://api.example.com/users

POST avec body JSON :

bashcurl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "Nicolas", "email": "test@example.com"}'

Mesurer le timing :

bashcurl -o /dev/null -s -w "DNS: %{time_namelookup}s\nConnect: %{time_connect}s\nTLS: %{time_appconnect}s\nFirst byte: %{time_starttransfer}s\nTotal: %{time_total}s\n" https://example.com

Ca donne :

DNS: 0.023s
Connect: 0.045s
TLS: 0.089s
First byte: 0.134s
Total: 0.156s

Tu sais immédiatement ou est le goulot d'etranglement. DNS lent ? TLS lent ? Serveur lent a répondre ? Le timing ne ment pas.

httpie : curl pour les humains

httpie est une alternative a curl avec une syntaxe plus intuitive et un output colore :

bashhttp GET https://api.example.com/users Authorization:"Bearer mon-token"

bashhttp POST https://api.example.com/users name=Nicolas email=test@example.com

httpie détecté automatiquement que tu envoies du JSON et ajoute le Content-Type. L'output est colore et formate. Pour explorer une API, c'est plus agreable que curl. Mais curl reste indispensable parce qu'il est partout.

Chrome DevTools : l'onglet Network

L'onglet Network des DevTools est probablement l'outil que tu utiliseras le plus au quotidien pour debugger du HTTP dans un navigateur.

Ce que tu peux voir

La liste des requêtes : chaque ligne est une requête. Tu vois la méthode, le status, le type, la taille, le temps.

Le waterfall : la colonne "Waterfall" montre le timing de chaque requête sous forme de barre. Les couleurs indiquent les phases :

• Vert clair : attente (TTFB - Time To First Byte)
• Bleu : telechargement
• Gris : en file d'attente

Les détails d'une requête : clique sur une ligne pour voir :

• Headers : requête et réponse, incluant les headers de cache, cookies, CORS
• Payload : le body envoye (pour les POST/PUT)
• Preview : rendu du body de la réponse (JSON formate, image affichee)
• Response : le body brut
• Timing : décomposition détaillée (DNS, connect, TLS, waiting, download)

Filtres utiles

• Filtre par type : XHR, JS, CSS, Img, Media, Font, Doc, WS
• Filtre par texte : tape un mot dans la barre de filtre
• status-code:404 : uniquement les 404
• is:from-cache : requêtes servies depuis le cache
• larger-than:1M : requêtes de plus de 1 Mo

Preserve log et Disable cache

Deux checkboxes en haut de l'onglet :

• Preserve log : garde les requêtes meme apres une navigation. Indispensable pour debugger les redirections
• Disable cache : force le rechargement de toutes les ressources. Utile quand tu suspectes un problème de cache

Copy as curl

Mon astuce préférée. Dans l'onglet Network, fais un clic droit sur n'importe quelle requête, puis "Copy > Copy as cURL". Tu obtiens une commande curl complète avec tous les headers, cookies, body. Tu peux la coller dans ton terminal et la modifier.

C'est invaluable pour reproduire un bug. Tu captures la requête exacte du navigateur, tu la rejoues en curl, tu modifies un paramètre a la fois pour isoler le problème. J'utilise ca au moins une fois par semaine. Sur paltemps.fr, c'est comme ca que j'ai debugge un problème de cookie SameSite qui n'apparaissait qu'en cross-origin.

Wireshark : le niveau paquet

Wireshark capture tout le trafic réseau de ta machine. C'est l'outil ultime mais aussi le plus verbeux. Tu vois chaque paquet TCP, chaque segment, chaque handshake.

Pour HTTP non chiffre, Wireshark peut lire les requêtes et réponses directement. Pour HTTPS, il faut fournir la clé de session TLS. Tu peux configurer Chrome pour exporter ces clés :

bashSSLKEYLOGFILE=/tmp/sslkeys.log google-chrome

Puis dans Wireshark : Edit > Preferences > Protocols > TLS > Pre-Master-Secret log filename > /tmp/sslkeys.log.

Quand utiliser Wireshark :

• Problèmes de connexion TCP (resets, retransmissions)
• Verification du handshake TLS
• Problèmes de performance au niveau transport
• Quand tous les outils de niveau application disent "tout va bien" mais ca ne marche pas

Pour du debug HTTP quotidien, c'est overkill. Commence par curl et DevTools.

mitmproxy : l'intercepteur HTTPS

mitmproxy est un proxy d'interception. Tu le configures comme proxy de ton navigateur ou de ton appli mobile, et il dechiffre tout le trafic HTTPS. Tu peux voir, modifier et rejouer chaque requête.

bashmitmproxy

Ca lance une interface terminal. Chaque requête s'affiche en temps réel. Tu peux :

• Inspecter les headers et le body
• Modifier une requête avant qu'elle parte
• Modifier une réponse avant qu'elle arrive au client
• Rejouer une requête
• Filtrer par URL, méthode, status

mitmweb offre la meme chose avec une interface web dans ton navigateur.

C'est particulièrement utile pour debugger des applis mobiles. Tu configures le proxy sur ton telephone, tu installes le certificat mitmproxy, et tu vois tout le trafic HTTP de tes apps.

Charles Proxy fait la meme chose avec une interface graphique plus polie, mais il est payant. mitmproxy est gratuit et open source.

Recapitulatif des outils

Outil	Quand l'utiliser	Niveau
curl -v	Debug rapide, scripts, CI	Débutant
httpie	Explorer une API, lisibilité	Débutant
DevTools Network	Debug dans le navigateur	Débutant
Copy as cURL	Reproduire une requête exacte	Intermediaire
mitmproxy	Debug mobile, modification a la volee	Intermediaire
Wireshark	Problèmes TCP/TLS, analyse réseau	Avance

Résumé

• curl -v est ton premier reflexe pour inspecter une requête HTTP
• curl -w mesure le timing détaillé (DNS, TLS, TTFB)
• Chrome DevTools Network montre le waterfall, les headers et le timing
• "Copy as cURL" te permet de reproduire exactement une requête du navigateur
• mitmproxy intercepte le HTTPS pour le debug mobile et les modifications a la volee
• Wireshark descend au niveau paquet pour les problèmes de transport

---

Article précédent : 19 - Security headers Article suivant : 21 - Glossaire

Sources

• curl documentation
• Chrome DevTools Network référencé
• mitmproxy documentation