নেটওয়ার্ক কার্যকলাপ পরিদর্শন করুন

Kayce Basques

এটি একটি পৃষ্ঠার নেটওয়ার্ক কার্যকলাপ পরিদর্শন সম্পর্কিত সর্বাধিক ব্যবহৃত কিছু DevTools বৈশিষ্ট্যগুলির একটি হ্যান্ডস-অন টিউটোরিয়াল৷

আপনি যদি পরিবর্তে বৈশিষ্ট্যগুলি ব্রাউজ করতে চান তবে নেটওয়ার্ক রেফারেন্স দেখুন৷

পড়ুন, বা এই টিউটোরিয়ালটির ভিডিও সংস্করণ দেখুন:

কখন নেটওয়ার্ক প্যানেল ব্যবহার করবেন

সাধারণভাবে, নেটওয়ার্ক প্যানেল ব্যবহার করুন যখন আপনাকে নিশ্চিত করতে হবে যে রিসোর্স ডাউনলোড বা আপলোড হচ্ছে আশানুরূপ। নেটওয়ার্ক প্যানেলের জন্য সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে হল:

• সংস্থানগুলি আসলে আপলোড বা ডাউনলোড করা হচ্ছে কিনা তা নিশ্চিত করা।
• একটি পৃথক সম্পদের বৈশিষ্ট্যগুলি পরিদর্শন করা, যেমন তার HTTP শিরোনাম, বিষয়বস্তু, আকার ইত্যাদি।

আপনি যদি পৃষ্ঠা লোড কর্মক্ষমতা উন্নত করার উপায় খুঁজছেন, তাহলে নেটওয়ার্ক প্যানেল দিয়ে শুরু করবেন না । নেটওয়ার্ক কার্যকলাপের সাথে সম্পর্কিত নয় এমন অনেক ধরনের লোড কর্মক্ষমতা সমস্যা আছে। লাইটহাউস প্যানেল দিয়ে শুরু করুন কারণ এটি আপনাকে কীভাবে আপনার পৃষ্ঠাটি উন্নত করতে হবে তার লক্ষ্যযুক্ত পরামর্শ দেয়৷ অপ্টিমাইজ ওয়েবসাইট স্পিড দেখুন।

নেটওয়ার্ক প্যানেল খুলুন

এই টিউটোরিয়াল থেকে সর্বাধিক সুবিধা পেতে, ডেমো খুলুন এবং ডেমো পৃষ্ঠায় বৈশিষ্ট্যগুলি চেষ্টা করে দেখুন।

1. Get Started Demo খুলুন।

   

   চিত্র 1 . ডেমো

   আপনি একটি পৃথক উইন্ডোতে ডেমো সরাতে পছন্দ করতে পারেন।

   

   চিত্র ২ . ডেমো একটি উইন্ডোতে এবং এই টিউটোরিয়ালটি একটি ভিন্ন উইন্ডোতে

2. Control+Shift+J বা Command+Option+J (Mac) টিপে DevTools খুলুন । কনসোল প্যানেল খোলে।

   

   চিত্র 3 । কনসোল

   আপনি আপনার উইন্ডোর নীচে DevTools ডক করতে পছন্দ করতে পারেন।

   

   চিত্র 4 । DevTools উইন্ডোর নীচে ডক করা হয়েছে৷

3. নেটওয়ার্ক ট্যাবে ক্লিক করুন। নেটওয়ার্ক প্যানেল খোলে।

   

   চিত্র 5 । DevTools উইন্ডোর নীচে ডক করা হয়েছে৷

এই মুহূর্তে নেটওয়ার্ক প্যানেল খালি। এর কারণ হল DevTools শুধুমাত্র নেটওয়ার্ক কার্যকলাপ লগ করে যখন এটি খোলা থাকে এবং আপনি DevTools খোলার পর থেকে কোনও নেটওয়ার্ক কার্যকলাপ ঘটেনি৷

লগ নেটওয়ার্ক কার্যকলাপ

একটি পৃষ্ঠার কারণে নেটওয়ার্ক কার্যকলাপ দেখতে:

1. পৃষ্ঠাটি পুনরায় লোড করুন। নেটওয়ার্ক প্যানেল নেটওয়ার্ক লগে সমস্ত নেটওয়ার্ক কার্যকলাপ লগ করে।

   

   চিত্র 6 । নেটওয়ার্ক লগ

   নেটওয়ার্ক লগের প্রতিটি সারি একটি সম্পদ প্রতিনিধিত্ব করে। ডিফল্টরূপে সম্পদগুলি কালানুক্রমিকভাবে তালিকাভুক্ত করা হয়। শীর্ষ সম্পদ সাধারণত প্রধান HTML নথি। নীচের সংস্থান যা শেষ অনুরোধ করা হয়েছিল।

   প্রতিটি কলাম একটি সম্পদ সম্পর্কে তথ্য উপস্থাপন করে। চিত্র 6 ডিফল্ট কলাম দেখায়:

   • অবস্থা HTTP প্রতিক্রিয়া কোড.
   • টাইপ সম্পদের ধরন।
   • সূচনাকারী কি কারণে একটি সম্পদ অনুরোধ করা হয়েছে. ইনিশিয়েটর কলামের একটি লিঙ্কে ক্লিক করা আপনাকে সেই সোর্স কোডে নিয়ে যাবে যা অনুরোধটি করেছে।
   • সময় অনুরোধে কতক্ষণ লেগেছিল।

   • জলপ্রপাত । অনুরোধের বিভিন্ন পর্যায়ের একটি গ্রাফিক্যাল উপস্থাপনা। ভাঙ্গন দেখতে একটি জলপ্রপাতের উপর ঘোরাঘুরি করুন।

     দ্রষ্টব্য: নোট করুন নেটওয়ার্ক লগের উপরের গ্রাফটিকে ওভারভিউ বলা হয়। আপনি এই টিউটোরিয়ালে এটি ব্যবহার করবেন না, তাই আপনি চাইলে এটি লুকিয়ে রাখতে পারেন। [ওভারভিউ ফলকটি লুকান] দেখুন[6]।

2. যতক্ষণ পর্যন্ত আপনি DevTools খুলছেন, এটি নেটওয়ার্ক লগে নেটওয়ার্ক কার্যকলাপ রেকর্ড করবে। এটি প্রদর্শন করতে, প্রথমে নেটওয়ার্ক লগের নীচে তাকান এবং শেষ কার্যকলাপের একটি মানসিক নোট তৈরি করুন।

3. এখন, ডেমোতে Get Data বাটনে ক্লিক করুন।

4. নেটওয়ার্ক লগের নীচে আবার দেখুন। getstarted.json নামে একটি নতুন সংস্থান রয়েছে। ডেটা পান বোতামে ক্লিক করার ফলে পৃষ্ঠাটি এই ফাইলটির জন্য অনুরোধ করে।

   

   চিত্র 7 । নেটওয়ার্ক লগে একটি নতুন সম্পদ

আরো তথ্য দেখান

নেটওয়ার্ক লগের কলামগুলি কনফিগারযোগ্য। আপনি যে কলামগুলি ব্যবহার করছেন না সেগুলি লুকাতে পারেন৷ ডিফল্টরূপে লুকানো অনেক কলাম আছে যা আপনার কাজে লাগতে পারে।

1. নেটওয়ার্ক লগ টেবিলের হেডারে ডান ক্লিক করুন এবং ডোমেন নির্বাচন করুন। প্রতিটি সম্পদের ডোমেন এখন দেখানো হয়েছে।

   

   চিত্র 8 . ডোমেন কলাম সক্রিয় করা হচ্ছে

দ্রষ্টব্য: টিপ আপনি নাম কলামে একটি সম্পদের কক্ষের উপর হোভার করে তার সম্পূর্ণ URL দেখতে পারেন৷

একটি ধীর নেটওয়ার্ক সংযোগ অনুকরণ

আপনি সাইট তৈরি করতে যে কম্পিউটার ব্যবহার করেন তার নেটওয়ার্ক সংযোগ সম্ভবত আপনার ব্যবহারকারীদের মোবাইল ডিভাইসের নেটওয়ার্ক সংযোগের চেয়ে দ্রুততর। পৃষ্ঠাটি থ্রোটল করার মাধ্যমে আপনি একটি মোবাইল ডিভাইসে একটি পৃষ্ঠা লোড হতে কতক্ষণ সময় নেয় সে সম্পর্কে আরও ভাল ধারণা পেতে পারেন।

1. থ্রটলিং ড্রপডাউনে ক্লিক করুন, যা ডিফল্টরূপে অনলাইনে সেট করা আছে।

   

   চিত্র 9 । থ্রটলিং সক্ষম করা হচ্ছে

2. স্লো 3G নির্বাচন করুন।

   

   চিত্র 10 । স্লো 3G নির্বাচন করা হচ্ছে

3. রিলোড দীর্ঘক্ষণ প্রেস করুন এবং তারপরে খালি ক্যাশে এবং হার্ড রিলোড নির্বাচন করুন।

   

   চিত্র 11 । খালি ক্যাশে এবং হার্ড রিলোড

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

   দ্রষ্টব্য: নোট করুন খালি ক্যাশে এবং হার্ড রিলোড ওয়ার্কফ্লো শুধুমাত্র তখনই উপলব্ধ হয় যখন DevTools খোলা থাকে।

স্ক্রিনশট ক্যাপচার করুন

স্ক্রিনশটগুলি আপনাকে দেখতে দেয় যে একটি পৃষ্ঠা লোড হওয়ার সময় সময়ের সাথে সাথে কেমন দেখায়৷

1. ক্যাপচার স্ক্রিনশট ক্লিক করুন .

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

   

   চিত্র 12 । পৃষ্ঠা লোডের স্ক্রিনশট

3. প্রথম থাম্বনেইলে ক্লিক করুন। DevTools আপনাকে দেখায় যে সেই মুহূর্তে কোন নেটওয়ার্ক কার্যকলাপ ঘটছে।

   

   চিত্র 13 । প্রথম স্ক্রিনশটের সময় যে নেটওয়ার্ক কার্যকলাপ ঘটছিল

4. ক্যাপচার স্ক্রিনশট ক্লিক করুন আবার স্ক্রিনশট প্যান বন্ধ করতে।

5. পৃষ্ঠাটি আবার লোড করুন।

একটি সম্পদের বিবরণ পরিদর্শন করুন

এটি সম্পর্কে আরও তথ্য জানতে একটি সম্পদ ক্লিক করুন. এটা এখন চেষ্টা কর:

1. getstarted.html ক্লিক করুন। হেডার ট্যাব দেখানো হয়েছে। HTTP শিরোনাম পরিদর্শন করতে এই ট্যাব ব্যবহার করুন.

   

   চিত্র 14 । হেডার ট্যাব

2. প্রিভিউ ট্যাবে ক্লিক করুন। HTML এর একটি মৌলিক রেন্ডারিং দেখানো হয়েছে।

   

   চিত্র 15 । পূর্বরূপ ট্যাব

   এই ট্যাবটি সহায়ক যখন একটি API এইচটিএমএলে একটি ত্রুটি কোড ফেরত দেয় এবং এইচটিএমএল সোর্স কোডের চেয়ে রেন্ডার করা এইচটিএমএল পড়া সহজ, বা ছবিগুলি পরিদর্শন করার সময়।

3. প্রতিক্রিয়া ট্যাবে ক্লিক করুন। এইচটিএমএল সোর্স কোড দেখানো হয়েছে।

   

   চিত্র 16 । প্রতিক্রিয়া ট্যাব

   দ্রষ্টব্য: টিপ যখন একটি ফাইল ছোট করা হয়, বিন্যাসে ক্লিক করুন রেসপন্স ট্যাবের নীচের বোতামটি পঠনযোগ্যতার জন্য ফাইলের বিষয়বস্তু পুনরায় ফর্ম্যাট করে।

4. টাইমিং ট্যাবে ক্লিক করুন। এই সম্পদের জন্য নেটওয়ার্ক কার্যকলাপের একটি ব্রেকডাউন দেখানো হয়েছে।

   

   চিত্র 17 । টাইমিং ট্যাব

5. Close এ ক্লিক করুন নেটওয়ার্ক লগ আবার দেখতে.

   

   চিত্র 18 । ক্লোজ বোতাম

সার্চ নেটওয়ার্ক হেডার এবং প্রতিক্রিয়া

একটি নির্দিষ্ট স্ট্রিং বা নিয়মিত অভিব্যক্তির জন্য আপনাকে HTTP শিরোনাম এবং সমস্ত সংস্থানগুলির প্রতিক্রিয়া অনুসন্ধান করার প্রয়োজন হলে অনুসন্ধান ফলকটি ব্যবহার করুন৷

উদাহরণস্বরূপ, ধরুন আপনি আপনার সংস্থানগুলি যুক্তিসঙ্গত ক্যাশে নীতিগুলি ব্যবহার করছে কিনা তা পরীক্ষা করতে চান৷

1. অনুসন্ধান ক্লিক করুন . অনুসন্ধান ফলকটি নেটওয়ার্ক লগের বাম দিকে খোলে।

   

   চিত্র 19 । অনুসন্ধান ফলক

2. Cache-Control টাইপ করুন এবং এন্টার টিপুন। অনুসন্ধান ফলক Cache-Control সমস্ত দৃষ্টান্ত তালিকাভুক্ত করে যা এটি সংস্থান শিরোনাম বা সামগ্রীতে খুঁজে পায়।

   

   চিত্র 20 । Cache-Control জন্য অনুসন্ধান ফলাফল

3. এটি দেখতে একটি ফলাফল ক্লিক করুন. যদি একটি হেডারে ক্যোয়ারী পাওয়া যায়, হেডার ট্যাব খোলে। ক্যোয়ারী কন্টেন্ট পাওয়া গেলে, প্রতিক্রিয়া ট্যাব খোলে।

   

   চিত্র 21 । একটি অনুসন্ধান ফলাফল শিরোনাম ট্যাবে হাইলাইট করা হয়েছে৷

4. অনুসন্ধান ফলক এবং সময় ট্যাব বন্ধ করুন।

   

   চিত্র 22 । বন্ধ বোতাম

রিসোর্স ফিল্টার করুন

DevTools হাতে থাকা টাস্কের সাথে প্রাসঙ্গিক নয় এমন রিসোর্স ফিল্টার করার জন্য অসংখ্য ওয়ার্কফ্লো প্রদান করে।

চিত্র 23 । ফিল্টার টুলবার

ফিল্টার টুলবার ডিফল্টরূপে সক্রিয় করা উচিত। যদি না:

1. ফিল্টার ক্লিক করুন এটা দেখানোর জন্য

স্ট্রিং, রেগুলার এক্সপ্রেশন বা প্রপার্টি দ্বারা ফিল্টার করুন

ফিল্টার টেক্সট বক্স বিভিন্ন ধরনের ফিল্টারিং সমর্থন করে।

1. ফিল্টার টেক্সট বক্সে png টাইপ করুন। শুধুমাত্র যে ফাইলগুলিতে টেক্সট png আছে তা দেখানো হয়। এই ক্ষেত্রে ফিল্টারের সাথে মেলে একমাত্র ফাইলগুলি হল PNG ছবি৷

   

   চিত্র 24 । একটি স্ট্রিং ফিল্টার

2. /.*\.[cj]s+$/ টাইপ করুন। DevTools ফাইলের নাম দিয়ে যেকোনও রিসোর্স ফিল্টার করে যা j বা c দিয়ে শেষ হয় না এবং 1 বা তার বেশি s অক্ষর থাকে।

   

   চিত্র 25 । একটি নিয়মিত এক্সপ্রেশন ফিল্টার

3. টাইপ করুন -main.css । DevTools main.css ফিল্টার করে। অন্য কোনো ফাইল প্যাটার্নের সাথে মিলে গেলে সেগুলিও ফিল্টার করা হবে।

   

   চিত্র 26 । একটি নেতিবাচক ফিল্টার

4. ফিল্টার টেক্সট বক্সে domain:raw.githubusercontent.com টাইপ করুন। DevTools এই ডোমেনের সাথে মেলে না এমন URL দিয়ে যেকোনও রিসোর্স ফিল্টার করে।

   

   চিত্র 27 । একটি সম্পত্তি ফিল্টার

   ফিল্টারযোগ্য বৈশিষ্ট্যের সম্পূর্ণ তালিকার জন্য বৈশিষ্ট্য অনুসারে ফিল্টার অনুরোধগুলি দেখুন।

5. যেকোনো টেক্সটের ফিল্টার টেক্সট বক্স সাফ করুন।

রিসোর্স টাইপ দ্বারা ফিল্টার করুন

একটি নির্দিষ্ট ধরনের ফাইলে ফোকাস করতে, যেমন স্টাইলশীট:

1. CSS এ ক্লিক করুন। অন্য সব ধরনের ফাইল ফিল্টার করা হয়.

   

   চিত্র 28 । শুধুমাত্র CSS ফাইল দেখানো হচ্ছে

2. স্ক্রিপ্টগুলি দেখতে, কন্ট্রোল বা কমান্ড (ম্যাক) ধরে রাখুন এবং তারপরে JS এ ক্লিক করুন।

   

   চিত্র 29 । শুধুমাত্র CSS এবং JS ফাইল দেখানো হচ্ছে

3. ফিল্টারগুলি সরাতে এবং সমস্ত সংস্থানগুলি আবার দেখতে সমস্ত ক্লিক করুন৷

অন্যান্য ফিল্টারিং ওয়ার্কফ্লোগুলির জন্য ফিল্টার অনুরোধগুলি দেখুন।

ব্লক অনুরোধ

একটি পৃষ্ঠা কীভাবে দেখায় এবং আচরণ করে যখন এর কিছু সংস্থান উপলব্ধ না থাকে? এটি কি সম্পূর্ণরূপে ব্যর্থ হয়, বা এটি এখনও কিছুটা কার্যকরী? খোঁজার জন্য অনুরোধ ব্লক করুন:

1. কমান্ড মেনু খুলতে Control+Shift+P বা Command+Shift+P (Mac) টিপুন।

   

   চিত্র 30 । কমান্ড মেনু

2. block টাইপ করুন, শো রিকোয়েস্ট ব্লকিং নির্বাচন করুন এবং এন্টার টিপুন।

   

   চিত্র 31 । অনুরোধ ব্লকিং দেখান

3. প্যাটার্ন যোগ করুন ক্লিক করুন .

4. main.css টাইপ করুন।

   

   চিত্র 32 । main.css ব্লক করা হচ্ছে

5. যোগ করুন ক্লিক করুন.

6. পৃষ্ঠাটি পুনরায় লোড করুন। প্রত্যাশিত হিসাবে, পৃষ্ঠার স্টাইলিং সামান্য গন্ডগোল হয়েছে কারণ এর প্রধান স্টাইলশীট ব্লক করা হয়েছে। নেটওয়ার্ক লগে main.css সারিটি নোট করুন। লাল টেক্সট মানে সম্পদ ব্লক করা হয়েছে.

   

   চিত্র 33 । main.css ব্লক করা হয়েছে

7. অনুরোধ ব্লকিং সক্ষম করুন চেকবক্সটি আনচেক করুন।

পরবর্তী পদক্ষেপ

অভিনন্দন, আপনি টিউটোরিয়ালটি সম্পূর্ণ করেছেন। আপনার পুরস্কার পেতে ডিসপেন্স অ্যাওয়ার্ড ক্লিক করুন।

নেটওয়ার্ক কার্যকলাপ পরিদর্শন সম্পর্কিত আরও DevTools বৈশিষ্ট্যগুলি আবিষ্কার করতে নেটওয়ার্ক রেফারেন্স দেখুন৷