Bagaimana saya bisa men-debug POST HTTP di Chrome?


196

Saya ingin melihat data HTTP POST yang dikirim di Chrome.

Data ada di memori sekarang, dan saya memiliki kemampuan untuk mengirim ulang formulir.

Saya tahu bahwa jika saya mengirim kembali server akan melakukan kesalahan, Apakah ada yang bisa saya lihat data yang ada di memori Chrome?


Ada contoh video-giff yang bagus tentang cara ge ke tab jaringan di sini: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress
WPZA

Jawaban:


232
  1. Buka Alat Pengembang Chrome (Menu Chrome -> Alat Lainnya -> Alat Pengembang)
  2. Pilih tab "Jaringan"
  3. Perbarui halaman tempat Anda berada
  4. Anda akan mendapatkan daftar kueri http yang terjadi, saat konsol jaringan menyala. Pilih salah satu dari mereka di sebelah kiri
  5. Pilih tab "Tajuk"

Voila!

masukkan deskripsi gambar di sini


74
Ini GET, bukan POST
QkiZ

7
Ia menangkap permintaan GET dan POST, @QkiZ
almulo

48
Catatan: Untuk benar-benar melihat permintaan posting yang memuat ulang halaman Anda, Anda perlu memeriksa "Simpan Log".
Bryce Guinta

39
Saya melewatkan badan permintaan di sini? :-(
Timo

3
Di Chrome 71, badan (mis. Data POST-ed) muncul di bagian bawah tab Header di bawah tajuk "Minta Payload".
MSC

138

Anda dapat memfilter permintaan HTTP POST dengan Chrome DevTools . Lakukan saja yang berikut ini:

  1. Buka Chrome DevTools ( Cmd+ Opt+ Idi Mac, Ctrl+ Shift+ Iatau F12di Windows) dan klik pada tab "Jaringan"
  2. Klik pada ikon "Filter"
  3. Masukkan metode filter Anda: method:POST
  4. Pilih permintaan yang ingin Anda debug
  5. Lihat detail permintaan yang ingin Anda debug

Tangkapan layar

Chrome DevTools

Diuji dengan Chrome Versi 53.


1
Bekerja pada Chrome 70. Pemfilteran method:POSTsangat berguna
user1071847


5

Opsi lain yang mungkin berguna adalah alat debugging HTTP khusus. Ada beberapa yang tersedia, saya sarankan HTTP Toolkit : proyek open-source yang telah saya kerjakan (ya, saya mungkin bias) untuk memecahkan masalah yang sama untuk diri saya sendiri.

Perbedaan utama adalah kegunaan & kekuatan. Alat-alat pengembang Chrome baik untuk hal-hal sederhana, dan saya sarankan mulai di sana, tetapi jika Anda berjuang untuk memahami informasi di sana, dan Anda memerlukan penjelasan lebih banyak atau lebih banyak kekuatan maka alat fokus yang tepat dapat berguna!

Untuk kasus ini, ia akan menunjukkan kepada Anda seluruh badan POST yang Anda cari, dengan editor yang ramah dan highlight (semua didukung oleh VS Code ) sehingga Anda dapat menggali. Tentu saja itu akan memberi Anda header permintaan & respons, tetapi dengan info tambahan seperti dokumen dari MDN ( Mozilla Developer Network) ) untuk setiap header standar dan kode status yang dapat Anda lihat.

Sebuah gambar bernilai seribu jawaban StackOverflow:

Tangkapan layar HTTP Toolkit yang menunjukkan permintaan POST dan tubuhnya


1
Terlihat sangat menjanjikan, tetapi ada beberapa masalah di komputer saya, mempostingnya di GitHub.
userlond

0

Orang lain membuat jawaban yang sangat bagus, tetapi saya ingin menyelesaikan pekerjaan mereka dengan alat pengembangan tambahan. Ini disebut Header HTTP Langsung dan Anda dapat menginstalnya ke Firefox Anda , dan di Chrome kami memiliki plug-in yang sama seperti ini .

Bekerja dengannya sangat mudah.

  1. Menggunakan Firefox Anda, navigasikan ke situs web yang Anda inginkan untuk mendapatkan permintaan posting Anda.

  2. Dalam menu Firefox Anda Alat-> Header Http Langsung

  3. Sebuah jendela baru muncul untuk Anda, dan semua detail metode http akan disimpan di jendela ini untuk Anda. Anda tidak perlu melakukan apa pun di langkah ini.

  4. Di situs web, lakukan aktivitas (masuk, kirimkan formulir, dll.)

  5. Lihatlah jendela plug in Anda. Itu semua direkam.

Hanya ingat Anda perlu memeriksa dengan Tangkap .

masukkan deskripsi gambar di sini


0

Ini memiliki situasi yang rumit: Jika Anda mengirim formulir posting, maka Chrome akan membuka tab baru untuk mengirim permintaan. Itu benar sampai sekarang, tetapi jika memicu suatu acara untuk mengunduh file , tab ini akan segera ditutup sehingga Anda tidak dapat menangkap permintaan ini di Perangkat Dev.

Solusi: Sebelum mengirimkan formulir posting, Anda harus memutus jaringan Anda , yang membuat permintaan tidak dapat mengirim dengan sukses sehingga tab tidak akan ditutup. Dan kemudian Anda dapat menangkap pesan permintaan di Chrome Devtool (Menyegarkan tab baru jika perlu)

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.