Debugging WebSocket di Google Chrome

Apakah ada cara, atau ekstensi, yang memungkinkan saya menonton "traffic" melalui WebSocket? Untuk keperluan debugging, saya ingin melihat permintaan / tanggapan klien dan server.

Alat pengembang Chrome sekarang memiliki kemampuan untuk membuat daftar frame WebSocket dan juga memeriksa data jika frame tersebut bukan biner.

Proses:

1. Luncurkan alat Pengembang Chrome
2. Muat halaman Anda dan mulai koneksi WebSocket
3. Klik Tab Jaringan .
4. Pilih koneksi WebSocket dari daftar di sebelah kiri (itu akan memiliki status "101 Protokol Switching".
5. Klik sub-tab Pesan . Bingkai biner akan muncul dengan panjang dan cap waktu dan menunjukkan apakah mereka bertopeng. Bingkai teks akan menunjukkan juga termasuk konten payload.

Jika koneksi WebSocket Anda menggunakan frame biner maka Anda mungkin masih ingin menggunakan Wireshark untuk men-debug koneksi. Wireshark 1.8.0 menambahkan dukungan dissector dan filtering untuk WebSockets. Alternatif dapat ditemukan dalam jawaban lain ini .

Chrome Canary dan Chromium sekarang memiliki fitur inspeksi bingkai pesan WebSocket. Berikut langkah-langkah untuk mengujinya dengan cepat:

1. Navigasikan ke demo WebSocket Echo , yang dihosting di situs websocket.org .
2. Nyalakan Alat Pengembang Chrome.
3. Klik Jaringan , dan untuk menyaring lalu lintas yang ditunjukkan oleh Alat Bantu, klik WebSockets .
4. Dalam demo Echo, klik Hubungkan . Pada tab Tajuk di Alat Google Dev Anda dapat memeriksa jabat tangan WebSocket.
5. Klik tombol Kirim di demo Echo.
6. LANGKAH INI PENTING : Untuk melihat bingkai WebSocket di Alat Pengembang Chrome, di bawah Nama / Jalur, klik entri echo.websocket.org, mewakili koneksi WebSocket Anda. Ini menyegarkan panel utama di sebelah kanan dan membuat tab WebSocket Frames muncul dengan konten pesan WebSocket yang sebenarnya.

Catatan : Setiap kali Anda mengirim atau menerima pesan baru, Anda harus menyegarkan panel utama dengan mengeklik entri echo.websocket.org di sebelah kiri.

Saya juga memposting langkah - langkah dengan tangkapan layar dan video .

Buku saya yang baru-baru ini diterbitkan, The Definitive Guide to HTML5 WebSocket , juga memiliki lampiran khusus yang membahas berbagai alat inspeksi, termasuk Alat Dev Chrome, internal internet Chrome, dan Wire Shark.

Mereka tampaknya terus mengubah hal-hal di Chrome, tapi inilah yang bekerja sekarang :-)

• Pertama, Anda harus mengklik tombol rekam merah atau Anda tidak akan mendapatkan apa-apa.

• Saya tidak pernah memperhatikan WSsebelumnya tetapi menyaring koneksi soket web.

• Pilih dan kemudian Anda dapat melihat bingkai yang akan menampilkan pesan kesalahan kepada Anda, dll.

Jika Anda tidak memiliki halaman yang mengakses websocket, Anda dapat membuka konsol Chrome dan mengetikkan JavaScript di:

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

Ini akan membuka soket web sehingga Anda dapat melihatnya di tab jaringan dan di konsol.

Jawaban lain mencakup skenario yang paling umum: tonton konten frame (Developer Tools -> Network tab -> Klik kanan pada koneksi websocket -> frames).

Jika Anda ingin mengetahui lebih banyak informasi, seperti soket mana yang saat ini terbuka / idle atau dapat menutupnya, Anda akan menemukan url ini berguna

chrome://net-internals/#sockets

Anda memiliki 3 opsi: Chrome (melalui Alat Pengembang -> tab Jaringan), Wireshark, dan Fiddler (melalui tab Log), namun semuanya sangat mendasar. Jika Anda memiliki volume lalu lintas yang sangat tinggi atau setiap bingkai sangat besar, menjadi sangat sulit untuk menggunakannya untuk debugging.

Namun Anda dapat menggunakan Fiddler dengan FiddlerScript untuk memeriksa lalu lintas WebSocket dengan cara yang sama seperti Anda menghargai lalu lintas HTTP. Beberapa keuntungan dari solusi ini adalah Anda dapat memanfaatkan banyak fungsi lain di Fiddler, seperti beberapa inspektur (HexView, JSON, SyntaxView), membandingkan paket, dan menemukan paket, dll.

Silakan merujuk ke artikel saya yang baru-baru ini ditulis pada CodeProject, yang menunjukkan kepada Anda bagaimana Debug / Memeriksa lalu lintas WebSocket dengan Fiddler (dengan FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Saya hanya memposting ini karena Chrome banyak berubah, dan tidak ada jawaban yang cukup terbaru.

1. Alat dev terbuka
2. REFRESH HALAMAN ANDA (sehingga koneksi WS ditangkap oleh tab jaringan)
3. Klik permintaan Anda
4. Klik subtab "Bingkai"
5. Anda akan melihat sesuatu seperti ini:

Jawaban singkat untuk Chrome Versi 29 dan lebih tinggi:

1. Buka debugger, buka tab "Jaringan"
2. Muat halaman dengan websocket
3. Klik pada permintaan websocket dengan respons pemutakhiran dari server
4. Pilih tab "Frame" untuk melihat bingkai websocket
5. Klik pada permintaan websocket lagi untuk menyegarkan bingkai

Alat pengembang Chrome memungkinkan untuk melihat permintaan jabat tangan yang tetap tertunda selama koneksi dibuka, tetapi Anda tidak dapat melihat lalu lintas sejauh yang saya tahu. Namun Anda bisa mengendusnya misalnya.

Saya telah menggunakan ekstensi Chrome yang disebut Simple WebSocket Client v0.1.3 yang diterbitkan oleh pengguna hakobera. Ini sangat sederhana dalam penggunaannya di mana ia memungkinkan membuka websockets pada URL yang diberikan, mengirim pesan dan menutup koneksi soket. Ini sangat minimalis.

Adapun alat yang saya mulai gunakan, saya sarankan firecamp Ini seperti Postman, tetapi juga mendukung websockets dan socket.io.