গুগল ক্রোমে ওয়েবসকেট ডিবাগ করছে

Question

এমন কোনও উপায়, বা কোনও এক্সটেনশান রয়েছে যা আমাকে "ওয়েব ট্র্যাফিক" ওয়েবস্কটে যেতে দেখায়? ডিবাগিংয়ের উদ্দেশ্যে আমি ক্লায়েন্ট এবং সার্ভারের অনুরোধ / প্রতিক্রিয়াগুলি দেখতে চাই।

Answer 1

ক্রোম বিকাশকারী সরঞ্জামগুলির মধ্যে এখন ওয়েবসকেট ফ্রেমগুলি তালিকাভুক্ত করার ক্ষমতা রয়েছে এবং ফ্রেমগুলি বাইনারি না হলে ডেটাও পরীক্ষা করতে পারে।

প্রসেস:

1. ক্রোম বিকাশকারী সরঞ্জাম চালু করুন
2. আপনার পৃষ্ঠাটি লোড করুন এবং ওয়েবস্কট সংযোগগুলি শুরু করুন
3. নেটওয়ার্ক ট্যাবে ক্লিক করুন ।
4. বাম দিকের তালিকা থেকে ওয়েবস্কট সংযোগটি নির্বাচন করুন (এটিতে "101 স্যুইচিং প্রোটোকলস" এর স্থিতি থাকবে।
5. বার্তা সাব-ট্যাবে ক্লিক করুন । বাইনারি ফ্রেমগুলি দৈর্ঘ্য এবং সময়-স্ট্যাম্পের সাথে প্রদর্শিত হবে এবং সেগুলি মুখোশযুক্ত কিনা তা নির্দেশ করবে। পাঠ্য ফ্রেমগুলিতে পেডলোড সামগ্রী অন্তর্ভুক্ত দেখানো হবে।

যদি আপনার ওয়েবসকেট সংযোগটি বাইনারি ফ্রেম ব্যবহার করে তবে আপনি সম্ভবত সংযোগটি ডিবাগ করার জন্য ওয়্যারশার্ক ব্যবহার করতে চাইবেন। ওয়্যারশার্ক 1.8.0 ওয়েবসকেটগুলির জন্য বিযুক্তকারী এবং ফিল্টারিং সমর্থন যুক্ত করেছে। এই অন্যান্য উত্তরে একটি বিকল্প পাওয়া যেতে পারে ।

Comments

আপনি কীভাবে এটি করতে ওয়্যারশার্ক ব্যবহার করবেন তা জানেন? আমি সত্যিই এটি কখনও ব্যবহার করি নি এবং এটি সমস্ত নেটওয়ার্ক ট্র্যাফিক দেখায় এবং কাঁচা প্যাকেট দেখায়।

— মেলুনসুন

আপনি ক্যাপচার ফিল্টার ব্যবহার করে একক বন্দরে ক্যাপচারকে সীমাবদ্ধ করতে পারেন । পর্যায়ক্রমে, আপনি ক্যাপচার অর্জনের পরে, আপনি অধিবেশন অংশের একটি ক্যাপচার ফ্রেমে যে কোনওটি ডান ক্লিক করতে সক্ষম হবেন এবং ঠিক সেই সেশনটি দেখানোর জন্য বিকল্পটি নির্বাচন করুন।

— কানাকা

দুর্ভাগ্যক্রমে ওয়্যারশার্ক উইন্ডোতে লোকালহোস্ট ব্যবহার করে এটির কাজ পেতে হুপের মধ্য দিয়ে ঝাঁপিয়ে পড়া দরকার। Wiki.wireshark.org/ ক্যাপচারসেটআপ

— গ্রেগ উডস

আমি সম্প্রতি কোডপ্রজেক্টে একটি নিবন্ধ লিখেছি, যা আপনাকে ফিডলারের সাথে ওয়েবস্কট ট্র্যাফিক কীভাবে ডিবাগ / পরিদর্শন করতে হবে তা দেখায়। কোডেপ্রজেক্ট

— আর্টিকেলগুলি /

@ নিক্কিনিউম্যান হ্যাঁ, এটি একটি 7-বিট ক্ষেত্র যা প্যালোডের বাইট দৈর্ঘ্য নির্দেশ করে। তবে, ক্ষেত্রের মান যদি 126 বা 127 হয়, তবে পরবর্তী 16 বা 64 বিট যথাক্রমে বাইটগুলিতে পেলোডের দৈর্ঘ্য। স্পেকের দৈর্ঘ্যের ক্ষেত্রের বিবরণ দেখুন: সরঞ্জাম. ietf.org/html/rfc6455#section-5.2 (এটি কুঁচকে যাওয়া বেশ সহজ)। এটি কিছুটা অদ্ভুত, তবে এটি সংক্ষিপ্ত বার্তাগুলিকে খুব দক্ষ করে তোলে (মাত্র একটি 2 বাইট শিরোলেখ)।

— কনক

Answer 2

ক্রোম ক্যানারি এবং ক্রোমিয়ামের এখন ওয়েবসকেট বার্তা ফ্রেম পরিদর্শন বৈশিষ্ট্য রয়েছে। এটি দ্রুত পরীক্ষা করার পদক্ষেপগুলি এখানে:

1. নেভিগেট করতে WebSocket এর ইকো ডেমো , হোস্ট websocket.org সাইট।
2. Chrome বিকাশকারী সরঞ্জামগুলি চালু করুন।
3. নেটওয়ার্ক ক্লিক করুন এবং দেব সরঞ্জামগুলির দ্বারা দেখানো ট্র্যাফিক ফিল্টার করতে ওয়েবসকেট ক্লিক করুন ।
4. ইকো ডেমোতে, সংযুক্ত ক্লিক করুন । গুগল ডেভ সরঞ্জামের শিরোনাম ট্যাবে আপনি ওয়েবস্কট হ্যান্ডশেকটি পরীক্ষা করতে পারেন।
5. ইকো ডেমোতে প্রেরণ বোতামটি ক্লিক করুন।
6. এই পদক্ষেপটি গুরুত্বপূর্ণ : নাম / পাথের অধীনে ক্রোম বিকাশকারী সরঞ্জামগুলিতে ওয়েবসকেট ফ্রেমগুলি দেখতে আপনার ওয়েবসকেট সংযোগ উপস্থাপন করে প্রতিধ্বনি.আবার। এটি ডানদিকের মূল প্যানেলটিকে রিফ্রেশ করে এবং ওয়েবস্কট ফ্রেম ট্যাবটিকে প্রকৃত ওয়েবস্কট বার্তা সামগ্রী হিসাবে প্রদর্শন করে।

দ্রষ্টব্য : আপনি যখনই নতুন বার্তা প্রেরণ বা গ্রহণ করবেন তখন বামদিকে ইকো.ওয়েবসকেট.আর্ট্রি এন্ট্রিতে ক্লিক করে আপনাকে প্রধান প্যানেলটি রিফ্রেশ করতে হবে।

আমি স্ক্রিন শট এবং ভিডিও সহ পদক্ষেপগুলি পোস্ট করেছি ।

আমার সম্প্রতি প্রকাশিত বই, ডিফিনিটিভ গাইড টু এইচটিএমএল 5 ওয়েবসকেটে , ক্রোম দেব সরঞ্জামগুলি, ক্রোম নেট-ইন্টার্নালস এবং ওয়্যার শার্ক সহ বিভিন্ন পরিদর্শন সরঞ্জামগুলিকে অন্তর্ভুক্ত একটি উত্সর্গীকৃত পরিশিষ্ট রয়েছে।

Comments

একাধিক প্রশ্নের উত্তর এবং অনুলিপি / বয়লারপ্লেট পোস্ট করার সময় সাবধানতা অবলম্বন করুন, এগুলি সম্প্রদায়ের দ্বারা "স্প্যামি" হিসাবে চিহ্নিত করা হয়। আপনি যদি এটি করছেন তবে এর অর্থ সাধারণত প্রশ্নগুলি সদৃশ হয় তাই পরিবর্তে এটিকে ফ্ল্যাগ করুন।

— কেভ

ধাপ 6 জন্য আপনাকে ধন্যবাদ! আমি নেটওয়ার্ক ট্যাবে ওয়েবসকেটস ফিল্টার সম্পর্কে জানতাম, তবে হতাশ হয়েছি যে এটি আমার প্রথম কয়েকটি বার্তা কেবল ধরা দিয়েছে। আপনি কী জানেন যে আপনি ট্যাবটি খোলার আগে খোলা একটি ওয়েবসকেট সংযোগ সম্পর্কে সচেতন করার কোনও উপায় আছে কিনা?

— ব্রায়ান হেড

ব্রায়ান - আমি বিশ্বাস করতে পারি না আপনি আজ করতে পারেন।

— পিটার মোসকোভিটস

@ পিটারমোস্কোভিটস আপনি কি ক্রোমে বাইনারি ফ্রেমের সামগ্রীগুলি পরিদর্শন করার কোনও উপায় জানেন? বর্তমানে আমি কেবল এটির দৈর্ঘ্য দেখতে পাচ্ছি!

— হাওয়ে

@ হাউই আপনি এটি ক্রোম দিয়ে করতে পারবেন না। আপনি এর জন্য ওয়্যারশার্ক ব্যবহার করতে পারেন। আমাদের নতুন বই, এইচটিএমএল 5 ওয়েবসকেটের সংজ্ঞা নির্দেশিকা আপনাকে ওয়্যারশার্ককেও একটি দ্রুত পরিচয় দেয়। অ্যামাজন

— পিটার মোসকোভিট

Answer 3

তারা ক্রোমে ক্রমাগত জিনিসগুলি পরিবর্তন করতে পারে বলে মনে হচ্ছে, তবে এই মুহুর্তে এখানে কী কার্যকর হয় তা এখানে রয়েছে :-)

• প্রথমে আপনাকে অবশ্যই রেড রেকর্ড বোতামে ক্লিক করুন বা আপনি কিছুই পাবেন না।

• আমি WSআগে কখনই লক্ষ্য করিনি তবে এটি ওয়েব সকেট সংযোগগুলি ফিল্টার করে।

• এটি নির্বাচন করুন এবং তারপরে আপনি ফ্রেমগুলি দেখতে পাবেন যা আপনাকে ত্রুটি বার্তাগুলি প্রদর্শন করবে etc.

Comments

আমি পছন্দ করি না যে কীভাবে সেখানে JSON ফর্ম্যাট হয়েছে। মূলত কোনও ফর্ম্যাটিং নেই।

— ses

@ses যে সিগন্যালআর প্রোটোকল। এটি মাইক্রোসফ্ট with

— সাইমন_উইভার

কমপক্ষে এই উত্তরটি চার বছর পরে এখনও ভাল দেখে খুশি: পি

— স্টু থম্পসন

@ স্টুথম্পসন হ্যাঁ - আমার উপন্যাসগুলি জমে আছে :-)

— সাইমন_উইভার

Answer 4

ওয়েবসকেটে অ্যাক্সেস করছে এমন কোনও পৃষ্ঠা আপনার কাছে না থাকলে আপনি Chrome কনসোলটি খুলতে পারেন এবং এতে আপনার জাভাস্ক্রিপ্ট টাইপ করতে পারেন:

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

এটি ওয়েব সকেটটি খুলবে যাতে আপনি এটি নেটওয়ার্ক ট্যাবে এবং কনসোলে দেখতে পারেন।

Comments

ধন্যবাদ! এছাড়াও: আপনার খোলার পৃষ্ঠাটি আপনার ওয়েবকেট হিসাবে একই উত্সে থাকতে হবে। আপনি যদি অন্য কোনও উত্স (বা এমনকি নতুন ট্যাব পৃষ্ঠা) -এ Chrome ডিভাইসগুলি খোলার চেষ্টা করেন এবং তারপরে আপনার ওয়েবসকেটে সংযুক্ত হন তবে আপনি অনুমোদনের ত্রুটি পাবেন।

— ড্যান এস্পারজা

এই সমাধানের জন্য একটি উপায় আছে কি?

— not2qubit

Answer 5

অন্যান্য উত্তরগুলি সর্বাধিক সাধারণ দৃশ্যের অন্তর্ভুক্ত করে: ফ্রেমগুলির সামগ্রী দেখুন (বিকাশকারী সরঞ্জাম -> নেটওয়ার্ক ট্যাব -> ওয়েবসকেট সংযোগে ডান ক্লিক করুন -> ফ্রেম) mes

যদি আপনি আরও কিছু তথ্য জানতে চান, যেমন সকেটগুলি বর্তমানে উন্মুক্ত / নিষ্ক্রিয় বা সেগুলি বন্ধ করতে সক্ষম হয় তবে আপনি এই ইউআরএলটি দরকারী দেখতে পাবেন

chrome://net-internals/#sockets

Answer 6

আপনার কাছে 3 টি বিকল্প রয়েছে: ক্রোম (বিকাশকারী সরঞ্জামগুলির মাধ্যমে -> নেটওয়ার্ক ট্যাব), ওয়্যারশার্ক এবং ফিডলার (লগ ট্যাবের মাধ্যমে), তবে এগুলি সমস্তই প্রাথমিক। আপনার যদি ট্র্যাফিকের পরিমাণ খুব বেশি থাকে বা প্রতিটি ফ্রেম খুব বড় হয় তবে ডিবাগিংয়ের জন্য এগুলি ব্যবহার করা খুব কঠিন হয়ে যায়।

আপনি এইচডিটিপি ট্র্যাফিককে যেভাবে ইনপেক্ট করেন ঠিক তেমনভাবে ওয়েবস্কট ট্র্যাফিক পরিদর্শন করতে আপনি ফিজারসপ্লিট সহ ফিডলারটি ব্যবহার করতে পারেন। এই সমাধানের কয়েকটি সুবিধা হ'ল আপনি ফিডলারের আরও অনেকগুলি কার্যকারিতা যেমন: একাধিক পরিদর্শক (হেক্সভিউ, জেএসএন, সিনট্যাক্স ভিউ), প্যাকেটগুলির তুলনা করতে এবং প্যাকেটগুলি খুঁজে পেতে পারেন le

দয়া করে কোডপ্রজেক্টে আমার সাম্প্রতিক লিখিত নিবন্ধটি দেখুন, যা আপনাকে ফিডলারের সাথে কীভাবে ওয়েবসকেট ট্র্যাফিক ডিবাগ / পরিদর্শন করতে হবে তা দেখায় (ফিডলারস্ক্রিপ্ট সহ)। http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Answer 7

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

1. দেব সরঞ্জাম খুলুন
2. আপনার পৃষ্ঠাটি রিফ্রেশ করুন (যাতে ডাব্লুএস সংযোগটি নেটওয়ার্ক ট্যাবে ধরা পড়ে)
3. আপনার অনুরোধ ক্লিক করুন
4. "ফ্রেম" উপ-ট্যাবে ক্লিক করুন
5. আপনার এইরকম কিছু দেখতে পাওয়া উচিত:

Answer 8

ক্রোম সংস্করণ 29 এবং তার জন্য সংক্ষিপ্ত উত্তর:

1. ডিবাগারটি খুলুন, "নেটওয়ার্ক" ট্যাবে যান
2. ওয়েবসকেট সহ পৃষ্ঠাটি লোড করুন
3. সার্ভার থেকে আপগ্রেড প্রতিক্রিয়া সহ ওয়েবসকেট অনুরোধে ক্লিক করুন
4. ওয়েবসকেট ফ্রেম দেখতে ট্যাব "ফ্রেম" নির্বাচন করুন
5. ফ্রেমগুলি রিফ্রেশ করার জন্য আবার ওয়েবসকেট অনুরোধে ক্লিক করুন

Comments

মনে হচ্ছে এটি কাজ করে, বিরক্তিকর বিষয় ছাড়া আপনি যদি ওয়েবসকেট ইউআরএল সংযোগ বিচ্ছিন্ন করেন এবং পুনরায় সংযোগ করেন (উদাহরণস্বরূপ ওয়েবসকেট.আর.এইচ.এইচ.টি.এম.এল ), তবে আপনাকে পৃষ্ঠাটি রিফ্রেশ করতে হবে! :(

— ম্যাটানস্টার

Answer 9

ক্রোম বিকাশকারী সরঞ্জামগুলি হ্যান্ডশেকের অনুরোধটি দেখার অনুমতি দেয় যা খোলা সংযোগের সময় মুলতুবি থাকে, তবে আপনি যতদূর জানি ট্র্যাফিক দেখতে পাচ্ছেন না। তবে আপনি উদাহরণস্বরূপ এটি স্নিগ্ধ করতে পারেন ।

Answer 10

আমি সিম্পল ওয়েবস্কট ক্লায়েন্ট v0.1.3 নামে ক্রোম এক্সটেনশন ব্যবহার করেছি যা ব্যবহারকারী হাকোবেরা প্রকাশ করেছে। এটি এর ব্যবহারে খুব সহজ যেখানে এটি কোনও প্রদত্ত ইউআরএলে ওয়েবসকেট খোলার অনুমতি দেয়, বার্তা প্রেরণ করে এবং সকেট সংযোগটি বন্ধ করে দেয়। এটি খুব সংক্ষিপ্ত।

Answer 11

আমি যে সরঞ্জামটি ব্যবহার শুরু করেছি, আমি তার পোস্টম্যানের মতো ফায়ার ক্যাম্পের পরামর্শ দিই , তবে এটি ওয়েবসকেট এবং সকেট.ওও সমর্থন করে।