Edit dan putar ulang XHR chrome / firefox dll?

152

Saya telah mencari cara untuk mengubah permintaan XHR yang dibuat di browser saya dan kemudian memutar ulang lagi. Katakanlah saya memiliki permintaan POST lengkap yang dilakukan di browser saya, dan satu-satunya hal yang ingin saya ubah adalah nilai kecil dan kemudian memutarnya lagi. Ini akan jauh lebih mudah dan lebih cepat untuk dilakukan langsung di browser.

Saya sudah menggunakan Google sedikit, dan belum menemukan cara untuk melakukan ini di Chrome atau Firefox. Adakah cara untuk melakukannya di salah satu browser tersebut, atau mungkin di browser lain?

madsobel.dll
sumber
Jika Anda tiba di sini setelah menyadari bahwa "Putar Ulang XHR" tidak berfungsi di Chrome, perhatikan bahwa dalam kasus dengan OPTIONSpermintaan preflight ( ), Anda perlu mengeklik 'putar ulang' pada permintaan preflight - bukan permintaan terakhir yang sebenarnya.
Bandara Janaka

Jawaban:

197

Chrome:

  • Di panel Jaringan alat pengembang, klik kanan dan pilih Salin sebagai cURL
  • Tempel / Edit permintaan, lalu kirim dari terminal, dengan asumsi Anda memiliki curlperintah

Lihat tangkapan:

masukkan deskripsi gambar di sini

Atau, dan jika Anda perlu mengirim permintaan dalam konteks laman web , pilih "Salin sebagai pengambilan" dan edit-kirim konten dari panel konsol javascript.


Firefox:

Firefox memungkinkan untuk mengedit dan mengirim ulang XHR langsung dari panel Jaringan. Tangkapan di bawah ini dari Firefox 36:

masukkan deskripsi gambar di sini

Michael P. Bazos
sumber
2
Ini mungkin yang sebenarnya saya cari. Saya tahu bahwa saya dapat menyalin panggilan cURL, tetapi saya tidak dapat menjalankannya dari terminal saya secara langsung karena saya akan mendapatkan otentikasi. Tapi dengan terminal dibangun langsung ke Chorme, saya berasumsi bahwa panggilan dibuat dari "dalam" browser. Jika demikian, maka ini harus menutup kesepakatan.
madsobel
15
Saya menambahkan info tentang Firefox di jawabannya
Michael P. Bazos
Trik kecil: jika Anda ingin melihat output cURL di browser, jalankan di CLI seperti ini curl ... > preview.htmllalu buka file di browser.
afilina
@afilina untuk lebih mengotomatiskan proses ini, Anda dapat menambahkan && open preview.htmldi macOS dan file terbuka langsung setelah permintaan
CodeBrauer
3
Dalam hal ini, Firefox melakukan pekerjaan yang jauh lebih baik sejauh ini!
jpenna
49

Chrome sekarang memiliki Salin sebagai pengambilan di versi 67:

Salin sebagai pengambilan

Klik kanan permintaan jaringan, lalu pilih Salin> Salin Sebagaifetch() Pengambilan untuk menyalin kode yang setara untuk permintaan tersebut ke papan klip Anda.

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

Output sampel:

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

Perbedaannya adalah bahwa Salin sebagai cURL juga akan menyertakan semua header permintaan (seperti Cookie dan Terima) dan cocok untuk memutar ulang permintaan di luar Chrome. The fetch()kode cocok untuk mengulang dalam browser yang sama.

Josh Lee
sumber
11
Terima kasih untuk ini. Bagi orang lain yang bertanya-tanya - Anda cukup menempelkan fetchperintah langsung di konsol Chrome dan memutar ulang permintaan.
Eric Kigathi
9
Anda dapat menggunakan yang berikut ini setelah pengambilan untuk menyelesaikan janji yang dikembalikan dengan mengambil dan melihat isi respons (dengan asumsi JSON).then(r => r.json()).then(json => console.log(json))
sesuai dengan POSIX
1
@Josh Lee, menurut saya tips yang sesuai dengan POSIX bagus dan dapat ditambahkan ke jawaban ini.
Nabi KAZ
@ Tip bagus yang sesuai dengan POSIX, Apakah ada perintah yang lebih kecil yang dapat saya ingat ?!
Nabi KAZ
Bagi mereka yang bertanya-tanya di mana harus menempelkan kode pengambilan: tempel dan modifikasi di konsol
dotista2008
22

Dua saran saya:

  1. Plugin Chrome's Postman + Plugin Postman Interceptor . Info Lebih Lanjut: Pengambilan Pos Permintaan Docs

  2. Jika Anda menggunakan Windows maka Telerik's Fiddler adalah pilihan. Ini memiliki opsi komposer untuk memutar ulang permintaan http, dan gratis.

zszep
sumber
8
Sejak saya mulai menggunakan Postman + ekstensi chrome Interceptor, saya tidak membutuhkan Fiddler.
threadster
3
Aplikasi FYI Postman untuk Chrome sekarang sudah tidak digunakan lagi dan menyiapkannya dalam versi mandiri sedikit lebih sulit
yefrem
18

Memperbarui / menyelesaikan jawaban zszep :

Setelah menyalin permintaan sebagai cUrl (bash), cukup impor di App Postman :

masukkan deskripsi gambar di sini

jgpATs2w
sumber
4

Untuk Firefox, masalahnya teratasi sendiri. Ini memiliki fitur "Edit dan Kirim Ulang" yang diterapkan.

Untuk ekstensi Chrome Tamper sepertinya melakukan triknya.

Jari Turkia
sumber
Yang tidak diperbarui lagi dan memiliki ulasan yang agak buruk. Alternatif terbaik adalah menggunakan Firefox untuk jenis pekerjaan ini.
T3rm1
Ya. Situasi untuk pengiriman ulang tampaknya berubah cukup cepat. Sekarang Chrome memiliki permintaan Kirim Ulang untuk XHR, tetapi tidak mengizinkan pengeditan.
Jari Turkia
Waspadalah terhadap Firefox ver.76 yang tampaknya bermasalah dengan token CSRF di cookie saat Edit dan Kirim Ulang. Mencoba dengan ver 37 itu bekerja dengan baik, tetapi dengan ver76 memiliki masalah validasi token CSRF.
puppyceceyoyo
2

5 tahun telah berlalu dan persyaratan penting ini tidak diabaikan oleh pengembang Chrome.
Meskipun mereka tidak menawarkan metode untuk mengedit data seperti di Firefox, mereka menawarkan replay XHR lengkap.
Ini memungkinkan untuk men-debug panggilan ajax. "Replay XHR" akan mengulangi seluruh transmisi.
masukkan deskripsi gambar di sini

John
sumber
0

Ada beberapa cara untuk melakukan ini, seperti yang disebutkan di atas, tetapi menurut pengalaman saya, cara terbaik untuk memanipulasi permintaan XHR dan mengirim ulang adalah dengan menggunakan alat dev chrome untuk menyalin permintaan sebagai permintaan cURL (klik kanan pada permintaan di tab jaringan ) dan untuk mengimpor ke aplikasi Postman (tombol impor raksasa di kiri atas).

quinlo
sumber
0

Tidak perlu memasang ekstensi pihak ketiga!

Terdapat javascript-snippet , yang dapat Anda tambahkan sebagai browser-bookmark dan kemudian aktifkan di situs manapun untuk melacak & mengubah permintaan. Sepertinya:

masukkan deskripsi gambar di sini

Untuk instruksi lebih lanjut, tinjau halaman github.

T.Todua
sumber
0

Edge berbasis Microsoft Chromium mendukung permintaan "Edit dan Putar Ulang" di Tab Jaringan sebagai fitur eksperimental:

masukkan deskripsi gambar di sini

Detail lebih lanjut tentang fitur dan cara mengaktifkannya dapat ditemukan di sini

Arik
sumber
Terima kasih telah membagikan ini. Sekadar info, ini masih merupakan fitur eksperimental. Anda harus mengaktifkan percobaan dengan mengikuti tautan ini: Aktifkan Fitur Eksperimental
gimp3695