Debugging WebSocket di Google Chrome

213

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

mellowsoon
sumber

Jawaban:

250

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 .

kanaka
sumber
1
Apakah Anda tahu cara menggunakan Wireshark untuk melakukan ini? Saya tidak pernah benar-benar menggunakannya, dan tampaknya menunjukkan semua lalu lintas jaringan, dan menunjukkan paket mentah.
mellowsoon
2
Anda dapat membatasi penangkapan ke satu port menggunakan filter ambil . Bergantian, setelah Anda mendapatkan tangkapan, Anda harus dapat mengklik kanan pada frame yang diambil yang merupakan bagian dari sesi dan memilih opsi untuk menunjukkan hanya sesi itu.
kanaka
1
Sayangnya menggunakan WireShark menggunakan localhost di windows membutuhkan melompat melalui lingkaran untuk membuatnya berfungsi. Lihat wiki.wireshark.org/CaptureSetup/Loopback
Greg Woods
2
Saya baru-baru ini menulis sebuah artikel tentang CodeProject, yang menunjukkan kepada Anda bagaimana men-debug / memeriksa lalu lintas WebSocket dengan Fiddler. codeproject.com/Articles/718660/...
engineforce
1
@NiCkNewman ya, ini adalah bidang 7-bit yang mengindikasikan panjang byte dari muatan. Namun, jika nilai bidang adalah 126 atau 127, maka 16 atau 64 bit berikutnya masing-masing adalah panjang payload dalam byte. Lihat deskripsi bidang panjang di spec: tools.ietf.org/html/rfc6455#section-5.2 (cukup mudah untuk grok). Agak aneh, tetapi membuat pesan pendek sangat efisien (hanya header 2 byte).
kanaka
72

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.

Peter Moskovits
sumber
3
Hati-hati saat memposting salin dan tempel jawaban boilerplate / kata demi kata untuk beberapa pertanyaan, ini cenderung ditandai sebagai "spam" oleh komunitas. Jika Anda melakukan ini, biasanya itu berarti pertanyaannya adalah duplikat, jadi tandai saja.
Kev
2
Terima kasih untuk langkah 6! Saya sudah tahu tentang filter WebSockets di tab Network, tetapi merasa frustrasi karena sepertinya hanya menangkap beberapa pesan pertama saya. Apakah Anda tahu jika ada cara untuk membuatnya sadar akan koneksi websocket yang terbuka sebelum Anda membuka tab?
Kepala Bryan
Bryan - Saya tidak percaya Anda bisa hari ini.
Peter Moskovits
@PeterMoskovits Apakah Anda, mungkin, mengetahui cara memeriksa konten bingkai biner di Chrome? Saat ini saya hanya bisa melihat panjangnya!
Howie
@ Howie Anda tidak dapat melakukannya dengan Chrome. Anda dapat menggunakan WireShark untuk itu. Buku baru kami, The Definitive Guide to HTML5 WebSocket juga memberi Anda pengenalan cepat ke WireShark. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
Peter Moskovits
52

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.

masukkan deskripsi gambar di sini

Simon_Weaver
sumber
Saya tidak suka bagaimana JSON itu diformat dengan jelek di sana. Tidak ada pemformatan pada dasarnya.
ses
1
@ses itu protokol signalR. Mengambil dengan Microsoft 😜
Simon_Weaver
1
senang melihat setidaknya jawaban ini masih bagus empat tahun kemudian: p
Stu Thompson
1
@StuThompson ya - upvotes saya terus terakumulasi :-)
Simon_Weaver
41

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.

Dylan
sumber
Terima kasih! Juga: Halaman yang Anda buka harus sama asalnya dengan websocket Anda. Jika Anda mencoba untuk membuka alat dev Chrome pada asal yang berbeda (atau bahkan halaman tab baru) dan kemudian terhubung ke websocket Anda, Anda akan mendapatkan kesalahan otorisasi.
Dan Esparza
Apakah ada cara untuk memperbaikinya?
not2qubit
37

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
Riccardo Galli
sumber
10

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.Periksa lalu lintas WebSocket

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

tenaga mesin
sumber
5

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:

masukkan deskripsi gambar di sini

iuliu.net
sumber
4

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
Ban
sumber
1
Tampaknya ini berfungsi, kecuali bahwa itu menjengkelkan karena berhenti berfungsi jika Anda melepaskan dan menyambung kembali ke url websocket (misalnya di websocket.org/echo.html ), dalam hal ini Anda harus menyegarkan halaman! :(
matanster
3

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.

yojimbo87
sumber
2

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.

DPancs
sumber
2

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

InsOp
sumber