Pro

WebSocket Inspector

WebSocket Inspector পেজের সব কানেকশন জুড়ে পাঠানো ও গ্রহণ করা প্রতিটি WebSocket ফ্রেম ক্যাপচার করে। এটি কানেকশন লাইফসাইকেল (connecting/open/closed, ক্লোজ কোডসহ), প্রতি ফ্রেমের দিক, সাইজ, বাইনারি ফ্ল্যাগ, ও প্রিভিউ দেখায়, প্রেটি-প্রিন্টেড JSON পেলোডসহ। রিয়েলটাইম প্রোটোকল ডিবাগিংয়ের জন্য একটি আসল DevTools ফাঁক পূরণ করে।

Chrome-এ যোগ করুন Edge এ যোগ করুন FireFox-এ যোগ করুন

WebSocket চ্যাট অ্যাপ, লাইভ ড্যাশবোর্ড, GraphQL সাবস্ক্রিপশন, মাল্টিপ্লেয়ার গেম, এবং কোলাবোরেটিভ এডিটরকে শক্তি জোগায় — কিন্তু এগুলো ডিবাগ করা কষ্টসাধ্য। Chrome DevTools WebSocket ফ্রেম দেখায়, কিন্তু এর UI অগোছালো ও ফিল্টারিং সীমিত। WebSocket Inspector আপনাকে একটি পরিষ্কার, উদ্দেশ্য-নির্মিত ভিউ দেয়। টুলটি পেজ কনটেক্সটে নেটিভ WebSocket কনস্ট্রাক্টরের চারপাশে একটি র‍্যাপার ইনস্টল করে, ফলে প্রতিটি new WebSocket() ইন্টারসেপ্ট হয়। প্রতিটি কানেকশন তার URL, স্ট্যাটাস (connecting → open → closed), সময়কাল, এবং ডিসকানেক্ট হলে ক্লোজ কোডসহ একটি তালিকায় দেখা যায়। প্রতিটি ফ্রেম — পাঠানো ও গ্রহণ করা — টাইমস্ট্যাম্প, দিক, সাইজ, বাইনারি ফ্ল্যাগ, ও প্রিভিউসহ ক্যাপচার হয়। কোনো ফ্রেমে ক্লিক করলে এর পুরো পেলোড দেখা যায়, JSON হলে স্বয়ংক্রিয়ভাবে প্রেটি-প্রিন্ট হয়। দিক (পাঠানো / গ্রহণ করা), শুধু-বাইনারি, বা নির্দিষ্ট কানেকশন অনুযায়ী ফিল্টার করুন। যেহেতু র‍্যাপারটি টুল অ্যাক্টিভেট হলে ইনস্টল হয়, বিদ্যমান কানেকশন ধরতে পেজ রিলোড করতে হবে — টুল খোলার মুহূর্ত থেকে নতুন কানেকশন ক্যাপচার হতে থাকে।

লাইভ প্রিভিউ

example.com

WebSocket ইনস্পেক্টর ● 2 active connections

Connections

wss://realtime.example.com/chat open · 2m

wss://graphql.example.com/subscriptions open · 8m

All ↑ Sent ↓ Recv ↑ 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
                    

মূল বৈশিষ্ট্য

প্রতি-কানেকশন লাইফসাইকেল

স্ট্যাটাস (connecting/open/closed), URL, সময়কাল, ক্লোজ কোড, এবং যেকোনো ক্লোজ রিজনসহ প্রতিটি WebSocket দেখায়।

প্রতিটি ফ্রেম ক্যাপচার হয়

টাইমস্ট্যাম্প, সাইজ, বাইনারি ফ্ল্যাগ, ও ইনলাইন প্রিভিউসহ পাঠানো (↑) ও গ্রহণ করা (↓) উভয় ফ্রেম দেখানো হয়।

JSON প্রেটি-প্রিন্টিং

পুরো পেলোড দেখতে একটি ফ্রেমে ক্লিক করুন। পাঠযোগ্য ইনস্পেকশনের জন্য JSON স্ট্রিং ২-স্পেস ইনডেন্টে স্বয়ংক্রিয়ভাবে ফরম্যাট হয়।

দিক / বাইনারি অনুযায়ী ফিল্টার

ফ্রেম শুধু পাঠানো, শুধু গ্রহণ করা, বা শুধু বাইনারিতে ফিল্টার করুন — যা ডিবাগ করছেন তাতে ফোকাস করুন।

প্রতি-কানেকশন ফিল্টারিং

একটি কানেকশনে ক্লিক করে ফ্রেমগুলো শুধু সেটিতে ফিল্টার করুন — একাধিক WebSocket অ্যাক্টিভ থাকলে (যেমন চ্যাট + প্রেজেন্স) কাজে লাগে।

নতুন কানেকশনের জন্য রিলোড লাগে না

টুল অ্যাক্টিভেট হওয়ার পর খোলা যেকোনো WebSocket তৎক্ষণাৎ ক্যাপচার হয়। শুধু আগে থেকে থাকা কানেকশন ধরতে রিলোড করুন।

সাধারণ ব্যবহারের ক্ষেত্র

চ্যাট অ্যাপ ডিবাগিং

ক্লায়েন্ট ও সার্ভারের মধ্যে ঠিক কোন মেসেজ পাঠানো ও গ্রহণ করা হচ্ছে তা দেখুন — ডেলিভারি কোথায় ব্যর্থ হচ্ছে তা চিহ্নিত করুন।

GraphQL সাবস্ক্রিপশন ডিবাগিং

মিসম্যাচড পেলোড বা সাবস্ক্রিপশন টিয়ারডাউন বাগ ডিবাগ করতে সাবস্ক্রিপশন অপারেশন ও আগত ডেটা পুশ ইনস্পেক্ট করুন।

প্রোটোকল রিভার্স-ইঞ্জিনিয়ারিং

একটি থার্ড-পার্টি রিয়েলটাইম API কীভাবে কাজ করে তা তার মেসেজ স্ট্রাকচার ও টাইমিং পর্যবেক্ষণ করে বুঝুন।

হার্টবিট / পিং-পং মনিটরিং

প্রত্যাশিত ইন্টারভালে কিপ-অ্যালাইভ ফ্রেম পাঠানো হচ্ছে কিনা যাচাই করুন — একটি মিস হওয়া পিং অপ্রত্যাশিত ডিসকানেক্ট ব্যাখ্যা করতে পারে।

রিকানেকশন লজিক ডিবাগিং

রিট্রাই/রিকানেক্ট বাগ ডিবাগ করতে ক্লোজ ইভেন্ট (কোড ও রিজনসহ) এবং পরবর্তী নতুন কানেকশন চেষ্টা লক্ষ্য করুন।

কিভাবে ব্যবহার করবেন

WebSocket Inspector খুলুন

DevSuite Pro ডকে WebSocket আইকনে ক্লিক করুন। টুলটি অ্যাক্টিভেট হয় এবং কানেকশন ও ফ্রেম দেখানো একটি প্যানেল খোলে।

পেজ রিলোড করুন (প্রয়োজনে)

টুল অ্যাক্টিভেট হওয়ার আগে খোলা WebSocket ক্যাপচার হবে না। এগুলো পুনরায় তৈরি করতে এবং শুরু থেকে ইন্টারসেপ্ট করতে রিলোড করুন।

কানেকশন দেখা যাওয়া লক্ষ্য করুন

পেজ WebSocket খুললে, সেগুলো লাইভ স্ট্যাটাস আপডেটসহ Connections তালিকায় দেখা যাবে।

ফ্রেম ব্রাউজ করুন

প্রতিটি ফ্রেম রিয়েল টাইমে লগ হয়। দিক অনুযায়ী ফিল্টার করুন অথবা তালিকা সংকুচিত করতে একটি কানেকশনে ক্লিক করুন।

বিস্তারিত জানতে ফ্রেমে ক্লিক করুন

টাইমস্ট্যাম্প, সাইজ, ও বাইনারি ফ্ল্যাগসহ পুরো পেলোড (প্রযোজ্য হলে প্রেটি-প্রিন্টেড JSON) দেখতে যেকোনো ফ্রেমে ক্লিক করুন।