XHR Chrome / Firefox usw. bearbeiten und wiedergeben?

143

Ich habe nach einer Möglichkeit gesucht, eine in meinem Browser gestellte XHR-Anforderung zu ändern und sie dann erneut abzuspielen. Angenommen, ich habe eine vollständige POST-Anfrage in meinem Browser ausgeführt. Das einzige, was ich ändern möchte, ist ein kleiner Wert, und ich spiele ihn dann erneut ab. Dies wäre viel einfacher und schneller direkt im Browser.

Ich habe ein bisschen googelt und in Chrome oder Firefox keinen Weg gefunden, dies zu tun. Gibt es eine Möglichkeit, dies in einem dieser Browser oder in einem anderen zu tun?

Madsobel
quelle
Wenn Sie hier landen, nachdem Sie festgestellt haben, dass "Replay XHR" in Chrome nicht funktioniert, beachten Sie, dass Sie in Fällen mit preflight ( OPTIONS) -Anforderungen bei der Preflight- Anforderung auf "Wiedergabe" klicken müssen - nicht bei der eigentlichen endgültigen Anforderung.
Janaka Bandara

Antworten:

179

Chrom :

  • Klicken Sie im Netzwerkfenster von devtools mit der rechten Maustaste und wählen Sie Als cURL kopieren
  • Fügen Sie die Anforderung ein / bearbeiten Sie sie und senden Sie sie dann von einem Terminal aus, vorausgesetzt, Sie haben den curlBefehl

Siehe Erfassung:

Geben Sie hier die Bildbeschreibung ein

Alternativ und falls Sie die Anfrage im Kontext einer Webseite senden müssen , wählen Sie "Als Abruf kopieren" und bearbeiten und senden Sie den Inhalt über das Javascript-Konsolenfenster.


Feuerfuchs :

Mit Firefox können Sie XHR direkt im Netzwerkfenster bearbeiten und erneut senden. Die folgende Aufnahme stammt von Firefox 36:

Geben Sie hier die Bildbeschreibung ein

Michael P. Bazos
quelle
Dies könnte tatsächlich das sein, wonach ich suche. Ich wusste, dass ich den cURL-Aufruf kopieren konnte, aber ich konnte das nicht direkt von meinem Terminal aus ausführen, da ich authentifiziert werden würde. Da das Terminal jedoch direkt in Chorme integriert ist, würde ich davon ausgehen, dass der Anruf "innerhalb" des Browsers erfolgt. Wenn ja, dann sollte dies den Deal besiegeln.
Madsobel
14
Ich habe Informationen über Firefox in der Antwort hinzugefügt
Michael P. Bazos
Kleiner Trick: Wenn Sie die cURL-Ausgabe im Browser sehen möchten, führen Sie sie wie folgt in der CLI aus curl ... > preview.htmlund öffnen Sie die Datei im Browser.
Afilina
@afilina um diesen Prozess noch weiter zu automatisieren, können Sie && open preview.htmlauf macOS hinzufügen und die Datei wird direkt nach der Anfrage
geöffnet
2
In diesem Fall macht Firefox bei weitem einen viel besseren Job!
Jpenna
41

Chrome hat jetzt Kopieren als Abrufen in Version 67:

Als Abruf kopieren

Klicken Sie mit der rechten Maustaste auf eine Netzwerkanforderung und wählen Sie Kopieren> Als Abrufen kopieren, um den entsprechenden fetch()Code für diese Anforderung in Ihre Zwischenablage zu kopieren .

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

Beispielausgabe:

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"
});

Der Unterschied besteht darin, dass Copy as cURL auch alle Anforderungsheader (wie Cookie und Accept) enthält und für die Wiedergabe der Anforderung außerhalb von Chrome geeignet ist. Der fetch()Code eignet sich für die Wiedergabe im selben Browser.

Josh Lee
quelle
6
Danke dafür. Für alle anderen, die sich fragen: Sie können den fetchBefehl einfach direkt in die Chrome-Konsole einfügen und die Anforderung erneut abspielen.
Eric Kigathi
7
Sie können das Folgende nach dem Abrufen verwenden, um das vom Abrufen zurückgegebene Versprechen aufzulösen und den Antworttext anzuzeigen (vorausgesetzt, es ist JSON).then(r => r.json()).then(json => console.log(json))
POSIX-konform am
1
@ Josh Lee, ich denke, die Tipps von POSIX-konform waren gut und können zu dieser Antwort hinzugefügt werden.
Nabi KAZ
@ POSIX-konform gute Tipps, Gibt es einen kleineren Befehl, den ich im Kopf behalten kann?!
Nabi KAZ
Für diejenigen, die sich fragen, wo sie den
Abrufcode
20

Meine zwei Vorschläge:

  1. Chrome's Postman Plugin + das Postman Interceptor Plugin . Weitere Informationen: Postman Capturing Requests Docs

  2. Wenn Sie unter Windows arbeiten, ist Teleriks Fiddler eine Option. Es verfügt über eine Composer-Option zum Wiedergeben von http-Anforderungen und ist kostenlos.

zszep
quelle
8
Seit ich Postman +, die Interceptor-Chrome-Erweiterung, verwende, brauche ich Fiddler nicht mehr.
Threadster
3
FYI Postman App für Chrome ist jetzt veraltet und das Einrichten in der Standalone-Version ist etwas schwieriger
yefrem
Vielen Dank genau das, wonach ich gesucht habe!
Mohammad
15

Aktualisieren / Vervollständigen der Zszep-Antwort :

Nachdem Sie die Anfrage als cUrl (bash) kopiert haben, importieren Sie sie einfach in die Postman App :

Geben Sie hier die Bildbeschreibung ein

jgpATs2w
quelle
4

Für Firefox hat sich das Problem von selbst gelöst. Es ist die Funktion "Bearbeiten und erneut senden" implementiert.

Für Chrome Tamper scheint die Erweiterung den Trick zu tun.

Jari Turkia
quelle
Welches nicht mehr aktualisiert wird und eher schlechte Bewertungen hat. Die beste Alternative ist die Verwendung von Firefox für diese Art von Arbeit imo.
T3rm1
Ja. Die Situation für das erneute Senden scheint sich recht schnell zu ändern. Jetzt verfügt Chrome über Resend-for-XHR-Anforderungen, die jedoch nicht bearbeitet werden können.
Jari Turkia
Achten Sie auf Firefox Version 76, das beim Bearbeiten und erneuten Senden Probleme mit dem CSRF-Token in Cookies zu haben scheint. Versucht mit Version 37 hat es gut funktioniert, aber mit Version 76 hat CSRF-Token-Validierungsproblem.
Puppyceceyoyo
0

Es gibt einige Möglichkeiten, dies zu tun, wie oben erwähnt. Meiner Erfahrung nach besteht die beste Möglichkeit, eine XHR-Anforderung zu bearbeiten und erneut zu senden, darin, Chrome Dev-Tools zu verwenden, um die Anforderung als cURL-Anforderung zu kopieren (klicken Sie mit der rechten Maustaste auf die Anforderung auf der Registerkarte Netzwerk ) und einfach in die Postman-App zu importieren (riesige Importschaltfläche oben links).

Quinlo
quelle
0

5 Jahre sind vergangen und diese wesentliche Anforderung wurde von den Chrome-Entwicklern nicht ignoriert.
Sie bieten zwar keine Methode zum Bearbeiten der Daten wie in Firefox, bieten jedoch eine vollständige XHR-Wiedergabe.
Dies ermöglicht das Debuggen von Ajax-Aufrufen. "Replay XHR" wiederholt die gesamte Übertragung.
Geben Sie hier die Bildbeschreibung ein

John
quelle
0

Es müssen keine Erweiterungen von Drittanbietern installiert werden!

Es gibt das Javascript-Snippet , das Sie als Browser-Lesezeichen hinzufügen und dann auf jeder Site aktivieren können, um die Anforderungen zu verfolgen und zu ändern. Es sieht aus wie:

Geben Sie hier die Bildbeschreibung ein

Weitere Anweisungen finden Sie auf der Github-Seite.

T.Todua
quelle