Comment puis-je déboguer un HTTP POST dans Chrome?

Je souhaite afficher les données HTTP POST envoyées dans Chrome.

Les données sont maintenant en mémoire et j'ai la possibilité de soumettre à nouveau le formulaire.

Je sais que si je soumets à nouveau le serveur générera une erreur, est-il possible de voir les données qui sont dans la mémoire de Chrome?

1. Accédez aux outils de développement Chrome (menu Chrome -> Plus d'outils -> Outils de développeur)
2. Choisissez l'onglet "Réseau"
3. Actualisez la page sur laquelle vous vous trouvez
4. Vous obtiendrez la liste des requêtes http qui se sont produites pendant que la console réseau était allumée. Sélectionnez l'un d'eux à gauche
5. Choisissez l'onglet "En-têtes"

Voila!

Vous pouvez filtrer les demandes HTTP POST avec Chrome DevTools . Procédez simplement comme suit:

1. Ouvrez Chrome DevTools ( Cmd+ Opt+ Isur Mac, Ctrl+ Shift+ Iou F12sur Windows) et cliquez sur l'onglet "Réseau"
2. Cliquez sur l'icône "Filtre"
3. Entrez votre méthode de filtrage: method:POST
4. Sélectionnez la demande que vous souhaitez déboguer
5. Afficher les détails de la demande que vous souhaitez déboguer

Capture d'écran

Testé avec Chrome Version 53.

Vous pouvez utiliser la version Canary de Chrome pour voir la charge utile des demandes POST.

Une autre option qui peut être utile est un outil de débogage HTTP dédié. Il y en a quelques-uns disponibles, je suggère HTTP Toolkit : un projet open-source sur lequel je travaille (ouais, je pourrais être biaisé) pour résoudre ce même problème par moi-même.

La principale différence est la convivialité et la puissance. Les outils de développement Chrome sont bons pour les choses simples, et je recommanderais de commencer par là, mais si vous avez du mal à comprendre les informations là-bas, et que vous avez besoin de plus d'explications ou de plus de puissance, des outils ciblés appropriés peuvent être utiles!

Dans ce cas, il vous montrera le corps POST complet que vous recherchez, avec un éditeur convivial et une mise en surbrillance (tous alimentés par VS Code ) afin que vous puissiez creuser. Il vous donnera bien sûr les en-têtes de demande et de réponse, mais avec des informations supplémentaires comme les documents de MDN ( Mozilla Developer Network ) pour chaque en-tête standard et code d'état que vous pouvez voir.

Une image vaut mille réponses StackOverflow:

Les autres personnes ont fait de très belles réponses, mais je voudrais terminer leur travail avec un outil de développement supplémentaire. Il s'appelle Live HTTP Headers et vous pouvez l'installer dans votre Firefox , et dans Chrome, nous avons le même plug-in comme celui-ci .

Travailler avec est simple.

1. À l'aide de votre Firefox, accédez au site Web sur lequel vous souhaitez recevoir votre demande de publication.

2. Dans votre menu Firefox Outils-> En-têtes Http Live

3. Une nouvelle fenêtre apparaît pour vous, et tous les détails de la méthode http seraient enregistrés dans cette fenêtre pour vous. Vous n'avez rien à faire à cette étape.

4. Sur le site, faites une activité (connectez-vous, soumettez un formulaire, etc.)

5. Regardez votre fenêtre de plug-in. Tout est enregistré.

N'oubliez pas que vous devez vérifier la capture .

La situation est délicate: si vous soumettez un formulaire de publication, Chrome ouvrira un nouvel onglet pour envoyer la demande. C'est correct jusqu'à présent, mais s'il déclenche un événement pour télécharger le (s) fichier (s) , cet onglet se fermera immédiatement afin que vous ne puissiez pas capturer cette demande dans l'outil de développement.

Solution: avant de soumettre le formulaire de publication, vous devez couper votre réseau , ce qui rend la demande impossible à envoyer afin que l'onglet ne soit pas fermé. Et puis, vous pouvez capturer le message de demande dans Chrome Devtool (actualiser le nouvel onglet si nécessaire)