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

196

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?

google-chrome debugging post goodguys_activate
la source
Il y a un bel exemple de vidéo-giff sur la façon d'accéder à l'onglet réseau ici: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress
WPZA

Réponses:

232
  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!

entrez la description de l'image ici

mrówa
la source
74
C'est GET, pas POST
QkiZ
7
Il capture les requêtes GET et POST, @QkiZ
almulo
48
Remarque: Pour voir réellement une demande de publication qui recharge votre page, vous devez vérifier "Conserver le journal".
Bryce Guinta
39
Je manque le corps de la demande ici? :-(
Timo
3
Dans Chrome 71, le corps (c'est-à-dire les données POST-ed) apparaît au bas de l'onglet En-têtes sous l'en-tête "Demander la charge utile".
MSC
138

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

Chrome DevTools

Testé avec Chrome Version 53.

Benny Neugebauer
la source
1
Fonctionné sur Chrome 70. Le filtrage à l'aide method:POSTest très utile
user1071847
14

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

Demande de charge utile

mihijs
la source
Y a-t-il des liens pour plus de détails à ce sujet ou quand cela a changé? EDIT: répondu à ma propre question. Si vous utilisez l'API Fetch, Chrome ne capturait pas ces demandes à afficher dans l'onglet . Apparemment, les Canaries sont ou seront bientôt.
virtualandy
6
Maintenant, il est disponible dans les versions standard de Chrome lui-même!
Nachiketha
5

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:

Une capture d'écran de HTTP Toolkit montrant une requête POST et son corps

Tim Perry
la source
1
Semble très prometteur, mais il y a quelques problèmes sur ma machine, les a postés sur GitHub.
userlond
0

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 .

entrez la description de l'image ici

Jimmy
la source
0

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)

Dcalsky
la source