Modifier et rejouer XHR chrome / firefox etc?

144

J'ai cherché un moyen de modifier une requête XHR effectuée dans mon navigateur, puis de la rejouer à nouveau. Disons que j'ai une requête POST complète dans mon navigateur et que la seule chose que je souhaite modifier est une petite valeur, puis la rejouer. Ce serait beaucoup plus facile et plus rapide à faire directement dans le navigateur.

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

Madsobel
la source
Si vous atterrissez ici après avoir réalisé que "Replay XHR" ne fonctionne pas dans Chrome, notez que dans les cas avec des OPTIONSdemandes Preflight ( ), vous devez cliquer sur "Replay" sur la demande Preflight, et non sur la demande finale.
Janaka Bandara

Réponses:

181

Chrome:

  • Dans le panneau Réseau des outils de développement, 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 curlcommande

Voir capture:

entrez la description de l'image ici

Sinon, et au cas où vous auriez besoin d'envoyer la demande dans le contexte d'une page Web , sélectionnez "Copier comme récupération" et éditez-envoyez le contenu à partir du panneau de la console javascript.


Firefox:

Firefox permet de modifier et de renvoyer XHR directement depuis le panneau Réseau. La capture ci-dessous provient de Firefox 36:

entrez la description de l'image ici

Michael P. Bazos
la source
C'est peut-être ce que je recherche. Je savais que je pouvais copier l'appel cURL, mais je ne pouvais pas l'exécuter directement depuis mon terminal car je serais authentifié. Mais avec le terminal intégré directement à Chorme, je suppose que l'appel est effectué «à l'intérieur» du navigateur. Si tel est le cas, cela devrait sceller l'accord.
madsobel
14
J'ai ajouté des informations sur Firefox dans la réponse
Michael P. Bazos
Petite astuce: si vous voulez voir la sortie cURL dans le navigateur, exécutez-la dans la CLI comme ceci curl ... > preview.htmlpuis ouvrez le fichier dans le navigateur.
afilina
@afilina pour automatiser encore plus ce processus, vous pouvez ajouter && open preview.htmlsur macOS et le fichier s'ouvre directement après la demande
CodeBrauer
2
Dans ce cas, Firefox fait de loin un bien meilleur travail!
jpenna
41

Chrome a maintenant Copier comme récupération dans la version 67:

Copier en tant que récupération

Cliquez avec le bouton droit sur une demande réseau, puis sélectionnez Copier> Copier en tant que récupération pour copier le fetch()code équivalent 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 comprendra également tous les en-têtes de demande (tels que Cookie et Accept) et convient pour relire la demande en dehors de Chrome. Le fetch()code est adapté à la lecture à l'intérieur du même navigateur.

Josh Lee
la source
6
Merci pour ça. Pour quiconque se demande, vous pouvez simplement coller la fetchcommande directement dans la console Chrome et relire la demande.
Eric Kigathi
7
Vous pouvez utiliser ce qui suit après l'extraction pour résoudre la promesse retournée par l'extraction et afficher le corps de la réponse (en supposant qu'il s'agisse de JSON).then(r => r.json()).then(json => console.log(json))
conforme à POSIX
1
@Josh Lee, je pense que les conseils conformes à POSIX étaient bons et peuvent être ajoutés à cette réponse.
Nabi KAZ
@ Bons conseils conformes à POSIX, y a-t-il une commande plus petite que je puisse garder à l'esprit?!
Nabi KAZ
Pour ceux qui se demandent où coller le code de récupération: collez-le et modifiez-le sur la console
dotista2008
20

Mes deux suggestions:

  1. Le plugin Postman de Chrome + le plugin Postman Interceptor . Plus d'informations: Postman capturant des demandes de documents

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

zszep
la source
8
Depuis que j'ai commencé à utiliser Postman + l'extension chrome Interceptor, je n'ai pas eu besoin de Fiddler.
threadster
3
L'application FYI Postman pour Chrome est maintenant obsolète et la configuration en version autonome est un peu plus difficile
yefrem
merci beaucoup ce que je cherchais!
Mohammad le
4

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

Pour Chrome, l' extension semble faire l'affaire.

Jari Turkia
la source
Ce qui n'est plus mis à jour et a des critiques plutôt mauvaises. La meilleure alternative est d'utiliser Firefox pour ce genre de travail imo.
T3rm1
Ouais. La situation du renvoi semble évoluer assez rapidement. Maintenant, Chrome a des requêtes Renvoyer pour XHR, mais il n'autorise pas l'édition.
Jari Turkia
méfiez-vous de Firefox ver.76 qui semble avoir un problème avec le jeton CSRF dans les cookies lors de l'édition et du renvoi. Essayé avec la version 37, cela fonctionnait bien, mais avec la version 76, il y avait un problème de validation de jeton CSRF.
puppyceceyoyo le
1

5 ans se sont écoulés et cette exigence essentielle n'a pas été ignorée par les développeurs de Chrome.
Bien qu'ils n'offrent aucune méthode pour modifier les données comme dans Firefox, ils offrent une rediffusion XHR complète.
Cela permet de déboguer les appels ajax. "Replay XHR" répétera toute la transmission.
entrez la description de l'image ici

John
la source
0

Il existe plusieurs façons de le faire, comme mentionné ci-dessus, mais d'après mon expérience, la meilleure façon de manipuler une demande XHR et de la renvoyer est d'utiliser les outils de développement de chrome pour copier la demande en tant que demande cURL (cliquez avec le bouton droit sur la demande dans l'onglet réseau ) et de simplement importer dans l'application Postman (bouton d'importation géant en haut à gauche).

quinlo
la source
0

Pas besoin d'installer des extensions tierces!

Il existe le javascript-snippet , que vous pouvez ajouter en tant que navigateur-bookmark puis activer sur n'importe quel site pour suivre et modifier les demandes. On dirait:

entrez la description de l'image ici

Pour plus d'informations, consultez la page github.

T.Todua
la source