การแก้ไขข้อบกพร่อง WebSocket ใน Google Chrome

มีวิธีหรือส่วนขยายที่ให้ฉันดู "ปริมาณการใช้งาน" ผ่าน WebSocket หรือไม่? สำหรับจุดประสงค์ในการดีบั๊กฉันต้องการดูคำขอและการตอบกลับของไคลเอ็นต์และเซิร์ฟเวอร์

ขณะนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome มีความสามารถในการแสดงรายการเฟรม WebSocket และตรวจสอบข้อมูลหากเฟรมไม่ใช่ไบนารี

กระบวนการ:

1. เปิดเครื่องมือ Chrome Developer
2. โหลดหน้าของคุณและเริ่มการเชื่อมต่อ WebSocket
3. คลิกที่แท็บเครือข่าย
4. เลือกการเชื่อมต่อ WebSocketจากรายการทางด้านซ้าย (จะมีสถานะของ "101 Switching Protocols"
5. คลิกแท็บย่อยข้อความ กรอบไบนารีจะปรากฏขึ้นพร้อมกับความยาวและการประทับเวลาและระบุว่ามีการปิดบังหรือไม่ กรอบข้อความจะแสดงรวมถึงเนื้อหาที่บรรจุไว้ด้วย

หากการเชื่อมต่อ WebSocket ของคุณใช้ไบนารีเฟรมคุณอาจจะยังคงต้องการใช้ Wireshark เพื่อดีบักการเชื่อมต่อ Wireshark 1.8.0เพิ่มตัวคัดแยกและการรองรับตัวกรองสำหรับ WebSockets อาจมีทางเลือกอื่นในคำตอบอื่น ๆนี้

Chrome Canary และ Chromium มีคุณสมบัติตรวจสอบกรอบข้อความ WebSocket แล้ว นี่คือขั้นตอนในการทดสอบอย่างรวดเร็ว:

1. ไปที่การสาธิต WebSocket Echoโฮสต์บนเว็บไซต์websocket.org
2. เปิดเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome
3. คลิกเครือข่ายและการกรองการจราจรที่แสดงโดยเครื่องมือ Dev คลิกWebSockets
4. ในการสาธิต Echo คลิกConnect บนแท็บส่วนหัวใน Google Dev Tool คุณสามารถตรวจสอบการจับมือ WebSocket
5. คลิกปุ่มส่งในการสาธิต Echo
6. ขั้นตอนนี้สำคัญ : หากต้องการดูเฟรม WebSocket ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ภายใต้ชื่อ / เส้นทางให้คลิกรายการ echo.websocket.org ซึ่งแสดงถึงการเชื่อมต่อ WebSocket ของคุณ สิ่งนี้จะรีเฟรชพาเนลหลักทางด้านขวาและทำให้แท็บ WebSocket เฟรมปรากฏขึ้นพร้อมกับเนื้อหาข้อความ WebSocket จริง

หมายเหตุ : ทุกครั้งที่คุณส่งหรือรับข้อความใหม่คุณต้องรีเฟรชแผงหลักโดยคลิกที่รายการ echo.websocket.org ทางด้านซ้าย

ฉันยังโพสต์ขั้นตอนมีภาพหน้าจอและวิดีโอ

หนังสือที่ตีพิมพ์เมื่อเร็ว ๆ นี้ของฉันThe Definitive Guide to HTML5 WebSocketยังมีภาคผนวกเฉพาะสำหรับเครื่องมือตรวจสอบต่าง ๆ รวมถึง Chrome Dev Tools, Chrome net-internals และ Wire Shark

ดูเหมือนว่าพวกเขาจะเปลี่ยนสิ่งต่าง ๆ ใน Chrome อย่างต่อเนื่อง แต่นี่คือสิ่งที่ใช้ได้ทันที :-)

• ก่อนอื่นคุณต้องคลิกที่ปุ่มบันทึกสีแดงไม่เช่นนั้นคุณจะไม่ได้อะไรเลย

• ฉันไม่เคยสังเกตWSมาก่อน แต่มันกรองการเชื่อมต่อเว็บซ็อกเก็ต

• เลือกจากนั้นคุณจะเห็นเฟรมที่จะแสดงข้อความผิดพลาดเป็นต้น

หากคุณไม่มีหน้าเว็บที่เข้าถึง websocket คุณสามารถเปิดคอนโซล Chrome และพิมพ์ JavaScript ของคุณใน:

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

สิ่งนี้จะเปิดเว็บซ็อกเก็ตเพื่อให้คุณสามารถดูได้ในแท็บเครือข่ายและในคอนโซล

คำตอบอื่น ๆ ครอบคลุมสถานการณ์ที่พบบ่อยที่สุด: ดูเนื้อหาของเฟรม (เครื่องมือสำหรับนักพัฒนา -> แท็บเครือข่าย -> คลิกขวาที่การเชื่อมต่อ websocket -> เฟรม)

หากคุณต้องการทราบข้อมูลเพิ่มเติมเช่นซ็อกเก็ตใดที่เปิดอยู่ / ไม่ได้ใช้งานหรือสามารถปิดได้คุณจะพบว่า url นี้มีประโยชน์

chrome://net-internals/#sockets

คุณมี 3 ตัวเลือก: Chrome (ผ่านเครื่องมือสำหรับนักพัฒนา -> แท็บเครือข่าย), Wireshark และ Fiddler (ผ่านแท็บบันทึก) อย่างไรก็ตามทั้งหมดนี้เป็นพื้นฐานขั้นพื้นฐาน หากคุณมีปริมาณการรับส่งข้อมูลสูงหรือแต่ละเฟรมมีขนาดใหญ่มากจะเป็นการยากที่จะใช้เพื่อแก้ไขข้อบกพร่อง

อย่างไรก็ตามคุณสามารถใช้ Fiddler กับ FiddlerScript เพื่อตรวจสอบปริมาณการใช้งาน WebSocket ในลักษณะเดียวกับที่คุณทำกับการรับส่งข้อมูล HTTP ข้อดีของการแก้ปัญหานี้คือคุณสามารถใช้ประโยชน์จากฟังก์ชั่นอื่น ๆ อีกมากมายใน Fiddler เช่นผู้ตรวจสอบหลายคน (HexView, JSON, SyntaxView) เปรียบเทียบแพ็กเก็ตและค้นหาแพ็คเก็ต ฯลฯ

โปรดอ้างอิงถึงบทความที่เขียนเมื่อเร็ว ๆ นี้ของฉันเกี่ยวกับ CodeProject ซึ่งแสดงวิธีการดีบัก / ตรวจสอบปริมาณการใช้งาน WebSocket ด้วย Fiddler (พร้อม FiddlerScript) http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

ฉันเพิ่งโพสต์สิ่งนี้เนื่องจาก Chrome มีการเปลี่ยนแปลงมากมายและไม่มีคำตอบใดที่ทันสมัย

1. เปิดเครื่องมือ dev
2. รีเฟรชหน้าของคุณ (เพื่อให้การเชื่อมต่อ WS ถูกจับโดยแท็บเครือข่าย)
3. คลิกที่คำขอของคุณ
4. คลิกแท็บย่อย "Frames"
5. คุณควรเห็นบางสิ่งเช่นนี้:

คำตอบสั้น ๆ สำหรับ Chrome เวอร์ชั่น 29 ขึ้นไป:

1. เปิดดีบักเกอร์ไปที่แท็บ "เครือข่าย"
2. โหลดหน้าด้วย websocket
3. คลิกที่คำขอ websocket พร้อมการตอบสนองการอัพเกรดจากเซิร์ฟเวอร์
4. เลือกแท็บ "Frames" เพื่อดู websocket frames
5. คลิกที่คำขอ websocket อีกครั้งเพื่อรีเฟรชเฟรม

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome อนุญาตให้เห็นคำขอจับมือซึ่งยังคงค้างอยู่ในระหว่างการเชื่อมต่อที่เปิด แต่คุณไม่สามารถเห็นปริมาณการใช้งานเท่าที่ฉันรู้ อย่างไรก็ตามคุณสามารถสูดดมตัวอย่างเช่น

ฉันใช้ส่วนขยายของ Chrome ชื่อSimple WebSocket Client v0.1.3ซึ่งเผยแพร่โดยผู้ใช้ hakobera มันง่ายมากในการใช้งานที่ช่วยให้เปิด websockets บน URL ที่กำหนดส่งข้อความและปิดการเชื่อมต่อซ็อกเก็ต มันเรียบง่ายมาก

สำหรับเครื่องมือที่ฉันเริ่มใช้ฉันแนะนำfirecampเหมือน Postman แต่ก็รองรับ websockets และ socket.io