পেজ লোড বিশ্লেষণ করতে এবং নেটওয়ার্ক রিসোর্স পরিদর্শন করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন।
সংক্ষিপ্ত বিবরণ
নেটওয়ার্ক প্যানেল আপনাকে নিম্নলিখিত সুবিধাগুলো দেয়:
- নেটওয়ার্ক কার্যকলাপ রেকর্ড করুন
- নেটওয়ার্ক অনুরোধগুলি পরিদর্শন করুন
- নেটওয়ার্ক অনুরোধগুলি ফিল্টার এবং সাজান
- নেটওয়ার্ক হেডার এবং প্রতিক্রিয়া অনুসন্ধান করুন
- লোডিং আচরণ পরিবর্তন করুন
- নেটওয়ার্ক অনুরোধ ব্লক করুন
- নেটওয়ার্কের অবস্থা পরিবর্তন করুন
- ডিবাগ
prefetchস্পেকুলেশন নিয়ম - HTTP প্রতিক্রিয়া হেডারগুলি ওভাররাইড করুন
- ওয়াইল্ডকার্ড অক্ষর ব্যবহার করে একাধিক ইউআরএল-এর হেডার ওভাররাইড করুন।
- নেটওয়ার্ক অনুরোধ ডেটা সংরক্ষণ এবং রপ্তানি করুন
নেটওয়ার্ক প্যানেলের সর্বাধিক ব্যবহৃত কিছু ফিচার সম্পর্কে জানতে ‘Inspect network activity’ টিউটোরিয়ালটি দেখুন।
নেটওয়ার্ক প্যানেলটি খুলুন
নেটওয়ার্ক প্যানেলটি খুলতে, DevTools খুলুন এবং তারপর উপরের অ্যাকশন বারে অবস্থিত Network-এ ক্লিক করুন।
বিকল্পভাবে, কমান্ড মেনুর মাধ্যমে নেটওয়ার্ক প্যানেল খুলতে এই ধাপগুলো অনুসরণ করুন:
- ডেভটুলস খুলুন ।
- নিম্নলিখিত বোতাম টিপে কমান্ড মেনু খুলুন:
- ম্যাকওএস: কমান্ড + শিফট + পি
- উইন্ডোজ, লিনাক্স, ক্রোমওএস: কন্ট্রোল + শিফট + পি
-
Networkটাইপ করা শুরু করুন, Show Network panel নির্বাচন করুন এবং Enter চাপুন।
নেটওয়ার্ক কার্যকলাপ রেকর্ড করুন
আপনি যখন DevTools খোলেন , ততক্ষণ পর্যন্ত DevTools খোলা থাকা অবস্থায় নেটওয়ার্ক রিকোয়েস্টগুলো নেটওয়ার্ক প্যানেলে স্বয়ংক্রিয়ভাবে রেকর্ড হয়ে যায়।
রেকর্ডিং করার পাশাপাশি আপনি নিম্নলিখিত কাজগুলো করতে পারেন:
- নেটওয়ার্ক অনুরোধ রেকর্ড করা বন্ধ করুন ।
- Requests টেবিল থেকে সমস্ত অনুরোধ মুছে ফেলুন ।
- একাধিক পেজ লোডের ক্ষেত্রে অনুরোধগুলি সংরক্ষণ করুন ।
- অফলাইন অভিজ্ঞতার অনুকরণ করুন ।
- ধীরগতির নেটওয়ার্ক সংযোগ অনুকরণ করুন ।
নেটওয়ার্ক অনুরোধগুলি পরিদর্শন করুন
সমস্ত নেটওয়ার্ক অনুরোধ প্যানেলের কেন্দ্রে অবস্থিত 'অনুরোধ' টেবিলে নথিভুক্ত করা হয়।
ডিফল্টরূপে প্রদর্শিত কলাম এবং আপনি যোগ করতে পারেন এমন অতিরিক্ত কলামগুলো সম্পর্কে আরও জানতে, ‘অনুরোধের লগ দেখুন’ দেখুন।
অনুরোধটির নামটিতে ক্লিক করলে সেই অনুরোধ সম্পর্কিত অতিরিক্ত তথ্যসহ ট্যাবগুলো দেখা যাবে, যার মধ্যে নিম্নলিখিত বিষয়গুলো অন্তর্ভুক্ত রয়েছে:
- হেডার : নির্বাচিত অনুরোধের HTTP হেডারসমূহ।
- পেলোড : একটি অনুরোধের কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা।
- প্রিভিউ : এইচটিএমএল-এর একটি প্রাথমিক উপস্থাপনা।
- প্রতিক্রিয়া : অনুরোধটির এইচটিএমএল সোর্স কোড।
- প্রেরক : কী কারণে অনুরোধটি করা হয়েছে।
- সময় : নির্বাচিত অনুরোধটির নেটওয়ার্ক কার্যকলাপের বিশদ বিবরণ।
- কুকি : অনুরোধ এবং তার প্রতিক্রিয়ার কুকি।
- ডিভাইস-সংযুক্ত সেশন : সক্রিয় ডিভাইস-সংযুক্ত সেশনগুলির স্থগিতকরণ এবং রিফ্রেশ অবস্থা।
নেটওয়ার্ক অনুরোধগুলি ফিল্টার এবং সাজান
নেটওয়ার্ক প্যানেল আপনাকে রিকোয়েস্ট টেবিলে অনুরোধগুলি সাজানোর দুটি উপায় দেয়:
Requests টেবিলে অনুরোধগুলি ফিল্টার করার কয়েকটি উপায় নিচে দেওয়া হলো:
- বৈশিষ্ট্য অনুসারে অনুরোধগুলি ফিল্টার করুন
- প্রকার অনুসারে অনুরোধ ফিল্টার করুন
- সময় অনুযায়ী অনুরোধ ফিল্টার করুন
- ডেটা ইউআরএল লুকান
- এক্সটেনশন ইউআরএল লুকান
- শুধুমাত্র ব্লক করা প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখান
- শুধুমাত্র ব্লক করা অনুরোধগুলি দেখান
- শুধুমাত্র তৃতীয় পক্ষের অনুরোধগুলি দেখান
নেটওয়ার্ক হেডার এবং প্রতিক্রিয়া অনুসন্ধান করুন
সমস্ত রিসোর্সের HTTP হেডার এবং রেসপন্সে কোনো নির্দিষ্ট স্ট্রিং বা রেগুলার এক্সপ্রেশন কীভাবে অনুসন্ধান করতে হয় তা জানতে, “সার্চ নেটওয়ার্ক হেডারস অ্যান্ড রেসপন্সেস” দেখুন।
লোডিং আচরণ পরিবর্তন করুন
নেটওয়ার্ক প্যানেলে লোডিং আচরণ পরিবর্তন করে আপনার পেজের ইউজার এক্সপেরিয়েন্স পরীক্ষা করুন।
নেটওয়ার্ক প্যানেল ব্যবহার করে আপনি নিম্নলিখিত কাজগুলো করতে পারেন:
- ব্রাউজার ক্যাশে নিষ্ক্রিয় করে একজন প্রথমবার পরিদর্শকের মতো আচরণ করুন।
- ম্যানুয়ালি ব্রাউজার ক্যাশে পরিষ্কার করুন
- ব্রাউজার কুকি ম্যানুয়ালি মুছে ফেলুন
- অফলাইন অনুকরণ করুন
- ধীরগতির নেটওয়ার্ক সংযোগ অনুকরণ করুন
- HTTP প্রতিক্রিয়া হেডারগুলি ওভাররাইড করুন
- ব্যবহারকারী এজেন্টকে ওভাররাইড করুন
নেটওয়ার্ক অনুরোধ ডেটা সংরক্ষণ এবং রপ্তানি করুন
নেটওয়ার্ক অনুরোধ ডেটা সংরক্ষণ ও রপ্তানি করতে, নিম্নলিখিতগুলি দেখুন: