Pro

WebSocket Inspector

WebSocket Inspector ช่วยดักจับทุก Frame ของ WebSocket ทั้งขาไปและขากลับ ในทุกการเชื่อมต่อบนหน้าเว็บ แสดงวงจรชีวิตของการเชื่อมต่อ (Connecting/Open/Closed พร้อมรหัสการปิด), ทิศทางของแต่ละ Frame, ขนาด, แฟลก Binary และพรีวิว พร้อมจัดรูปแบบ JSON ให้สวยงาม (Pretty-printed) ช่วยเติมเต็มส่วนที่ขาดหายไปของ DevTools สำหรับการดีบั๊กโปรโตคอลแบบเรียลไทม์

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox

WebSocket เป็นขุมพลังเบื้องหลังแอปแชท, แดชบอร์ดแบบสด, GraphQL Subscription, เกมมัลติเพลเยอร์ และเครื่องมือแก้ไขงานร่วมกัน — แต่การดีบั๊กสิ่งเหล่านี้เป็นเรื่องยากมาก แม้ Chrome DevTools จะแสดง WebSocket Frame ได้ แต่ UI นั้นใช้งานยากและมีตัวกรองจำกัด WebSocket Inspector จึงถูกสร้างขึ้นเพื่อให้มุมมองที่สะอาดตาและตรงจุดประสงค์การใช้งาน เครื่องมือจะทำการติดตั้ง Wrapper ครอบทับตัวสร้าง (Constructor) ของ WebSocket มาตรฐานในบริบทของหน้าเว็บ ทำให้ทุกคำสั่ง new WebSocket() ถูกดักจับได้ ทุกการเชื่อมต่อจะแสดงในรายการพร้อม URL, สถานะ (Connecting → Open → Closed), ระยะเวลา และรหัสการปิดเมื่อตัดการเชื่อมต่อ ทุก Frame ทั้งส่งออกและรับเข้าจะถูกบันทึกพร้อมประทับเวลา, ทิศทาง, ขนาด, แฟลก Binary และพรีวิว คลิกที่ Frame ใดก็ได้เพื่อดูเนื้อหาทั้งหมด ซึ่งจะถูกจัดรูปแบบ JSON ให้สวยงามโดยอัตโนมัติ สามารถกรองตามทิศทาง (Sent / Received), กรองเฉพาะ Binary หรือกรองเฉพาะการเชื่อมต่อที่เจาะจง เนื่องจาก Wrapper จะติดตั้งเมื่อเครื่องมือเริ่มทำงาน คุณอาจต้องโหลดหน้าเว็บใหม่เพื่อดักจับการเชื่อมต่อที่มีอยู่ก่อนหน้า — ส่วนการเชื่อมต่อใหม่จะถูกดักจับได้ทันทีตั้งแต่วินาทีที่คุณเปิดเครื่องมือ

ตัวอย่างสด

example.com

ตัวตรวจสอบ WebSocket ● 2 การเชื่อมต่อที่ใช้งานอยู่

การเชื่อมต่อ

wss://realtime.example.com/chat เปิด · 2 นาที

wss://graphql.example.com/subscriptions เปิด · 8 นาที

ทั้งหมด ↑ ส่ง ↓ รับ ↑ 12 · ↓ 47 · 8.4 KB

                        ↓
                        14:32:05
                        
                        {"type":"connection_ack"}
                        28 B
                    

                        ↑
                        14:32:05
                        
                        {"type":"subscribe","id":"1","payload":...}
                        98 B
                    

                        ↓
                        14:32:06
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        412 B
                    

                        ↓
                        14:32:07
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        398 B
                    

                        ↓
                        14:32:14
                        BIN
                        [ArrayBuffer 1024 bytes]
                        1.0 KB
                    

                        ↓
                        14:32:15
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        389 B
                    

คุณสมบัติหลัก

วงจรชีวิตแยกตามการเชื่อมต่อ

แสดงทุก WebSocket พร้อมสถานะ (Connecting/Open/Closed), URL, ระยะเวลา, รหัสการปิด และสาเหตุการปิด

ดักจับได้ครบทุก Frame

แสดงทั้ง Frame ขาส่ง (↑) และขารับ (↓) พร้อมประทับเวลา, ขนาด, แฟลก Binary และพรีวิวในตัว

จัดรูปแบบ JSON ให้สวยงาม

คลิกที่ Frame เพื่อดูเนื้อหาทั้งหมด สตริง JSON จะถูกจัดรูปแบบอัตโนมัติด้วยการเว้นวรรค 2 ช่องเพื่อให้ตรวจสอบได้ง่าย

กรองตามทิศทาง / Binary

กรอง Frame ให้เหลือเฉพาะขาส่ง, ขารับ หรือเฉพาะ Binary — เพื่อโฟกัสในจุดที่คุณกำลังดีบั๊ก

กรองแยกตามการเชื่อมต่อ

คลิกที่การเชื่อมต่อเพื่อกรองดูเฉพาะ Frame ของการเชื่อมต่อยอดนั้น — มีประโยชน์เมื่อมีการทำงานของ WebSocket หลายตัวพร้อมกัน (เช่น แชท + ระบบเช็คสถานะออนไลน์)

ไม่ต้องโหลดใหม่สำหรับการเชื่อมต่อใหม่

WebSocket ใดๆ ที่เปิดหลังจากเปิดใช้งานเครื่องมือจะถูกดักจับทันที โหลดหน้าเว็บใหม่เฉพาะเมื่อต้องการดักจับตัวที่มีอยู่ก่อนหน้า

กรณีการใช้งานทั่วไป

การดีบั๊กแอปแชท

ดูข้อความที่ส่งและรับระหว่าง Client และ Server ได้อย่างแม่นยำ — ระบุจุดที่การส่งข้อความล้มเหลว

การดีบั๊ก GraphQL Subscription

ตรวจสอบการทำงานของ Subscription และข้อมูลที่ส่งเข้ามาเพื่อดีบั๊กเนื้อหาที่ไม่ตรงกันหรือบั๊กการยกเลิก Subscription

การแกะรอยโปรโตคอล (Reverse-Engineering)

ทำความเข้าใจการทำงานของ Realtime API ภายนอก โดยสังเกตจากโครงสร้างข้อความและลำดับเวลา

การเฝ้าดู Heartbeat / Ping-Pong

ตรวจสอบว่า Keep-alive Frame ถูกส่งตามช่วงเวลาที่กำหนดหรือไม่ — การพลาด Ping อาจอธิบายสาเหตุการหลุดของการเชื่อมต่อที่คาดไม่ถึงได้

การดีบั๊กตรรกะการเชื่อมต่อใหม่

เฝ้าดูเหตุการณ์การปิดการเชื่อมต่อ (พร้อมรหัสและสาเหตุ) และความพยายามเชื่อมต่อใหม่ที่ตามมาเพื่อดีบั๊ก Retry/Reconnect

วิธีใช้งาน

เปิดเครื่องมือ WebSocket Inspector

คลิกไอคอน WebSocket ใน DevSuite Pro dock เครื่องมือจะเริ่มทำงานและแสดงแผงควบคุมการเชื่อมต่อและ Frame

โหลดหน้าเว็บใหม่ (ถ้าจำเป็น)

WebSocket ที่เปิดก่อนที่เครื่องมือจะเริ่มทำงานจะไม่ถูกดักจับ ให้โหลดหน้าเว็บใหม่เพื่อสร้างการเชื่อมต่อใหม่และดักจับตั้งแต่เริ่มต้น

เฝ้าดูการเชื่อมต่อที่ปรากฏ

เมื่อหน้าเว็บเปิด WebSocket รายการจะปรากฏใน Connections list พร้อมอัปเดตสถานะแบบสดๆ

เรียกดู Frame

ทุก Frame จะถูกบันทึกแบบเรียลไทม์ กรองตามทิศทางหรือคลิกที่การเชื่อมต่อเพื่อจำกัดรายการให้แคบลง

คลิกที่ Frame เพื่อดูรายละเอียด

คลิกที่ Frame ใดก็ได้เพื่อดูเนื้อหาทั้งหมด (จัดรูปแบบ JSON หากทำได้) พร้อมประทับเวลา, ขนาด และแฟลก Binary