Pro

مفتش WebSocket

يقوم مفتش WebSocket بالتقاط كل إطار WebSocket - المرسل والمستقبل - عبر جميع الاتصالات في الصفحة. يعرض دورة حياة الاتصال (جارٍ الاتصال/مفتوح/مغلق مع رموز الإغلاق)، واتجاه كل إطار، وحجمه، وعلم البيانات الثنائية، والمعاينة، مع عرض حمولات JSON منسقة. يسد فجوة حقيقية في أدوات المطور لتصحيح أخطاء البروتوكول في الوقت الفعلي.

إضافة إلى Chrome أضف إلى Edge إضافة إلى FireFox

تدعم WebSockets تطبيقات الدردشة، واللوحات المباشرة، واشتراكات GraphQL، والألعاب متعددة اللاعبين، والمحررات التعاونية - لكن تصحيح أخطائها مؤلم. تعرض أدوات مطور Chrome إطارات WebSocket، لكن واجهة المستخدم الخاصة بها غير مريحة والفلترة محدودة. يمنحك مفتش WebSocket عرضاً أنظف ومصمماً لهذا الغرض. تقوم الأداة بتثبيت غلاف (wrapper) حول منشئ WebSocket الأصلي في سياق الصفحة، بحيث يتم اعتراض كل WebSocket() جديد. يظهر كل اتصال في قائمة مع عنوان URL الخاص به، وحالته (جارٍ الاتصال ← مفتوح ← مغلق)، ومدة الاتصال، ورمز الإغلاق عند قطع الاتصال. يتم التقاط كل إطار - مرسل ومستقبل - مع الطابع الزمني، والاتجاه، والحجم، وعلم البيانات الثنائية، والمعاينة. اضغط على أي إطار لرؤية حمولته الكاملة، والتي يتم تنسيقها تلقائياً إذا كانت بتنسيق JSON. يمكنك التصفية حسب الاتجاه (مرسل / مستقبل)، أو الثنائي فقط، أو حسب اتصال محدد. نظراً لتثبيت الغلاف عند تنشيط الأداة، ستحتاج لإعادة تحميل الصفحة لالتقاط الاتصالات الموجودة مسبقاً - أما الاتصالات الجديدة فيتم التقاطها من لحظة فتح الأداة.

معاينة مباشرة

example.com

فاحص WebSocket ● اتصالان نشطان

الاتصالات

wss://realtime.example.com/chat مفتوح · دقيقتان

wss://graphql.example.com/subscriptions مفتوح · 8 دقائق

الكل ↑ تم الإرسال ↓ تم الاستلام ↑ 12 · ↓ 47 · 8.4 كيلوبايت

                        ↓
                        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 مع الحالة (جارٍ الاتصال/مفتوح/مغلق)، وعنوان URL، والمدة، ورمز الإغلاق، وأي سبب للإغلاق.

التقاط كل إطار

يتم عرض كل من الإطارات المرسلة (↑) والمستقبلة (↓) مع الطابع الزمني والحجم وعلم البيانات الثنائية والمعاينة المضمنة.

تنسيق JSON الجمالي

اضغط على إطار لرؤية الحموله الكاملة. يتم تنسيق سلاسل JSON تلقائياً مع مسافة بادئة بمسافتين لفحص سهل القراءة.

التصفية حسب الاتجاه / البيانات الثنائية

تصفية الإطارات للمرسلة فقط، أو المستقبلة فقط، أو الثنائية فقط - لتركز على ما تقوم بتصحيح أخطائه.

تصفية لكل اتصال

اضغط على اتصال لتصفية الإطارات الخاصة به فقط - مفيد عند وجود اتصالات WebSocket متعددة نشطة (مثل الدردشة + التواجد).

لا حاجة لإعادة التحميل للاتصالات الجديدة

يتم التقاط أي WebSocket يتم فتحه بعد تنشيط الأداة فوراً. أعد التحميل فقط لالتقاط الاتصالات التي كانت موجودة مسبقاً.

حالات الاستخدام الشائعة

تصحيح أخطاء تطبيقات الدردشة

شاهد بالضبط الرسائل المرسلة والمستقبلة بين العميل والخادم - لتحدد مكان فشل التسليم بدقة.

تصحيح أخطاء اشتراكات GraphQL

افحص عمليات الاشتراك ودفع البيانات الواردة لتصحيح أخطاء الحمولات غير المتطابقة أو أخطاء إنهاء الاشتراك.

الهندسة العكسية للبروتوكولات

افهم كيفية عمل واجهة برمجة تطبيقات (API) لجهة خارجية في الوقت الفعلي من خلال مراقبة بنية رسائلها وتوقيتها.

مراقبة نبضات القلب / بينغ بونغ

تأكد من إرسال إطارات الحفاظ على الاتصال (keep-alive) في الفاصل الزمني المتوقع - فقد يفسر فقدان 'بينغ' عمليات قطع الاتصال غير المتوقعة.

تصحيح أخطاء منطق إعادة الاتصال

راقب حدث الإغلاق (مع الرمز والسبب) ومحاولات الاتصال الجديدة اللاحقة لتصحيح أخطاء إعادة المحاولة/إعادة الاتصال.

كيفية الاستخدام

فتح مفتش WebSocket

اضغط على أيقونة WebSocket في لوحة DevSuite Pro. تنشط الأداة وتفتح لوحة تعرض الاتصالات والإطارات.

إعادة تحميل الصفحة (إذا لزم الأمر)

لن يتم التقاط WebSockets التي تم فتحها قبل تنشيط الأداة. أعد التحميل لإعادة إنشائها واعتراضها من البداية.

مراقبة ظهور الاتصالات

بمجرد أن تفتح الصفحة WebSockets، ستظهر في قائمة 'الاتصالات' مع تحديثات الحالة المباشرة.

تصفح الإطارات

يتم تسجيل كل إطار في الوقت الفعلي. قم بالتصفية حسب الاتجاه أو اضغط على اتصال لتضييق القائمة.

الضغط على الإطارات للتفاصيل

اضغط على أي إطار لرؤية حمولته الكاملة (JSON منسق إذا كان متاحاً) بالإضافة إلى الطابع الزمني والحجم وعلم البيانات الثنائية.