Network Monitor বর্তমান পেজের প্রতিটি নেটওয়ার্ক রিকোয়েস্ট ক্যাপচার এবং প্রদর্শন করে — যেমন XHR/Fetch API কল, স্ক্রিপ্ট লোড, স্টাইলশিট ফেচ, ইমেজ ডাউনলোড, ফন্ট ফাইল ইত্যাদি। ব্রাউজারের ডেভটুলস (DevTools) ওপেন না করেই একটি লাইভ-আপডেটিং ফ্লোটিং প্যানেলে URL, HTTP মেথড, স্ট্যাটাস কোড (status codes), রেসপন্স সাইজ এবং টাইমিং দেখুন।
ক্রোম ডেভটুলসের (Chrome DevTools) নেটওয়ার্ক ট্যাবটি অনেক বেশি কার্যকরী হলেও এটি বেশ ভারি — এটি স্ক্রিনের অনেক জায়গা দখল করে নেয়, নেভিগেট করলে রিসেট হয়ে যায় এবং আপনাকে পেজ কন্টেন্ট থেকে দূরে সরিয়ে নিতে পারে। 'Network Monitor' পেজের ওপরে থাকা একটি হালকা ফ্লোটিং প্যানেলে প্রয়োজনীয় সব নেটওয়ার্ক মনিটরিং ফিচার প্রদান করে। এটি XHR এবং Fetch রিকোয়েস্ট ইন্টারসেপ্ট করে এবং Performance API-এর মাধ্যমে রিসোর্স লোডিং মনিটর করে প্রতিটি নেটওয়ার্ক রিকোয়েস্ট রিয়েল-টাইমে দেখায়। প্রতিটি রিকোয়েস্টে URL, HTTP মেথড (GET, POST, PUT, DELETE), স্ট্যাটাস কোড (সবুজ রঙে 2xx, হলুদে 3xx, লাল রঙে 4xx/5xx), বাইট হিসেবে রেসপন্স সাইজ এবং মিলিসকেন্ডে এর স্থায়িত্ব (duration) দেখা যায়। বিস্তারিত দেখতে যেকোনো রিকোয়েস্টে ক্লিক করুন: এতে রিকোয়েস্ট হেডার, রেসপন্স হেডার, রিকোয়েস্ট পেলোড (POST/PUT-এর জন্য), রেসপন্স বডি প্রিভিউ এবং টাইমিং ব্রেকডাউন থাকে। নির্দিষ্ট ট্রাফিক খেয়াল করতে টাইপ অনুযায়ী (XHR/Fetch, JS, CSS, Images, Fonts) ফিল্টার করুন।
প্রতিটি নেটওয়ার্ক রিকোয়েস্ট (যেমন পেজ লোড, API কল, লেজি-লোডেড রিসোর্স এবং ব্যাকগ্রাউন্ড ফেচ) ঘটার সাথে সাথেই প্যানেলে প্রদর্শিত হয়। আলাদাভাবে রিফ্রেশ ছাড়াই ফিডটি রিয়েল-টাইমে আপডেট হতে থাকে।
যেকোনো রিকোয়েস্টে ক্লিক করে এর পূর্ণাঙ্গ তথ্য দেখুন: যেমন URL, মেথড, হেডার, পেলোড (POST/PUT-এর জন্য), রেসপন্স হেডার, রেসপন্স বডি প্রিভিউ (অটো-ফরম্যাটেড JSON), স্ট্যাটাস কোড, সাইজ এবং টাইমিং ব্রেকডাউন।
রিকোয়েস্টগুলোকে টাইপ অনুযায়ী ফিল্টার করুন: যেমন XHR/Fetch (API কল), JS (স্ক্রিপ্ট), CSS (স্টাইলশিট), IMG (ইমেজ), Font (ওয়েব ফন্ট) অথবা All। গুরুত্বপূর্ণ বিষয়গুলো খেয়াল করতে অন্যান্য রিসোর্স লোডিং থেকে API ট্রাফিকগুলোকে আলাদা করে নিন।
তাৎক্ষণিকভাবে শনাক্ত করতে স্ট্যাটাস কোডগুলোকে আলাদা রঙে চিহ্নিত করা হয়েছে: সফল রিকোয়েস্টের (2xx) জন্য সবুজ, রিডাইরেকশনের (3xx) জন্য হলুদ, ক্লায়েন্ট এরর (4xx) এবং সার্ভার এররের (5xx) জন্য লাল রঙ ব্যবহার করা হয়েছে। এর মাধ্যমে ব্যর্থ রিকোয়েস্টগুলো সহজেই ধরা যায়।
প্রতিটি রিকোয়েস্টে রেসপন্স সাইজ (KB-তে) এবং মোট স্থায়িত্ব বা টাইম (মিলিসকেন্ডে) প্রদর্শিত হয়। ধীরগতির API কল, অতিরিক্ত বড় রিসোর্স এবং অপ্রয়োজনীয় রিকোয়েস্টগুলো শনাক্ত করুন যা পেজ পারফরম্যান্সে নেতিবাচক প্রভাব ফেলে।
একটি সামারি বার সব রিকোয়েস্টের মোট সংখ্যা এবং মোট সাইজ দেখায়। প্রতিটি টাইপের (যেমন স্ক্রিপ্ট বনাম ইমেজ বনাম API কল) আলাদা টোটাল হিসাব দেখতে সামারিটি ফিল্টার করুন এবং জানুন কোন খাতে কতটুকু ব্যান্ডউইথ খরচ হচ্ছে।
আপনার ফ্রন্টএন্ড সঠিক প্যারামিটারসহ সঠিক API এন্ডপয়েন্টে কল করছে কি না তা নিশ্চিত করতে XHR/Fetch রিকোয়েস্টগুলো খেয়াল করুন। ভুল ডেটা ফরম্যাট তাৎক্ষণিকভাবে শনাক্ত করতে পেলোড এবং রেসপন্স বডি ইন্সপেক্ট করুন।
লাল রঙের 404 এবং 500 এন্ট্রিগুলো ব্রোকেন রিসোর্স বা ফেল করা API কলগুলোকে তাৎক্ষণিকভাবে হাইলাইট করে। কোন URL-গুলো ফেইল করছে, কখন করছে এবং সার্ভার থেকে কী এরর রেসপন্স আসছে তা দেখে নিন।
সবচেয়ে ধীরগতির রিকোয়েস্টগুলো খুঁজে পেতে ডিউরেশন বা স্থায়িত্ব অনুযায়ী সাজান। বড় রিসোর্সগুলো খুঁজতে সাইজ অনুযায়ী সাজান। সামারি টোটাল থেকে পুরো ব্যান্ডউইথের চিত্রটি দেখুন — পেজটি কি অতিরিক্ত রিকোয়েস্ট পাঠাচ্ছে নাকি অনেক বেশি ডেটা ডাউনলোড করছে?
পেজটি ব্যাকগ্রাউন্ডে কী ধরনের নেটওয়ার্ক রিকোয়েস্ট করছে তা দেখুন — যেমন অ্যানালিটিক্স পিং, হার্টবিট কল, পোলিং রিকোয়েস্ট, লেজি-লোডেড রিসোর্স ইত্যাদি। ইউজারের চোখের অন্তরালে থাকা সব নেটওয়ার্ক অ্যাক্টিভিটি সম্পর্কে পরিষ্কার ধারণা পান।
রিকোয়েস্টগুলো ফিল্টার করুন এবং কোন ডোমেইনের সাথে যোগাযোগ করা হচ্ছে তা পরীক্ষা করুন। আপনার অগোচরে থাকা ট্র্যাক পিক্সেল, ডেটা কালেকশন বা অন্য যেকোনো এক্সটারনাল API কল শনাক্ত করুন যা থার্ড-পার্টি স্ক্রিপ্টগুলো করছে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Network Monitor আইকনে ক্লিক করুন। একটি প্যানেল ওপেন হবে এবং সাথে সাথেই নেটওয়ার্ক রিকোয়েস্ট ক্যাপচার করা শুরু করবে।
পেজটি স্বাভাবিকভাবে ব্যবহার করুন। প্রতিটি নেটওয়ার্ক রিকোয়েস্ট ঘটার সাথে সাথে ফিডে চলে আসবে — API কল, রিসোর্স লোড এবং ব্যাকগ্রাউন্ড ফেচ সবকিছুই এখানে পাওয়া যাবে।
ফিল্টার ছোট করতে টাইপ ফিল্টারগুলো (XHR, JS, CSS, IMG, Font) ব্যবহার করুন। ডেটা ফেচিং ডিবাগ করতে কেবল API কলগুলো অথবা অ্যাসেট লোডিং চেক করতে কেবল ইমেজগুলো দেখুন।
যেকোনো রিকোয়েস্টের পূর্ণাঙ্গ তথ্য (যেমন URL, হেডার, পেলোড, রেসপন্স বডি, স্ট্যাটাস কোড, সাইজ এবং টাইমিং) দেখতে সেই রোর ওপর ক্লিক করুন।
লাল স্ট্যাটাস কোড (404, 500) ব্যর্থ বা ফেল করা রিকোয়েস্ট নির্দেশ করে। স্লো ডিউরেশন (slow duration) পারফরম্যান্সের ঘাটতি তুলে ধরে। আর অতিরিক্ত বড় সাইজের রিসোর্সগুলো অপ্টিমাইজেশনের প্রয়োজনীয়তা নির্দেশ করে।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
