वहाँ एक रास्ता है, या एक विस्तार है, जो मुझे "ट्रैफ़िक" देखने के लिए एक WebSocket के माध्यम से जा रहा है? डिबगिंग उद्देश्यों के लिए मैं ग्राहक और सर्वर अनुरोधों / प्रतिक्रियाओं को देखना चाहूंगा।
Google Chrome में WebSocket डिबग करना
जवाबों:
Chrome डेवलपर टूल में अब WebSocket फ्रेम को सूचीबद्ध करने की क्षमता है और यदि फ्रेम बाइनरी नहीं हैं तो डेटा का निरीक्षण भी करते हैं।
प्रक्रिया:
- Chrome डेवलपर टूल लॉन्च करें
- अपना पृष्ठ लोड करें और WebSocket कनेक्शन आरंभ करें
- नेटवर्क टैब पर क्लिक करें ।
- बाईं ओर की सूची से WebSocket कनेक्शन का चयन करें (इसमें "101 स्विचिंग प्रोटोकॉल" की स्थिति होगी।
- संदेश उप-टैब पर क्लिक करें । बाइनरी फ़्रेम एक लंबाई और समय-स्टैम्प के साथ दिखाई देंगे और इंगित करेंगे कि क्या वे नकाबपोश हैं। टेक्स्ट फ़्रेम दिखाएगा में पेलोड सामग्री भी शामिल होगी।
यदि आपका WebSocket कनेक्शन बाइनरी फ्रेम का उपयोग करता है तो आप संभवतः कनेक्शन को डीबग करने के लिए Wireshark का उपयोग करना चाहेंगे। Wireshark 1.8.0 ने WebSockets के लिए विच्छेदक और फ़िल्टरिंग समर्थन जोड़ा। इस अन्य उत्तर में एक विकल्प मिल सकता है ।
1
क्या आप जानते हैं कि ऐसा करने के लिए Wireshark का उपयोग कैसे करें? मैंने कभी इसका उपयोग नहीं किया है, और यह सभी नेटवर्क ट्रैफ़िक को दिखाता है, और कच्चे पैकेट दिखाता है।
—
मौलसून
आप कैप्चर फिल्टर्स का उपयोग करके कैप्चर को सिंगल पोर्ट पर प्रतिबंधित कर सकते हैं । वैकल्पिक रूप से, आपके द्वारा कैप्चर प्राप्त करने के बाद, आपको किसी कैप्चर किए गए फ़्रेम पर राइट क्लिक करने में सक्षम होना चाहिए जो सत्र का हिस्सा है और उस सत्र को दिखाने के लिए विकल्प पर चयन करें।
—
कनक
दुर्भाग्य से वायरशर्क का उपयोग विंडोज़ पर लोकलहोस्ट का उपयोग करके इसे काम करने के लिए हुप्स के माध्यम से कूदने की आवश्यकता होती है। देखें wiki.wireshark.org/CaptureSetup/Loopback
—
ग्रेग वुड्स
मैंने हाल ही में CodeProject पर एक लेख लिखा है, जो आपको दिखाता है कि फिडलर के साथ WebSocket ट्रैफ़िक को कैसे डिबग / निरीक्षण करना है। codeproject.com/Articles/718660/…
—
इंजिनफोर्स
@NiCkNewman हाँ, यह एक 7-बिट फ़ील्ड है जो पेलोड की बाइट लंबाई को दर्शाता है। हालांकि, यदि फ़ील्ड का मान 126 या 127 है, तो क्रमशः अगले 16 या 64 बिट्स बाइट्स में पेलोड की लंबाई है। युक्ति में लंबाई क्षेत्र का वर्णन देखें: tools.ietf.org/html/rfc6455#section-5.2 (यह बहुत आसान है)। यह थोड़ा अजीब है, लेकिन यह छोटे संदेशों को बहुत कुशल बनाता है (सिर्फ एक 2 बाइट हैडर)।
—
कनक
क्रोम कैनरी और क्रोमियम में अब वेबसोकेट संदेश फ्रेम निरीक्षण सुविधा है। यहाँ इसे जल्दी से परीक्षण करने के चरण दिए गए हैं:
- Websoocket Echo डेमो पर नेविगेट करें , websocket.org साइट पर होस्ट किया गया ।
- Chrome डेवलपर टूल चालू करें।
- नेटवर्क पर क्लिक करें , और देव टूल्स द्वारा दिखाए गए ट्रैफ़िक को फ़िल्टर करने के लिए, WebSockets पर क्लिक करें ।
- इको डेमो में, कनेक्ट पर क्लिक करें । Google Dev टूल में हेडर्स टैब पर आप WebSocket हैंडशेक का निरीक्षण कर सकते हैं।
- इको डेमो में सेंड बटन पर क्लिक करें।
- यह चरण महत्वपूर्ण है : नाम / पथ के तहत, क्रोम डेवलपर टूल में WebSocket फ़्रेम देखने के लिए, अपने WebSocket कनेक्शन का प्रतिनिधित्व करते हुए, echo.websocket.org प्रविष्टि पर क्लिक करें। यह दाईं ओर मुख्य पैनल को ताज़ा करता है और WebSocket फ्रेम्स टैब को वास्तविक WebSocket संदेश सामग्री के साथ दिखाता है।
ध्यान दें : हर बार जब आप नए संदेश भेजते हैं या प्राप्त करते हैं, तो आपको बाईं ओर echo.websocket.org प्रविष्टि पर क्लिक करके मुख्य पैनल को ताज़ा करना होगा।
मैंने स्क्रीन शॉट्स और वीडियो के साथ कदम भी पोस्ट किए ।
मेरी हाल ही में प्रकाशित पुस्तक, द डेफिनिटिव गाइड टू एचटीएमएल 5 वेबस्केट , में क्रोम देव टूल्स, क्रोम नेट-इंटर्नल, और वायर शार्क सहित विभिन्न निरीक्षण उपकरणों को शामिल करने के लिए एक समर्पित परिशिष्ट भी है।
कई सवालों के जवाब बायलरप्लेट / शब्दशः कॉपी करते समय सावधान रहें, ये समुदाय द्वारा "स्पैम" के रूप में चिह्नित किए जाते हैं। यदि आप ऐसा कर रहे हैं तो इसका आमतौर पर मतलब है कि प्रश्न डुप्लिकेट हैं इसलिए उन्हें इस तरह से चिह्नित करें।
—
केव
चरण 6 के लिए धन्यवाद! मैंने नेटवर्क टैब में WebSockets फ़िल्टर के बारे में जाना था, लेकिन निराश था कि यह केवल मेरे पहले कुछ संदेशों को पकड़ता था। क्या आपको पता है कि टैब खोलने से पहले आपके द्वारा खोले गए वेबसोकेट कनेक्शन से अवगत कराने का कोई तरीका है?
—
ब्रायन हेड
ब्रायन - मुझे विश्वास नहीं है कि आप आज कर सकते हैं।
—
पीटर मोस्कोविट्स
@PeterMoskovits क्या आप क्रोम में बाइनरी फ्रेम की सामग्री का निरीक्षण करने का तरीका जानते हैं? वर्तमान में मैं केवल इसकी लंबाई देख सकता हूं!
—
होवी
@ आप इसे क्रोम के साथ कैसे नहीं कर सकते। आप इसके लिए वायरशर्क का उपयोग कर सकते हैं। हमारी नई किताब, द डेफिटिटिव गाइड टू एचटीएमएल 5 वेबसॉकेट आपको वायरशार्क के लिए भी एक त्वरित परिचय देती है। amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
—
पीटर मोस्कोवित्स
वे Chrome में लगातार सामान बदलते प्रतीत होते हैं, लेकिन यहाँ अभी क्या काम करता है :-)
सबसे पहले आपको लाल रिकॉर्ड बटन पर क्लिक करना होगा या आपको कुछ नहीं मिलेगा।
मैंने
WSपहले कभी इस पर ध्यान नहीं दिया लेकिन यह वेब सॉकेट कनेक्शन को फ़िल्टर करता है।इसे चुनें और फिर आप फ़्रेम देख सकते हैं जो आपको त्रुटि संदेश आदि दिखाएगा।
मुझे पसंद नहीं है कि कैसे JSON वहाँ बदसूरत स्वरूपित है। मूल रूप से कोई स्वरूपण नहीं।
—
सेस
@ses कि सिग्नलआर प्रोटोकॉल है। इसे Microsoft 😜
—
साइमन_
कम से कम यह जवाब देखकर खुशी हुई कि चार साल बाद भी यह अच्छा है: p
—
स्टु थॉम्पसन
@StuThompson हाँ - मेरी upvotes जमा रखना :-)
—
Simon_Weaver
यदि आपके पास एक पृष्ठ नहीं है जो वेबसैट तक पहुंच रहा है, तो आप क्रोम कंसोल खोल सकते हैं और अपना जावास्क्रिप्ट टाइप कर सकते हैं:
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
यह वेब सॉकेट खोल देगा ताकि आप इसे नेटवर्क टैब और कंसोल में देख सकें।
धन्यवाद! इसके अलावा: आपके द्वारा खोला गया पृष्ठ आपके वेबस्कैट के समान मूल में होना चाहिए। यदि आप क्रोम देव उपकरण को एक अलग मूल (या यहां तक कि नया टैब पृष्ठ) पर खोलने का प्रयास करते हैं और फिर अपने वेबस्कैट से कनेक्ट करते हैं तो आपको एक प्राधिकरण त्रुटि मिलेगी।
—
दान एस्पराजा
क्या इसे ठीक करने का कोई तरीका है?
—
नॉटआउट
अन्य उत्तर सबसे आम परिदृश्य को कवर करते हैं: फ़्रेम की सामग्री को देखें (डेवलपर टूल -> नेटवर्क टैब -> वेबसोकेट कनेक्शन पर राइट क्लिक करें -> फ़्रेम)।
यदि आप कुछ और जानकारी जानना चाहते हैं, जैसे वर्तमान में कौन सी कुर्सियां खुली / निष्क्रिय हैं या उन्हें बंद करने में सक्षम हैं तो आपको यह यूआरएल उपयोगी लगेगा
chrome://net-internals/#sockets
आपके पास 3 विकल्प हैं: क्रोम (डेवलपर टूल के माध्यम से -> नेटवर्क टैब), विरेशर, और फिडलर (लॉग टैब के माध्यम से), हालांकि वे सभी बहुत ही बुनियादी हैं। यदि आपके पास बहुत अधिक मात्रा में ट्रैफ़िक है या प्रत्येक फ़्रेम बहुत बड़ा है, तो डीबगिंग के लिए उनका उपयोग करना बहुत मुश्किल हो जाता है।
हालाँकि आप FiddlerScript के साथ Fiddler का उपयोग उसी तरह से कर सकते हैं जैसे कि आप HTTP ट्रैफ़िक को निष्क्रिय करते हैं। इस समाधान के कुछ फायदे यह हैं कि आप फ़िडलर में कई अन्य कार्यात्मकताओं का लाभ उठा सकते हैं, जैसे कि कई इंस्पेक्टर (HexView, JSON, SyntaxView), पैकेट की तुलना करें, और पैकेट ढूंढें, आदि।
कृपया कोडप्रोजेक्ट पर मेरे हाल ही में लिखे गए लेख को देखें, जो आपको दिखाता है कि फिडलर (फिडलरस्क्रिप्ट के साथ) के साथ वेबसकेट ट्रैफ़िक को कैसे डिबग / इंस्पेक्ट करें। http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
मैं इसे अभी पोस्ट कर रहा हूँ क्योंकि Chrome बहुत कुछ बदल गया है, और कोई भी उत्तर अभी तक काफी नहीं था।
- देव उपकरण खोलें
- अपने पृष्ठ को फिर से पढ़ें (ताकि WS कनेक्शन नेटवर्क टैब द्वारा कैप्चर किया जाए)
- अपने अनुरोध पर क्लिक करें
- "फ्रेम्स" उप-टैब पर क्लिक करें
- आपको कुछ इस तरह देखना चाहिए:
Chrome संस्करण 29 और उसके बाद का छोटा उत्तर:
- डिबगर खोलें, टैब पर जाएं "नेटवर्क"
- लोड पेज websocket के साथ
- सर्वर से अपग्रेड प्रतिक्रिया के साथ वेबसोकेट अनुरोध पर क्लिक करें
- वेबसैट फ़्रेम देखने के लिए टैब "फ्रेम्स" का चयन करें
- फ़्रेम ताज़ा करने के लिए फिर से वेबसोकेट अनुरोध पर क्लिक करें
ऐसा लगता है कि यह काम करता है, सिवाय इसके कि यह कष्टप्रद है कि यह काम करना बंद कर देता है यदि आप वेबसैट url को डिस्कनेक्ट और फिर से कनेक्ट करते हैं (जैसे websocket.org/echo.html पर ), तो उस स्थिति में आपको पृष्ठ ताज़ा करना होगा! :(
—
मतान्तर
मैंने सरल वेबस्केट क्लाइंट v0.1.3 नामक क्रोम एक्सटेंशन का उपयोग किया है जो उपयोगकर्ता हकोबेरा द्वारा प्रकाशित किया गया है। यह इसके उपयोग में बहुत सरल है, जहां यह किसी दिए गए URL पर वेबसोकेट खोलने, संदेश भेजने और सॉकेट कनेक्शन को बंद करने की अनुमति देता है। यह बहुत न्यूनतर है।