Pro

بازرس WebSocket

WebSocket Inspector هر فریم WebSocket — ارسالی و دریافتی — را در تمام اتصالات صفحه ثبت می‌کند. چرخه حیات اتصال (connecting/open/closed همراه با کدهای بستن)، جهت هر فریم، اندازه، پرچم باینری و پیش‌نمایش را با payload‌های JSON زیبا‌چاپ‌شده نشان می‌دهد. یک خلأ واقعی در DevTools برای دیباگ پروتکل‌های زمان واقعی را پر می‌کند.

افزودن به Chrome افزودن به Edge افزودن به FireFox

WebSocketها موتور محرک اپلیکیشن‌های چت، داشبوردهای زنده، اشتراک‌های GraphQL، بازی‌های چندنفره و ویرایشگرهای مشارکتی هستند — اما دیباگ کردن آن‌ها دردسرساز است. Chrome DevTools فریم‌های WebSocket را نشان می‌دهد، اما رابط کاربری آن دست‌وپاگیر و فیلترینگ آن محدود است. WebSocket Inspector نمایی تمیزتر و اختصاصی به شما می‌دهد. ابزار یک wrapper دور سازنده بومی WebSocket در context صفحه نصب می‌کند، بنابراین هر new WebSocket() رهگیری می‌شود. هر اتصال با URL، وضعیت (connecting ← open ← closed)، مدت زمان و کد بستن هنگام قطع، در یک فهرست ظاهر می‌شود. هر فریم — ارسالی و دریافتی — با زمان‌مهر، جهت، اندازه، پرچم باینری و پیش‌نمایش ثبت می‌شود. روی هر فریم کلیک کنید تا payload کامل آن را ببینید، در صورت JSON بودن به‌طور خودکار زیبا‌چاپ می‌شود. بر اساس جهت (ارسالی / دریافتی)، فقط باینری، یا بر اساس اتصال خاص فیلتر کنید. از آنجا که wrapper هنگام فعال شدن ابزار نصب می‌شود، باید صفحه را برای ثبت اتصالات موجود بازخوانی کنید — اتصالات جدید از لحظه باز کردن ابزار ثبت می‌شوند.

پیش‌نمایش زنده

example.com

بازرسی‌کننده WebSocket ● 2 اتصال فعال

اتصالات

wss://realtime.example.com/chat باز · 2m

wss://graphql.example.com/subscriptions باز · 8m

همه ↑ ارسال شده ↓ دریافت ↑ 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، مدت زمان، کد بستن و هر دلیل بستن نشان می‌دهد.

ثبت هر فریم

هر دو فریم ارسالی (↑) و دریافتی (↓) با زمان‌مهر، اندازه، پرچم باینری و پیش‌نمایش درون‌خطی نمایش داده می‌شوند.

زیبا‌چاپ JSON

روی یک فریم کلیک کنید تا payload کامل را ببینید. رشته‌های JSON به‌طور خودکار با تورفتگی 2 فاصله برای بازرسی خواناتر فرمت‌بندی می‌شوند.

فیلتر بر اساس جهت / باینری

فریم‌ها را فقط به ارسالی، فقط دریافتی، یا فقط باینری فیلتر کنید — روی چیزی که دیباگ می‌کنید تمرکز کنید.

فیلترینگ هر اتصال

روی یک اتصال کلیک کنید تا فریم‌ها فقط به همان محدود شوند — مفید وقتی چند WebSocket فعال هستند (مثلاً چت + حضور آنلاین).

بدون نیاز به بازخوانی برای اتصالات جدید

هر WebSocket که پس از فعال شدن ابزار باز شود، بلافاصله ثبت می‌شود. بازخوانی فقط برای ثبت اتصالات از قبل موجود لازم است.

موارد استفاده رایج

دیباگ اپلیکیشن‌های چت

دقیقاً ببینید چه پیام‌هایی بین کلاینت و سرور ارسال و دریافت می‌شود — محل شکست تحویل پیام را پیدا کنید.

دیباگ اشتراک‌های GraphQL

عملیات اشتراک و پوش‌های داده ورودی را بازرسی کنید تا payloadهای نامنطبق یا باگ‌های تخریب اشتراک را دیباگ کنید.

مهندسی معکوس پروتکل

با مشاهده ساختار پیام و زمان‌بندی آن، نحوه کار یک API زمان واقعی شخص ثالث را بفهمید.

پایش Heartbeat / Ping-Pong

بررسی کنید که فریم‌های keep-alive در بازه زمانی مورد انتظار ارسال می‌شوند — یک ping ازدست‌رفته می‌تواند قطعی‌های غیرمنتظره را توضیح دهد.

دیباگ منطق اتصال مجدد

رویداد close (همراه با کد و دلیل) و تلاش‌های اتصال جدید پس از آن را مشاهده کنید تا باگ‌های retry/reconnect را دیباگ کنید.

نحوه استفاده

باز کردن WebSocket Inspector

روی آیکون WebSocket در داک DevSuite Pro کلیک کنید. ابزار فعال می‌شود و پنلی نمایان می‌شود که اتصالات و فریم‌ها را نشان می‌دهد.

بازخوانی صفحه (در صورت نیاز)

WebSocketهایی که پیش از فعال شدن ابزار باز شده‌اند ثبت نمی‌شوند. صفحه را بازخوانی کنید تا دوباره ساخته شوند و از ابتدا رهگیری شوند.

مشاهده ظاهر شدن اتصالات

همان‌طور که صفحه WebSocketها را باز می‌کند، در فهرست Connections با به‌روزرسانی‌های زنده وضعیت نمایش داده می‌شوند.

مرور فریم‌ها

هر فریم در زمان واقعی ثبت می‌شود. بر اساس جهت فیلتر کنید یا روی یک اتصال کلیک کنید تا فهرست را محدود کنید.

کلیک روی فریم‌ها برای جزئیات

روی هر فریم کلیک کنید تا payload کامل آن را (در صورت JSON بودن زیبا‌چاپ‌شده) همراه با زمان‌مهر، اندازه و پرچم باینری ببینید.