web-dev-qa-db-fra.com

Modifier et rejouer XHR chrome / firefox, etc.?

Je cherchais un moyen de modifier une requête XHR effectuée dans mon navigateur, puis de la rejouer à nouveau. Supposons que je fasse une demande complète POST dans mon navigateur et que la seule chose que je veuille modifier soit une petite valeur, puis l'exécutez à nouveau. Ce serait beaucoup plus facile et rapide à faire directement dans le navigateur.

J'ai un peu cherché sur Google et je n'ai pas trouvé le moyen de le faire dans Chrome ou Firefox. Y at-il un moyen de le faire dans l'un de ces navigateurs, ou peut-être un autre?

google-chromefirefoxbrowserxmlhttprequest
101
madsobel

Chrome:

  • Dans le panneau Réseau de devtools, cliquez avec le bouton droit de la souris et sélectionnez Copier en tant que cURL .
  • Collez/modifiez la demande, puis envoyez-la depuis un terminal, en supposant que vous ayez la commande curl.

Voir capture:

enter image description here

Alternativement, et au cas où vous auriez besoin d'envoyer la requête dans le contexte d'une page Web, sélectionnez "Copier en tant que récupération" et modifier-envoyer le contenu à partir du panneau de la console javascript.


Firefox:

Firefox permet d’éditer et de renvoyer XHR directement à partir du panneau Réseau. La capture ci-dessous provient de Firefox 36:

enter image description here

124
Michael P. Bazos

Mes deux suggestions:

  1. plugin Postman de Chrome + le plugin Postman Interceptor . Plus d'infos: Documents Postman Capture de demandes

  2. Si vous êtes sous Windows, le Fiddler de Telerik est une option. Il a une option composer pour relire les requêtes http, et c'est gratuit.

16
zszep

Chrome a maintenant une copie sous forme de récupération dans la version 67:

Copier comme chercher

Cliquez avec le bouton droit de la souris sur une demande réseau, puis sélectionnez Copier> Copier en tant que récupération pour copier le code équivalent fetch()- de cette demande dans votre presse-papiers.

https://developers.google.com/web/updates/2018/04/devtools#fetch

Exemple de sortie:

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "Origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

La différence est que Copier en tant que cURL inclura également tous les en-têtes de requête (tels que Cookie et Accepter) et convient à la relecture de la requête en dehors de Chrome. Le code fetch() convient à la lecture dans le même navigateur.

15
Josh Lee

Mise à jour/achèvement réponse zszep :

Après avoir copié la demande en tant que cUrl (bash), importez-la simplement dans le Postman App :

enter image description here

10
jgpATs2w

Pour Firefox, le problème s'est résolu. Il a la fonctionnalité "Modifier et renvoyer" implémentée.

Pour Chrome extension de sabotage semble faire l'affaire.

2
Jari Turkia

Comme indiqué ci-dessus, il existe plusieurs façons de le faire, mais selon mon expérience, le meilleur moyen de manipuler une demande XHR et de le renvoyer consiste à utiliser chrome outils de développement pour copier la demande en tant que demande cURL (clic droit sur la demande dans l'onglet réseau) et d'importer simplement dans l'application Postman (bouton d'importation géant en haut à gauche).

0
quinlo