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

Kayce Basques

এটি একটি পেজের নেটওয়ার্ক অ্যাক্টিভিটি নিরীক্ষণের সাথে সম্পর্কিত ডেভটুলসের সর্বাধিক ব্যবহৃত কিছু ফিচারের একটি হাতে-কলমে টিউটোরিয়াল।

এর পরিবর্তে বৈশিষ্ট্যগুলো দেখতে চাইলে নেটওয়ার্ক রেফারেন্স দেখুন।

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

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

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

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

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

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

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

1. গেট স্টার্টেড ডেমোটি খুলুন।

   

   আপনি ডেমোটি একটি আলাদা উইন্ডোতে সরিয়ে নিতে পারেন।

   

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

   

   আপনি হয়তো ডেভটুলসকে আপনার উইন্ডোর নিচে ডক করতে পছন্দ করতে পারেন।

   

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

   

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

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

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

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

   

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

   প্রতিটি কলাম একটি রিসোর্স সম্পর্কিত তথ্য উপস্থাপন করে। ডিফল্ট কলামগুলো হলো:

   • অবস্থা : HTTP প্রতিক্রিয়া কোড।
   • ধরণ : সম্পদের ধরণ।
   • প্রবর্তক : ​​যার কারণে কোনো রিসোর্সের জন্য অনুরোধ করা হয়েছে। প্রবর্তক কলামের কোনো লিঙ্কে ক্লিক করলে আপনাকে সেই সোর্স কোডে নিয়ে যাওয়া হবে যা এই অনুরোধটি ঘটিয়েছে।
   • আকার : নেটওয়ার্কের মাধ্যমে স্থানান্তরিত সম্পদের পরিমাণ।
   • সময় : অনুরোধটি সম্পন্ন হতে কতক্ষণ লেগেছে।

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

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

4. নেটওয়ার্ক লগ- এর একদম নিচের অংশটি আবার দেখুন। সেখানে getstarted.json নামে একটি নতুন রিসোর্স আছে। 'Get Data' বাটনটিতে ক্লিক করার ফলে পেজটি এই ফাইলটির জন্য অনুরোধ করেছে।

   

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

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

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

   

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

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

1. থ্রটলিং ড্রপ-ডাউনটিতে ক্লিক করুন, যেটি ডিফল্টরূপে ‘নো থ্রটলিং’- এ সেট করা থাকে।

   

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

   

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

   

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

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

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

স্ক্রিনশট নিতে এই ধাপগুলো অনুসরণ করুন:

1. নেটওয়ার্ক সেটিংস -এ ক্লিক করুন।

2. স্ক্রিনশট চেকবক্সটি সক্রিয় করুন।

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

   

4. প্রথম থাম্বনেইলটিতে ক্লিক করুন। ডেভটুলস আপনাকে দেখাবে সেই মুহূর্তে কী নেটওয়ার্ক কার্যকলাপ চলছিল।

   

5. স্ক্রিনশট ট্যাবটি বন্ধ করতে স্ক্রিনশট চেকবক্সটি টগল করুন।

6. পৃষ্ঠাটি পুনরায় লোড করুন।

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

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

1. getstarted.html ক্লিক করুন। Headers ট্যাবটি প্রদর্শিত হবে। HTTP হেডারগুলো পরীক্ষা করার জন্য এই ট্যাবটি ব্যবহার করুন।

   

2. প্রাথমিক HTML রেন্ডারিং দেখতে প্রিভিউ ট্যাবে ক্লিক করুন।

   

   এই ট্যাবটি তখন সহায়ক হয় যখন কোনো API HTML-এ একটি এরর কোড রিটার্ন করে এবং HTML সোর্স কোডের চেয়ে রেন্ডার করা HTML পড়া সহজ হয়, অথবা যখন কোনো ইমেজ ইন্সপেক্ট করা হয়।

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

   

4. অনুরোধ প্রবর্তকের শৃঙ্খল নির্দেশকারী একটি ট্রি দেখতে ইনিশিয়েটর ট্যাবে ক্লিক করুন।

   

5. এই রিসোর্সের নেটওয়ার্ক কার্যকলাপের বিস্তারিত বিবরণ দেখতে টাইমিং ট্যাবে ক্লিক করুন।

   

6. নেটওয়ার্ক লগ পুনরায় দেখতে ক্লোজ বাটনে ক্লিক করুন।

   

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

যখন কোনো নির্দিষ্ট স্ট্রিং বা রেগুলার এক্সপ্রেশন খোঁজার জন্য সমস্ত রিসোর্সের HTTP হেডার এবং রেসপন্স অনুসন্ধান করার প্রয়োজন হয়, তখন সার্চ ট্যাবটি ব্যবহার করুন।

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

1. প্যানেলের অ্যাকশন বারে থাকা সার্চ (Search ) বোতামে ক্লিক করুন অথবা Command + F (macOS) বা Control + F (Windows / Linux) চাপুন।

   নেটওয়ার্ক লগ- এর বাম দিকে সার্চ ট্যাবটি খোলে।

   

2. Cache-Control টাইপ করে এন্টার চাপুন। সার্চ ট্যাবটি রিসোর্স হেডার বা কন্টেন্টে খুঁজে পাওয়া Cache-Control এর সমস্ত দৃষ্টান্তের তালিকা দেখাবে।

   

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

   

4. সার্চ ট্যাব এবং হেডার ট্যাব বন্ধ করুন।

   

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

ডেভটুলস এমন রিসোর্সগুলো ফিল্টার করে বাদ দেওয়ার জন্য অসংখ্য ওয়ার্কফ্লো প্রদান করে, যা আলোচ্য কাজের সাথে প্রাসঙ্গিক নয়।

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

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

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

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

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

   

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

   

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

   

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

   

   ফিল্টারযোগ্য প্রপার্টিগুলোর সম্পূর্ণ তালিকার জন্য ‘প্রপার্টি অনুযায়ী অনুরোধ ফিল্টার করুন’ দেখুন।

5. ফিল্টার ইনপুট বক্স থেকে সমস্ত লেখা মুছে ফেলুন।

রিসোর্স টাইপ অনুযায়ী ফিল্টার করুন

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

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

   

2. স্ক্রিপ্টগুলোও দেখতে, Control বা Command (Mac) চেপে ধরে JS-এ ক্লিক করুন।

   

3. ফিল্টারগুলো সরাতে এবং সমস্ত রিসোর্স আবার দেখতে 'All'-এ ক্লিক করুন।

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

ব্লক অনুরোধ

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

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

   

2. block টাইপ করুন, Show Request Blocking নির্বাচন করুন এবং এন্টার চাপুন।

   

3. অ্যাড প্যাটার্ন বাটনটিতে ক্লিক করুন।

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

   

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

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

   

7. ‘Enable request blocking’ চেকবক্সটি আনচেক করুন।

নেটওয়ার্ক কার্যকলাপ নিরীক্ষণ সম্পর্কিত DevTools-এর আরও বৈশিষ্ট্য জানতে, নেটওয়ার্ক রেফারেন্স দেখুন।