Bagaimana saya bisa men-debug POST HTTP di Chrome?

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?

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!

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

Diuji dengan Chrome Versi 53.

Anda dapat menggunakan Chrome versi Canary untuk melihat permintaan muatan permintaan POST.

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:

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 .

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)