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?


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


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.


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.


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


4

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

Untuk ekstensi Chrome Tamper sepertinya melakukan triknya.


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


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).


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.


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


Terima kasih telah membagikan ini. Sekadar info, ini masih merupakan fitur eksperimental. Anda harus mengaktifkan percobaan dengan mengikuti tautan ini: Aktifkan Fitur Eksperimental
gimp3695
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.