Chrome DevTools-এর নেটওয়ার্ক বিশ্লেষণ ফিচারের এই বিস্তারিত রেফারেন্স থেকে আপনার পৃষ্ঠা কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন নতুন উপায় খুঁজে দেখুন।
নেটওয়ার্ক রিকোয়েস্ট রেকর্ড করুন
ডিফল্ট হিসেবে, DevTools খোলা থাকলে, DevTools নেটওয়ার্ক প্যানেলে সব নেটওয়ার্ক অনুরোধ রেকর্ড করে।
নেটওয়ার্ক অনুরোধ রেকর্ড করা বন্ধ করুন
অনুরোধ রেকর্ড করা বন্ধ করতে:
- নেটওয়ার্ক প্যানেলে গিয়ে নেটওয়ার্ক লগ রেকর্ড করা বন্ধ করুন
বিকল্পে ক্লিক করুন। এটি ধূসর হয়ে যায়, এর অর্থ হল DevTools আর অনুরোধ রেকর্ড করছে না। - নেটওয়ার্ক প্যানেলে ফোকাস থাকাকালীন Command> + E (Mac) বা Control + E (Windows, Linux) প্রেস করুন।
অনুরোধ মুছে দিন
অনুরোধ সারণী থেকে সব অনুরোধ মুছে দিতে, নেটওয়ার্ক প্যানেলে গিয়ে মুছে দিন
বিকল্পে ক্লিক করুন।
পৃষ্ঠা লোড হওয়া জুড়ে অনুরোধ সেভ করা
পেজ লোড হওয়ার সময় অনুরোধ সেভ করতে, নেটওয়ার্ক প্যানেলে লগ সংরক্ষণ করুন চেকবক্সে টিকচিহ্ন দিন। আপনি লগ সেভ করুন বিকল্প বন্ধ না করা পর্যন্ত DevTools সব অনুরোধ সেভ করে।
পৃষ্ঠা লোড হওয়ার সময় স্ক্রিনশট ক্যাপচার করুন
আপনার পৃষ্ঠা লোড হওয়ার জন্য অপেক্ষা করার সময় ব্যবহারকারীরা কী দেখেন তা বিশ্লেষণ করতে স্ক্রিনশট ক্যাপচার করুন।
স্ক্রিনশট নেওয়ার সুবিধা চালু করতে, নেটওয়ার্ক প্যানেলের মধ্যে সেটিংস 
খুলুন এবং স্ক্রিনশট ক্যাপচার করুন বিকল্প বেছে নিন।
স্ক্রিনশট ক্যাপচার করার জন্য নেটওয়ার্ক প্যানেল ফোকাসে রেখে পৃষ্ঠাটি আবার লোড করুন।
ক্যাপচার করার পরে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটের সাথে ইন্টার্যাক্ট করতে পারবেন:
- স্ক্রিনশটটি ঠিক কোন সময়ে ক্যাপচার করা হয়েছে তা দেখতে স্ক্রিনশটের উপর মাউস নিয়ে যান। ওভারভিউ টাইমলাইনে একটি হলুদ লাইন দেখা যায়।
- স্ক্রিনশট ক্যাপচার করার পরে করা যেকোনও অনুরোধ ফিল্টার করতে স্ক্রিনশটের থাম্বনেলে ক্লিক করুন।
- কোনও থাম্বনেল জুম করে দেখতে সেটিতে ডবল ক্লিক করুন।
অনুরোধ এডিট করে আবার পাঠান
আপনি অনুরোধ সারণী থেকে যেকোনও ফেচ করা যায় এমন নেটওয়ার্ক অনুরোধ এডিট করে আবার পাঠাতে পারবেন:
- অনুরোধে ডানদিকের বোতামে ক্লিক করে ফেচ হিসেবে এডিট করে আবার পাঠান বিকল্প বেছে নিন। DevTools Console ড্রয়ার খোলে যেখানে অনুরোধটি
fetch()কল হিসেবে দেখানো হয়, আসল অনুরোধের প্যারামিটার ও এক্সিকিউশন কনটেক্সট বজায় রাখা হয়। - প্রয়োজন হলে, Console-এ
fetch()কল এডিট করুন, তারপর অনুরোধ আবার পাঠাতে Enter প্রেস করুন।
লোডিং সংক্রান্ত আচরণ পরিবর্তন করুন
ব্রাউজার ক্যাশে বন্ধ করে দিয়ে প্রথমবার আসা ভিজিটরের মতো করে দেখুন
প্রথমবার ব্যবহারকারী আপনার সাইট কীভাবে অনুভব করেন তা অনুকরণ করতে, ক্যাশে বন্ধ করুন চেকবক্সটি চেক করুন। DevTools ব্রাউজার ক্যাশে বন্ধ করে দেয়। এটি প্রথমবার ব্যবহারকারীর অভিজ্ঞতাকে আরও সঠিকভাবে এমুলেট করে, কারণ বারবার ভিজিট করার সময় ব্রাউজার ক্যাশে থেকে অনুরোধ পরিবেশন করা হয়।
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে বন্ধ করুন
অন্য DevTools প্যানেলে কাজ করার সময় ক্যাশে বন্ধ করতে চাইলে, নেটওয়ার্কের পরিস্থিতি ড্রয়ার ব্যবহার করুন।
- নেটওয়ার্কের অবস্থা ড্রয়ার খুলতে
আইকনে ক্লিক করুন। - ক্যাশে বন্ধ করুন চেকবক্সে টিকচিহ্ন দিন বা সেটি সরান।
ম্যানুয়ালি ব্রাউজার ক্যাশে খালি করা
যেকোনও সময় ব্রাউজার ক্যাশে ম্যানুয়ালি মুছে দিতে, অনুরোধ সারণীর যেকোনও জায়গায় মাউসের ডানদিকের বোতামে ক্লিক করুন এবং ব্রাউজার ক্যাশে মুছে দিন বিকল্প বেছে নিন।
অফলাইন এমুলেট করুন
ওয়েব অ্যাপের একটি নতুন ক্লাস আছে, যাকে প্রোগ্রেসিভ ওয়েব অ্যাপ বলা হয়, যা সার্ভিস ওয়ার্কার-এর সাহায্যে অফলাইনে কাজ করতে পারে। আপনি যখন এই ধরনের অ্যাপ তৈরি করছেন, তখন ডেটা কানেকশন নেই এমন একটি ডিভাইস দ্রুত সিমুলেট করতে পারাটা উপযোগী।
সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতা সিমুলেট করতে, ক্যাশে বন্ধ করুন চেকবক্সের পাশে থাকা নেটওয়ার্ক থ্রটলিং ড্রপ-ডাউন মেনু থেকে অফলাইন বিকল্প বেছে নিন।
অফলাইন মোড চালু আছে তা মনে করিয়ে দিতে DevTools নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কতার আইকন দেখায়।
স্লো নেটওয়ার্ক কানেকশন ইমুলেট করুন
দ্রুত 4G, ধীরগতির 4G বা 3G এমুলেট করতে, উপরে অ্যাকশন বারে থ্রটলিং ড্রপ-ডাউন মেনু থেকে সংশ্লিষ্ট প্রিসেট বেছে নিন।
পারফর্ম্যান্স প্যানেলে ফিল্ড মেট্রিক্স চালু করা থাকলে, Chrome ব্যবহারকারীর অভিজ্ঞতা রিপোর্ট ডেটার উপর ভিত্তি করে মেনুতে থ্রটলিং বিকল্পগুলির মধ্যে একটিকে সাজেস্ট করা হিসেবে চিহ্নিত করা হতে পারে।
থ্রটলিং চালু আছে তা মনে করিয়ে দিতে DevTools নেটওয়ার্ক প্যানেলের পাশে সতর্কতার আইকন দেখায়।
কাস্টম থ্রটলিং প্রোফাইল তৈরি করা
ধীর বা দ্রুত 4G-এর মতো প্রিসেট ছাড়াও, আপনি নিজের কাস্টম থ্রটলিং প্রোফাইল যোগ করতে পারবেন:
- থ্রটলিং মেনু খুলে কাস্টম > যোগ করুন... বিকল্প বেছে নিন।
- সেটিংস > থ্রটলিং বিকল্পে যেভাবে বর্ণনা করা হয়েছে সেইভাবে নতুন থ্রটলিং প্রোফাইল সেট-আপ করুন।
নেটওয়ার্ক প্যানেলে ফিরে গিয়ে, থ্রটলিং ড্রপ-ডাউন মেনু থেকে আপনার নতুন প্রোফাইল বেছে নিন।
থ্রটলিং চালু আছে তা মনে করিয়ে দিতে DevTools নেটওয়ার্ক প্যানেলের পাশে একটি 
সতর্কতার আইকন দেখায়।
WebSocket কানেকশন থ্রটল করুন
HTTP অনুরোধ ছাড়াও, DevTools ভার্সন ৯৯ থেকে WebSocket কানেকশন থ্রটল করে।
WebSocket থ্রটলিং দেখতে:
- নতুন কানেকশন শুরু করুন, যেমন, টেস্ট টুল ব্যবহার করে।
- নেটওয়ার্ক প্যানেলে, থ্রটলিং নেই বিকল্প বেছে নিন এবং কানেকশনের মাধ্যমে মেসেজ পাঠান।
- খুব ধীরে ধীরে কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন, যেমন,
10 kbit/s। এই ধরনের স্লো প্রোফাইল আপনাকে পার্থক্য বুঝতে সাহায্য করবে। - নেটওয়ার্ক প্যানেলে, প্রোফাইল বেছে নিন এবং আরেকটি মেসেজ পাঠান।
- WS ফিল্টার টগল করুন, আপনার কানেকশনের নামে ক্লিক করুন, মেসেজ ট্যাব খুলুন এবং থ্রটলিং সহ ও ছাড়া পাঠানো ও ইকো করা মেসেজের মধ্যে সময়ের পার্থক্য চেক করুন। যেমন:
নেটওয়ার্কের অবস্থা ড্রয়ার থেকে স্লো নেটওয়ার্ক কানেকশন ইমুলেট করুন
অন্যান্য DevTools প্যানেলে কাজ করার সময় নেটওয়ার্ক কানেকশন থ্রটল করতে চাইলে, নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।
- নেটওয়ার্কের অবস্থা ড্রয়ার খুলতে
আইকনে ক্লিক করুন। - নেটওয়ার্ক থ্রটলিং মেনু থেকে কানেকশন স্পিড বেছে নিন।
ম্যানুয়ালি ব্রাউজার কুকি মুছে দিন
যেকোনও সময় ব্রাউজার কুকি ম্যানুয়ালি মুছে দিতে, অনুরোধ টেবিলের যেকোনও জায়গায় ডানদিকের বোতামে ক্লিক করে ব্রাউজার কুকি মুছুন বিকল্প বেছে নিন।
HTTP রেসপন্স হেডার ওভাররাইড করা
স্থানীয়ভাবে ফাইল ও HTTP রেসপন্স হেডার ওভাররাইড করা দেখুন।
ইউজার এজেন্ট ওভাররাইড করুন
ইউজার এজেন্ট ম্যানুয়ালি ওভাররাইড করতে:
- নেটওয়ার্কের অবস্থা ড্রয়ার খুলতে
আইকনে ক্লিক করুন। - অটোমেটিক বেছে নিন বিকল্প থেকে টিকচিহ্ন সরিয়ে দিন।
- মেনু থেকে একটি ইউজার এজেন্ট বিকল্প বেছে নিন অথবা বক্সে একটি কাস্টম বিকল্প লিখুন।
অনুরোধ সার্চ করুন
অনুরোধের হেডার, পেলোড ও উত্তর জুড়ে সার্চ করতে:
ডানদিকে সার্চ ট্যাব খুলতে নিম্নলিখিত শর্টকাট প্রেস করুন:
- macOS-এ, Command + F.
- Windows বা Linux-এ, Control + F।
সার্চ ট্যাবে, আপনার কোয়েরি লিখে Enter টিপুন। বিকল্প হিসেবে, ছোট ও বড় হাতের অক্ষরের মধ্যে পার্থক্য করা বা রেগুলার এক্সপ্রেশন চালু করতে যথাক্রমে বা বিকল্পে ক্লিক করুন।
সার্চ ফলাফলের মধ্যে একটিতে ক্লিক করুন। নেটওয়ার্ক প্যানেল মিলে যাওয়া অনুরোধ হলুদ রঙে হাইলাইট করে। এছাড়াও, প্যানেলটি হেডার বা উত্তর ট্যাব খোলে এবং সেখানে মিলে যাওয়া স্ট্রিং থাকলে তা হাইলাইট করে।
সার্চ ফলাফল রিফ্রেশ করতে, রিফ্রেশ করুন বিকল্পে ক্লিক করুন। ফলাফল মুছতে, মুছুন বিকল্পে ক্লিক করুন।
DevTools-এ আপনি যেসব উপায়ে সার্চ করতে পারবেন সেই সম্পর্কে আরও জানতে, সার্চ করুন: লোড করা সব রিসোর্স জুড়ে টেক্সট খুঁজুন দেখুন।
অনুরোধ ফিল্টার করা
প্রপার্টি অনুযায়ী অনুরোধ ফিল্টার করুন
ডোমেন বা অনুরোধের সাইজের মতো প্রপার্টি অনুযায়ী অনুরোধ ফিল্টার করতে ফিল্টার বক্স ব্যবহার করুন অথবা একই-সাইট অনুরোধ সহ অনুরোধের URL, ডোমেন, হোস্টনেম বা পোর্টের (যেমন, localhost বা example.com) সাথে ম্যাচ করার জন্য টেক্সট স্ট্রিং লিখুন।
আপনি বক্সটি দেখতে না পেলে, ফিল্টার বারটি সম্ভবত লুকানো আছে। ফিল্টার বার লুকান দেখুন।
আপনার ফিল্টার ইনভার্ট করতে, ফিল্টার বক্সের পাশে থাকা ইনভার্ট করুন চেকবক্সে টিকচিহ্ন দিন।
আপনি প্রতিটি প্রপার্টি স্পেস দিয়ে আলাদা করে একসাথে একাধিক প্রপার্টি ব্যবহার করতে পারবেন। যেমন, mime-type:image/gif larger-than:1K এক কিলোবাইটের চেয়ে বড় সব GIF দেখায়।
এইসব মাল্টি-প্রপার্টি ফিল্টার AND অপারেশনের সমতুল্য। OR অপারেশন কাজ করে না।
এর পরে, কাজ করে এমন প্রপার্টির সম্পূর্ণ তালিকা দেওয়া হল।
cookie-domain. নির্দিষ্ট কুকি ডোমেন সেট করে এমন রিসোর্স দেখান।cookie-name. নির্দিষ্ট কুকির নাম সেট করে এমন রিসোর্স দেখান।cookie-path. নির্দিষ্ট কুকি পাথ সেট করে এমন রিসোর্স দেখান।cookie-value. নির্দিষ্ট কুকি ভ্যালু সেট করে এমন রিসোর্স দেখান।domain. শুধুমাত্র নির্দিষ্ট ডোমেন থেকে রিসোর্স দেখাও। একাধিক ডোমেন অন্তর্ভুক্ত করতে আপনি ওয়াইল্ডকার্ড অক্ষর (*) ব্যবহার করতে পারবেন। যেমন,*.com.com-এ শেষ হওয়া সব ডোমেন নামের রিসোর্স দেখায়। DevTools, এটি যেসব ডোমেন দেখেছে সেগুলি সহ অটোকমপ্লিট ড্রপ-ডাউন মেনু দেখায়।has-overrides.content,headers, যেকোনও ওভাররাইড (yes) বা কোনও ওভাররাইড নেই (no) এমন অনুরোধ দেখুন। আপনি অনুরোধের টেবিলে সংশ্লিষ্ট ওভাররাইড আছে কলাম যোগ করতে পারবেন।has-response-header. নির্দিষ্ট HTTP রেসপন্স হেডার আছে এমন রিসোর্স দেখুন। DevTools, অটোমেটিক সম্পূর্ণ করার ড্রপ-ডাউনকে, এর সম্মুখীন হওয়া সমস্ত রেসপন্স হেডারের সাথে পপুলেট করে।is.WebSocketরিসোর্স খুঁজতেis:runningব্যবহার করুন।larger-than. নির্দিষ্ট সাইজের থেকে বড় রিসোর্স দেখান, বাইটে।1000-এর ভ্যালু সেট করা মানে1k-এর ভ্যালু সেট করা।method. নির্দিষ্ট HTTP পদ্ধতির ধরন ব্যবহার করে যেসব রিসোর্স পাওয়া গেছে সেগুলি দেখান। DevTools অটোমেটিক সম্পূর্ণ করার ড্রপ-ডাউনকে HTTP পদ্ধতির মাধ্যমে পূরণ করে।mime-type. নির্দিষ্ট MIME প্রকারের রিসোর্স দেখান। DevTools, অটোকমপ্লিট ড্রপ-ডাউনকে, এটির সম্মুখীন হওয়া সমস্ত MIME প্রকারের সাথে পপুলেট করে।mixed-content. সব মিক্সড কন্টেন্ট রিসোর্স (mixed-content:all) অথবা শুধু যেগুলি দেখানো হচ্ছে (mixed-content:displayed) সেগুলি দেখুন।priority. সেইসব রিসোর্স দেখান যেগুলির অগ্রাধিকার লেভেল নির্দিষ্ট ভ্যালুর সাথে মেলে।resource-type. কোনও রিসোর্সের ধরন অনুযায়ী রিসোর্স দেখান, যেমন, ছবি। DevTools, এটির সম্মুখীন হওয়া সব ধরনের রিসোর্স সহ অটোফিল ড্রপ-ডাউন পূরণ করে।response-header-set-cookie. 'সমস্যা' ট্যাবে প্রসেস না করা Set-Cookie হেডার দেখুন। ভুলSet-Cookieহেডার সহ ভুলভাবে তৈরি করা কুকি নেটওয়ার্ক প্যানেলে ফ্ল্যাগ করা হবে।scheme. অসুরক্ষিত HTTP (scheme:http) বা সুরক্ষিত HTTPS (scheme:https) থেকে পাওয়া রিসোর্স দেখুন।set-cookie-domain.Domainঅ্যাট্রিবিউট সহSet-Cookieহেডার আছে এমন রিসোর্স দেখাও যা নির্দিষ্ট ভ্যালুর সাথে ম্যাচ করে। DevTools, অটোমেটিক পূরণ করার সুবিধাটি, এর সম্মুখীন হওয়া সমস্ত কুকি ডোমেন দিয়ে পূরণ করে।set-cookie-name. সেইসব রিসোর্স দেখান যেগুলিতেSet-Cookieহেডার আছে এবং সেটির নাম নির্দিষ্ট করা ভ্যালুর সাথে মিলে যায়। DevTools, অটোমেটিক সম্পূর্ণ হওয়ার সুবিধাটি, এর আগে দেখা সব কুকির নাম দিয়ে ভরে দেয়।set-cookie-value. সেইসব রিসোর্স দেখান যেগুলিতেSet-Cookieহেডার আছে এবং সেটির ভ্যালু নির্দিষ্ট ভ্যালুর সাথে মিলে যায়। DevTools, এর সম্মুখীন হওয়া সমস্ত কুকি ভ্যালু দিয়ে অটোকমপ্লিট পূরণ করে।status-code. শুধু সেইসব রিসোর্স দেখান যেগুলির HTTP স্ট্যাটাস কোড নির্দিষ্ট কোডের সাথে ম্যাচ করে। DevTools অটোমেটিক সম্পূর্ণ করার ড্রপ-ডাউন মেনুতে এটি যেসব স্ট্যাটাস কোড পেয়েছে সেগুলি দেখায়।url. নির্দিষ্ট ভ্যালুর সাথে ম্যাচ করে এমনurlআছে এমন রিসোর্স দেখান।
অনুরোধের ধরন অনুযায়ী ফিল্টার করুন
রিসোর্সের ধরন অনুযায়ী অনুরোধ ফিল্টার করতে, নেটওয়ার্ক প্যানেলে সব, Fetch/XHR, JS, CSS, Img, মিডিয়া, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest অথবা অন্যান্য (এখানে তালিকাভুক্ত নয় এমন যেকোনও ধরন) বোতামে ক্লিক করুন।
আপনি এইসব বোতাম দেখতে না পেলে, ফিল্টার অ্যাকশন বার সম্ভবত লুকানো আছে। ফিল্টার বার লুকান দেখুন।
একাধিক ধরনের রিসোর্স একসাথে দেখতে, Command (Mac) বা Control (Windows, Linux) কী প্রেস করে ধরে রাখুন এবং তারপর বিভিন্ন ধরনের ফিল্টারে ক্লিক করুন।
সময় অনুযায়ী অনুরোধ ফিল্টার করুন
ওভারভিউ টাইমলাইনে বাঁদিকে বা ডানদিকে ড্র্যাগ করে শুধু সেইসব অনুরোধ দেখুন যেগুলি ওই সময়সীমার মধ্যে অ্যাক্টিভ ছিল। ফিল্টারটি ইনক্লুসিভ। হাইলাইট করা সময়ের মধ্যে অ্যাক্টিভ থাকা যেকোনও অনুরোধ দেখানো হয়।
ডেটা URL লুকান
ডেটা URL হল ছোট ফাইল যা অন্যান্য ডকুমেন্টে এম্বেড করা থাকে। আপনি
অনুরোধ টেবিলে data: দিয়ে শুরু হওয়া যেকোনও অনুরোধ দেখতে পেলে বুঝবেন সেটি একটি ডেটা URL.
এইসব অনুরোধ লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ডেটা URL লুকান বিকল্প বেছে নিন।
নিচে স্ট্যাটাস বারে মোট অনুরোধের মধ্যে কতগুলি দেখানো হয়েছে তা দেখানো হয়।
এক্সটেনশন URL লুকান
আপনার লেখা কোডে ফোকাস করতে, Chrome-এ ইনস্টল করা এক্সটেনশন থেকে পাঠানো অপ্রাসঙ্গিক অনুরোধ ফিল্টার করতে পারেন। এক্সটেনশন অনুরোধে এমন URL আছে যা chrome-extension:// দিয়ে শুরু হয়।
এক্সটেনশন অনুরোধ লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > এক্সটেনশন URL লুকান বিকল্প বেছে নিন।
নিচে স্ট্যাটাস বারে মোট অনুরোধের মধ্যে কতগুলি দেখানো হয়েছে তা দেখানো হয়।
শুধু ব্লক করা রেসপন্স কুকির অনুরোধই দেখব
যেকোনও কারণে ব্লক করা রেসপন্স কুকি সহ অনুরোধগুলি ছাড়া বাকি সব ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ব্লক করা রেসপন্স কুকি বিকল্প বেছে নিন।
নিচের স্ট্যাটাস বারে মোট অনুরোধের মধ্যে কতগুলি দেখানো হয়েছে তা দেখা যায়।
কোনও উত্তর কুকি ব্লক করার কারণ জানতে, অনুরোধ বেছে নিন, এটির কুকি ট্যাব খুলুন এবং তথ্য আইকনের উপর মাউস নিয়ে যান।
এছাড়াও, Chrome ফ্ল্যাগ বা কনফিগারেশনের কারণে কুকি ব্লক করা হয়েছে এমন অনুরোধের পাশে নেটওয়ার্ক প্যানেল একটি সতর্কতা আইকন দেখায়। আইকনের উপর মাউস নিয়ে গেলে একটি ইঙ্গিত সহ টুলটিপ দেখতে পাবেন এবং আরও তথ্যের জন্য সমস্যা প্যানেলে যেতে এটিতে ক্লিক করুন।
শুধু ব্লক করা অনুরোধ দেখায়
ব্লক করা অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ব্লক করা অনুরোধ বিকল্প বেছে নিন। এটি পরীক্ষা করতে, ড্রয়ারে নেটওয়ার্ক রিকোয়েস্ট ব্লকিং ট্যাব ব্যবহার করতে পারেন।
অনুরোধ সারণীতে ব্লক করা অনুরোধ লাল রঙে হাইলাইট করা হয়। নিচে স্ট্যাটাস বারে মোট অনুরোধের মধ্যে কতগুলি দেখানো হয়েছে তা দেখানো হয়।
শুধু থার্ড-পার্টির অনুরোধ দেখায়
পৃষ্ঠার উৎস থেকে আলাদা উৎস সহ অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > থার্ড-পার্টি অনুরোধ বিকল্প বেছে নিন।
নিচের স্ট্যাটাস বারে মোট অনুরোধের মধ্যে কতগুলি দেখানো হয়েছে তা দেখা যায়।
অনুরোধ সাজান
ডিফল্ট হিসেবে, অনুরোধ সারণীতে অনুরোধগুলি শুরু করার সময় অনুসারে সাজানো হয়, তবে আপনি অন্যান্য মানদণ্ড ব্যবহার করে সারণীটি সাজাতে পারেন।
কলাম অনুযায়ী সাজান
অনুরোধ টেবিলের যেকোনও কলামের হেডারে ক্লিক করে সেই কলাম অনুযায়ী অনুরোধ সাজান।
অ্যাক্টিভিটি ফেজ অনুযায়ী সাজান
Waterfall কীভাবে অনুরোধ সাজায় তা পরিবর্তন করতে, অনুরোধ টেবিলের হেডারে ডানদিকের বোতামে ক্লিক করুন, Waterfall-এর উপর মাউস নিয়ে যান এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন:
- শুরুর সময়। প্রথম অনুরোধটি উপরে দেখানো হয়।
- উত্তর দেওয়ার সময়। যে অনুরোধের জন্য প্রথম ডাউনলোড শুরু হয়েছে সেটি সবচেয়ে উপরে আছে।
- শেষ হওয়ার সময়। সবচেয়ে আগে সম্পূর্ণ হওয়া অনুরোধটি উপরে দেখানো হয়।
- মোট সময়সীমা। সবচেয়ে ছোট কানেকশন সেট-আপ এবং অনুরোধ / উত্তর সহ অনুরোধটি সবচেয়ে উপরে রয়েছে।
- লেটেন্সি। যে অনুরোধটি উত্তরের জন্য সবচেয়ে কম সময় অপেক্ষা করেছে সেটি সবচেয়ে উপরে রয়েছে।
এই বিবরণগুলি ধরে নেয় যে প্রতিটি সংশ্লিষ্ট বিকল্পকে সবচেয়ে ছোট থেকে দীর্ঘতম পর্যন্ত র্যাঙ্ক করা হয়েছে। ওয়াটারফল কলামের হেডারে ক্লিক করলে ক্রম উল্টে যায়।
এই উদাহরণে, ওয়াটারফল মোট সময়সীমা অনুযায়ী সাজানো হয়েছে। প্রতিটি বারের হালকা অংশটি হল অপেক্ষা করার সময়। গাঢ় রঙের অংশটি বাইট ডাউনলোড করতে ব্যয় করা সময়কে দেখায়।
অনুরোধ বিশ্লেষণ করা
DevTools খোলা থাকলে, এটি নেটওয়ার্ক প্যানেলে সব অনুরোধ লগ করে। অনুরোধ বিশ্লেষণ করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন।
অনুরোধের লগ দেখুন
DevTools খোলা থাকাকালীন করা সব অনুরোধের লগ দেখতে অনুরোধ টেবিল ব্যবহার করুন। অনুরোধের উপর ক্লিক করলে বা মাউস নিয়ে গেলে সেই সম্পর্কে আরও তথ্য দেখা যায়।
অনুরোধ সারণীতে ডিফল্ট হিসেবে নিম্নলিখিত কলামগুলি দেখানো হয়:
- নাম। রিসোর্সের ফাইলের নাম বা শনাক্তকারী।
স্ট্যাটাস। এই কলামে নিম্নলিখিত মানগুলি দেখানো হতে পারে:
- HTTP স্ট্যাটাস কোড, যেমন,
200বা404। - ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS)-এর কারণে অনুরোধ ব্যর্থ হলে
CORS error। - ভুলভাবে কনফিগার করা হেডার সহ অনুরোধের জন্য
(blocked:origin)। কী সমস্যা হয়েছে সেই বিষয়ে ইঙ্গিত সহ টুলটিপ দেখতে, এই স্ট্যাটাস ভ্যালুর উপর মাউস নিয়ে যান। (failed)-এর পরে সমস্যার মেসেজ।
- HTTP স্ট্যাটাস কোড, যেমন,
Type. অনুরোধ করা রিসোর্সের MIME-এর ধরন।
ইনিশিয়েটর. নিম্নলিখিত অবজেক্ট বা প্রসেস অনুরোধ শুরু করতে পারে:
- পার্সার। Chrome-এর HTML পার্সার।
- রিডাইরেক্ট। একটি HTTP রিডাইরেক্ট।
- স্ক্রিপ্ট। একটি জাভাস্ক্রিপ্ট ফাংশন। এই ক্ষেত্রে, নেটওয়ার্ক প্যানেল সোর্স ফাইলের সংশ্লিষ্ট লাইনের একটি লিঙ্ক প্রদান করে।
- আগাম ইঙ্গিত। একটি HTTP
103 Early Hintsরেসপন্স। - অন্যান্য। অন্য কোনও প্রসেস বা অ্যাকশন, যেমন কোনও লিঙ্ক ব্যবহার করে কোনও পৃষ্ঠায় নেভিগেট করা বা অ্যাড্রেস বারে কোনও URL লেখা।
সাইজ। সার্ভার থেকে পাওয়া উত্তর হেডার ও উত্তর বডির সম্মিলিত সাইজ।
সময়। অনুরোধ শুরু হওয়া থেকে উত্তরে শেষ বাইট পাওয়া পর্যন্ত মোট সময়কাল।
জলপ্রপাত। প্রতিটি অনুরোধের অ্যাক্টিভিটির ভিজ্যুয়াল ব্রেকডাউন।
কলাম যোগ করা বা সরানো
অনুরোধ টেবিলের হেডারে ডানদিকের বোতামে ক্লিক করে এটি লুকানো বা দেখানোর জন্য একটি বিকল্প বেছে নিন। দেখানো বিকল্পগুলির পাশে টিক চিহ্ন আছে।
আপনি নিম্নলিখিত অতিরিক্ত কলাম যোগ করতে বা সরাতে পারবেন:
- অনুরোধ #. অনুরোধ শুরু করার সম্পূর্ণ ক্রম, ডিফল্ট হিসেবে অনুরোধ সারণীর প্রথম পজিশনে পিন করা থাকে।
- পাথ। URL-এর পাথ অংশ।
- URL. অনুরোধের সম্পূর্ণ URL.
- পদ্ধতি। অনুরোধের HTTP পদ্ধতি (যেমন,
GET,POST,PUT,DELETE)। - প্রোটোকল। অনুরোধের প্রোটোকল (যেমন, HTTP/2-এর জন্য
h2, HTTP/3-এর জন্যh3ইত্যাদি)। - স্কিম। URL-এর স্কিম অংশ।
- ডোমেন। URL-এর ডোমেন অংশ।
- রিমোট অ্যাড্রেস। অনুরোধের রিমোট IP অ্যাড্রেস ও পোর্ট।
- রিমোট অ্যাড্রেস স্পেস। অনুরোধের রিমোট অ্যাড্রেস স্পেস। পাবলিক IP-এর জন্য
Public, প্রাইভেট IP-এর জন্যPrivate। - ইনিশিয়েটর অ্যাড্রেস স্পেস। অনুরোধের ইনিশিয়েটর অ্যাড্রেস স্পেস। রিমোটের মতোই।
- কুকি। অনুরোধে কুকির সংখ্যা।
- কুকি সেট করুন। উত্তরে কুকির সংখ্যা।
- অগ্রাধিকার। অনুরোধের অগ্রাধিকার।
- কানেকশন আইডি. ক্লায়েন্ট সেশনে অনুরোধের কানেকশন আইডি, যদি থাকে।
- ওভাররাইড করা আছে। অনুরোধে ওভাররাইড আছে কিনা (হ্যাঁ, না, কন্টেন্ট বা হেডার)।
- বিজ্ঞাপনের সাথে সম্পর্কিত। সত্য বা মিথ্যা।
- প্রিলোড করা। স্পেকুলেটিভ প্রি-লোডিং ব্যবহার করে অনুরোধটি শুরু করা হয়েছে কিনা।
- রেন্ডার-ব্লকিং। অনুরোধটি রেন্ডার-ব্লকিং, সম্ভাব্য ব্লকিং নাকি অন্য কিছু।
- জলপ্রপাত। প্রতিটি অনুরোধের অ্যাক্টিভিটির ভিজ্যুয়াল ব্রেকডাউন।
কাস্টম কলাম যোগ করা
অনুরোধ টেবিলে কাস্টম কলাম যোগ করতে:
- অনুরোধ টেবিলের হেডারে ডানদিকের বোতামে ক্লিক করে রেসপন্স হেডার > হেডার কলাম ম্যানেজ করুন বিকল্প বেছে নিন।
- ডায়ালগ উইন্ডোতে, কাস্টম হেডার যোগ করুন বিকল্পে ক্লিক করুন, এটির নাম লিখুন এবং যোগ করুন বিকল্পে ক্লিক করুন।
ইনলাইন ফ্রেম অনুযায়ী অনুরোধ গ্রুপ করুন
কোনও পৃষ্ঠায় ইনলাইন ফ্রেম থেকে অনেক অনুরোধ করা হলে, সেগুলিকে গ্রুপ করে আপনি অনুরোধ লগ আরও ফ্রেন্ডলি করে তুলতে পারেন।
iframe অনুযায়ী অনুরোধ গ্রুপ করতে, নেটওয়ার্ক প্যানেলের মধ্যে সেটিংস 
খুলুন এবং ফ্রেম অনুযায়ী গ্রুপ করুন বিকল্পে টিকচিহ্ন দিন।
ইনলাইন ফ্রেমের মাধ্যমে শুরু করা অনুরোধ দেখতে, অনুরোধের লগে এটি বড় করুন।
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখুন
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখতে ওয়াটারফল ব্যবহার করুন। ডিফল্ট হিসেবে, ওয়াটারফল অনুরোধের শুরুর সময় অনুযায়ী সাজানো থাকে। তাই, বাঁদিকে থাকা অনুরোধগুলি ডানদিকে থাকা অনুরোধগুলির আগে শুরু হয়েছে।
Waterfall সাজানোর বিভিন্ন উপায় দেখতে অ্যাক্টিভিটি ফেজ অনুযায়ী সাজান বিকল্প দেখুন।
WebSocket কানেকশনের মেসেজ বিশ্লেষণ করুন
WebSocket কানেকশনের মেসেজ দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে, WebSocket কানেকশনের URL-এ ক্লিক করুন।
- Messages ট্যাব খুলুন। টেবিলে শেষ ১০০টি মেসেজ দেখানো হয়েছে।
টেবিল রিফ্রেশ করতে, অনুরোধ টেবিলের নাম কলামের অধীনে WebSocket কানেকশনের নামে আবার ক্লিক করুন।
টেবিলে তিনটি কলাম আছে:
- ডেটা। মেসেজ পেলোড। মেসেজটি প্লেন টেক্সট হলে, সেটি এখানে দেখানো হয়। বাইনারি অপকোডের জন্য, এই কলামে অপকোডের নাম ও কোড দেখানো হয়। নিম্নলিখিত অপকোড কাজ করে: কন্টিনিউয়েশন ফ্রেম, বাইনারি ফ্রেম, কানেকশন ক্লোজ ফ্রেম, পিং ফ্রেম ও পং ফ্রেম।
- দৈর্ঘ্য। মেসেজ পেলোডের দৈর্ঘ্য, বাইটে।
- সময়। মেসেজটি পাঠানোর বা পাওয়ার সময়।
মেসেজের ধরন অনুযায়ী সেগুলিকে কালার-কোড করা হয়:
- আউটগোয়িং টেক্সট মেসেজ হালকা সবুজ রঙের হয়।
- ইনকামিং টেক্সট মেসেজ সাদা রঙের হয়।
- WebSocket অপকোড হালকা হলুদ রঙের।
- সমস্যাগুলি হালকা লাল রঙের।
স্ট্রিমে ইভেন্ট বিশ্লেষণ করা
Fetch API, EventSource API ও XHR-এর মাধ্যমে সার্ভার স্ট্রিম করা ইভেন্ট দেখতে:
- ইভেন্ট স্ট্রিম করে এমন কোনও পৃষ্ঠায় নেটওয়ার্ক অনুরোধ রেকর্ড করুন।
- নেটওয়ার্ক বিকল্পে গিয়ে, কোনও অনুরোধ বেছে নিন এবং EventStream ট্যাব খুলুন।
ইভেন্ট ফিল্টার করতে, EventStream ট্যাবের উপরে ফিল্টার বারে একটি রেগুলার এক্সপ্রেশন উল্লেখ করুন।
ক্যাপচার করা ইভেন্টের তালিকা মুছে দিতে, মুছে দিন বিকল্পে ক্লিক করুন।
উত্তরের বডির প্রিভিউ দেখা
উত্তরের বডির প্রিভিউ দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে একটি অনুরোধ বেছে নিন।
- প্রিভিউ ট্যাব খুলুন।
এই ট্যাবটি মূলত ছবি দেখার জন্য উপযোগী।
উত্তরের বডি দেখুন
অনুরোধের উত্তর বডি দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে একটি অনুরোধ বেছে নিন।
- উত্তর ট্যাব খুলুন।
বাইনারি বা কম্প্রেস করা উত্তরের জন্য, উত্তর ট্যাবের নিচে ড্রপ-ডাউন মেনু থেকে ডিকোডিং পদ্ধতি (Base64, Hex বা UTF-8) বেছে নিন।
HTTP হেডার দেখুন
অনুরোধের HTTP হেডার ডেটা দেখতে:
- অনুরোধ টেবিলের নাম কলামের নিচে একটি অনুরোধ বেছে নিন।
- হেডার ট্যাব খুলে স্ক্রল করে সাধারণ, রেসপন্স হেডার, রিকোয়েস্ট হেডার এবং বিকল্প হিসেবে আগে থেকে ইঙ্গিত দেওয়া হেডার বিভাগে যান।
সাধারণ বিভাগে, DevTools আপনাকে প্রাপ্ত HTTP স্ট্যাটাস কোডের পাশে মানুষের পক্ষে পাঠযোগ্য স্ট্যাটাস মেসেজ দেখায়।
রেসপন্স হেডার বিভাগে, আপনি কোনও হেডার ভ্যালুর উপর মাউস নিয়ে গিয়ে এডিট করুন বোতামে ক্লিক করে স্থানীয়ভাবে রেসপন্স হেডার ওভাররাইড করতে পারবেন।
HTTP হেডার সোর্স দেখুন
ডিফল্ট হিসেবে, হেডার ট্যাবে বর্ণানুক্রমিকভাবে হেডারের নাম দেখানো হয়। HTTP হেডারের নাম যে ক্রমে পাওয়া গেছে সেই ক্রমে দেখতে:
- আপনি যে অনুরোধে আগ্রহী সেটির জন্য হেডার ট্যাব খুলুন। HTTP হেডার দেখুন বিকল্প দেখুন।
- রিকোয়েস্ট হেডার বা রেসপন্স হেডার বিভাগের পাশে সোর্স দেখুন বিকল্পে ক্লিক করুন।
প্রভিশনাল হেডার সংক্রান্ত সতর্কতা
কখনও কখনও হেডার ট্যাবে Provisional headers are shown... সতর্কতা মেসেজ দেখা যায়। এটি নিম্নলিখিত কারণে হতে পারে:
অনুরোধটি নেটওয়ার্কের মাধ্যমে পাঠানো হয়নি, তবে স্থানীয় ক্যাশে থেকে পরিবেশন করা হয়েছে, যা মূল অনুরোধের হেডার সেভ করে না। এই ক্ষেত্রে, আপনি সম্পূর্ণ অনুরোধের হেডার দেখতে ক্যাশিং বন্ধ করতে পারেন।
নেটওয়ার্ক রিসোর্স সঠিক নয়। যেমন, Console-এ
fetch("https://jec.fish.com/unknown-url/")এক্সিকিউট করুন।
নিরাপত্তা সংক্রান্ত কারণে DevTools শুধুমাত্র প্রভিশনাল হেডারও দেখাতে পারে।
অনুরোধের পেলোড দেখা
অনুরোধের পেলোড, অর্থাৎ, এর কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা দেখতে, অনুরোধ টেবিল থেকে একটি অনুরোধ বেছে নিন এবং পেলোড ট্যাব খুলুন।
পে-লোড সোর্স দেখা
ডিফল্ট হিসেবে, DevTools মানুষের-পঠনযোগ্য ফর্মে পেলোড দেখায়।
কোয়েরি স্ট্রিং প্যারামিটার ও ফর্ম ডেটার সোর্স দেখতে, পে-লোড ট্যাবে, কোয়েরি স্ট্রিং প্যারামিটার বা ফর্ম ডেটা বিভাগের পাশে সোর্স দেখুন বিকল্পে ক্লিক করুন।
URL-এনকোড করা কোয়েরি এবং ফর্ম প্যারামিটার দেখুন
ডিফল্ট হিসেবে, DevTools কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা URL-ডিকোড করা ফর্মে দেখায়। পেলোড ট্যাবে আর্গুমেন্টের জন্য URL-এনকোডিং টগল করতে, URL-এনকোড করা দেখুন বা ডিকোড করা দেখুন বিকল্পে ক্লিক করুন।
বাইনারি ও কম্প্রেস করা পেলোড দেখুন
বাইনারি বা কম্প্রেস করা অনুরোধের পেলোডের জন্য, পেলোড ট্যাবের নিচে ড্রপ-ডাউন মেনু থেকে একটি ডিকোডিং পদ্ধতি (Base64, Hex বা UTF-8) বেছে নিন।
কুকি দেখুন
অনুরোধের HTTP হেডারে পাঠানো কুকি দেখতে:
- অনুরোধ টেবিলের নাম কলাম থেকে একটি অনুরোধ বেছে নিন।
- কুকি ট্যাব খুলুন।
প্রতিটি কলামের বিবরণ দেখতে, ফিল্ড দেখুন।
কুকি পরিবর্তন করতে, কুকি দেখা, এডিট করা ও মুছে দেওয়া দেখুন।
ডিভাইস বাউন্ড সেশন দেখা
ডিভাইস বাউন্ড সেশন ট্যাবে, কোনও সাইটের সব অ্যাক্টিভ ডিভাইস বাউন্ড সেশনের জন্য বেছে নেওয়া অনুরোধের সাথে সম্পর্কিত ডিফারাল (রিফ্রেশ) তথ্য দেখানো হয়।
ডেফার (রিফ্রেশ) সংক্রান্ত তথ্য দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে একটি অনুরোধ বেছে নিন।
- ডিভাইস বাউন্ড সেশন ট্যাব খুলুন।
ডিভাইস বাউন্ড সেশন ট্যাবটি শুধুমাত্র কুকি সহ প্রাসঙ্গিক অনুরোধের জন্য দেখানো হয়। ট্যাবে সব অ্যাক্টিভ ডিভাইস বাউন্ড সেশন এবং সেশন অনুরোধটি স্থগিত করেছে কিনা (এবং যদি না হয়, কেন) তা তালিকাভুক্ত করে। সম্ভাব্য ডেফার করার বিকল্পগুলি হল:
Deferred (Refresh)Not deferred (Proactive refresh attempted)Not deferred (Request is in scope of session but proactive refresh is not possible)Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)Not deferred (Request is in scope of session but cookies are still present)Not deferred (Request is not in scope of session)
কোনও অনুরোধের টাইমিং ব্রেকডাউন দেখুন
কোনও অনুরোধের টাইমিং ব্রেকডাউন দেখতে:
- অনুরোধ টেবিলের নাম কলামে গিয়ে কোনও অনুরোধ বেছে নিন।
- টাইমিং ট্যাব খুলুন।
এই ডেটা আরও দ্রুত অ্যাক্সেস করতে সময়ের ব্রেকডাউন প্রিভিউ করুন বিকল্প দেখুন।
টাইমিং ট্যাবে আপনি যেসব ফেজ দেখতে পেতে পারেন, সেগুলির প্রত্যেকটি সম্পর্কে আরও তথ্য পেতে টাইমিং ব্রেকডাউন ফেজ সম্পর্কে ব্যাখ্যা দেখুন।
সময়ের ব্রেকডাউন প্রিভিউ করুন
অনুরোধের টাইমিং ব্রেকডাউনের প্রিভিউ দেখতে, অনুরোধ টেবিলের ওয়াটারফল কলামে অনুরোধের এন্ট্রির উপর মাউস নিয়ে যান।
এই ডেটা অ্যাক্সেস করার এমন একটি উপায় দেখুন যার জন্য মাউস নিয়ে যেতে হয় না, এর জন্য অনুরোধের সময়সীমার ব্রেকডাউন দেখুন।
টাইমিং ব্রেকডাউন ফেজ ব্যাখ্যা করা হয়েছে
টাইমিং ট্যাবে আপনি দেখতে পেতে পারেন এমন প্রতিটি পর্যায় সম্পর্কে আরও তথ্য এখানে দেওয়া হল:
- সারিতে যোগ করা হচ্ছে। কানেকশন শুরু হওয়ার আগে ব্রাউজার অনুরোধের সারি তৈরি করে এবং কখন:
- আরও বেশি অগ্রাধিকারযুক্ত অনুরোধ আছে। অনুরোধের অগ্রাধিকার রিসোর্সের ধরন এবং ডকুমেন্টে এর লোকেশনের মতো বিষয়ের উপর ভিত্তি করে নির্ধারণ করা হয়। আরও তথ্যের জন্য,
fetchpriorityগাইডের রিসোর্স সংক্রান্ত অগ্রাধিকার বিভাগ পড়ুন। - এই উৎসের জন্য আগে থেকেই ছয়টি TCP কানেকশন খোলা আছে, যা হল সীমা। (শুধুমাত্র HTTP/1.0 এবং HTTP/1.1-এর ক্ষেত্রে প্রযোজ্য।)
- ব্রাউজার ডিস্ক ক্যাশেতে অল্প সময়ের জন্য জায়গা বরাদ্দ করছে।
- আরও বেশি অগ্রাধিকারযুক্ত অনুরোধ আছে। অনুরোধের অগ্রাধিকার রিসোর্সের ধরন এবং ডকুমেন্টে এর লোকেশনের মতো বিষয়ের উপর ভিত্তি করে নির্ধারণ করা হয়। আরও তথ্যের জন্য,
- স্টল করা হয়েছে। সারি-তে বর্ণিত যেকোনও কারণে কানেকশন শুরু হওয়ার পরে অনুরোধটি আটকে যেতে পারে।
- DNS লুক-আপ। ব্রাউজার অনুরোধের IP অ্যাড্রেস সমাধান করছে।
- প্রাথমিক কানেকশন। ব্রাউজার একটি কানেকশন স্থাপন করছে, এর মধ্যে TCP হ্যান্ডশেক বা আবার চেষ্টা করা এবং SSL নেগোসিয়েট করা অন্তর্ভুক্ত।
- প্রক্সি নেগোসিয়েশন। ব্রাউজার প্রক্সি সার্ভারের সাথে অনুরোধের ব্যাপারে আলোচনা করছে।
- অনুরোধ পাঠানো হয়েছে। অনুরোধ পাঠানো হচ্ছে।
- ServiceWorker প্রস্তুতি। ব্রাউজার সার্ভিস ওয়ার্কার চালু করছে।
- ServiceWorker-এর কাছে অনুরোধ। অনুরোধটি পরিষেবা কর্মীর কাছে পাঠানো হচ্ছে।
- অপেক্ষা করা হচ্ছে (TTFB)। ব্রাউজার উত্তরের প্রথম বাইটের জন্য অপেক্ষা করছে। TTFB-এর সম্পূর্ণ নাম হল Time To First Byte. এই সময়ের মধ্যে ১টি রাউন্ড ট্রিপের লেটেন্সি এবং সার্ভারের উত্তর তৈরি করতে যতটা সময় লেগেছে তা অন্তর্ভুক্ত।
- কন্টেন্ট ডাউনলোড করা। ব্রাউজার, নেটওয়ার্ক বা পরিষেবা কর্মী থেকে সরাসরি উত্তর পাচ্ছে। এই ভ্যালু হল রেসপন্স বডি পড়তে মোট যত সময় লেগেছে। প্রত্যাশিত মানের চেয়ে বেশি ভ্যালু থাকলে বুঝতে হবে যে নেটওয়ার্কের স্পিড কম অথবা ব্রাউজার অন্য কাজ করছে বলে উত্তর পেতে দেরি হচ্ছে।
ইনিশিয়েটর এবং ডিপেন্ডেন্সি দেখুন
অনুরোধের ইনিশিয়েটর ও ডিপেন্ডেন্সি দেখতে, Shift কীটি ধরে রেখে অনুরোধের সারণীতে অনুরোধের উপরে মাউস নিয়ে যান। DevTools ইনিশিয়েটরকে সবুজ এবং ডিপেন্ডেন্সি লাল রঙে দেখায়।
অনুরোধ টেবিলটি কালানুক্রমিকভাবে সাজানো হলে, আপনি যে অনুরোধের উপরে মাউস নিয়ে যাচ্ছেন তার উপরে প্রথম সবুজ অনুরোধটি হল নির্ভরতার সূচনাকারী। এর উপরে যদি অন্য কোনও সবুজ রঙের অনুরোধ থাকে, তাহলে সেই উচ্চতর অনুরোধটি হল ইনিশিয়েটরের ইনিশিয়েটর। এবং আরও অনেক কিছু।
লোড ইভেন্ট দেখুন
DevTools নেটওয়ার্ক প্যানেলের একাধিক জায়গায় DOMContentLoaded এবং load ইভেন্টের সময় দেখায়। DOMContentLoaded ইভেন্টটি নীল রঙের এবং load ইভেন্টটি লাল রঙের।
মোট অনুরোধের সংখ্যা দেখুন
নেটওয়ার্ক প্যানেলের নিচে স্ট্যাটাস বারে মোট অনুরোধের সংখ্যা তালিকাভুক্ত করা আছে।
ট্রান্সফার ও লোড করা রিসোর্সের মোট সাইজ দেখুন
DevTools, নেটওয়ার্ক প্যানেলের নিচে স্ট্যাটাস বারে ট্রান্সফার ও লোড করা (আনকমপ্রেসড) রিসোর্সের মোট সাইজ দেখায়।
ব্রাউজার রিসোর্স আনকমপ্রেস করার পরে সেটি কতটা বড় হয় তা দেখতে রিসোর্সের আনকমপ্রেস করা সাইজ দেখুন বিকল্প দেখুন।
অনুরোধের কারণ হিসেবে স্ট্যাক ট্রেস দেখুন
JavaScript স্টেটমেন্টের কারণে কোনও রিসোর্সের অনুরোধ করা হলে, ইনিশিয়েটর কলামের উপর মাউস নিয়ে গিয়ে অনুরোধের আগে পর্যন্ত স্ট্যাক ট্রেস দেখুন।
রিসোর্সের আনকমপ্রেসড সাইজ দেখা
সেটিংস 
> বড় অনুরোধের সারি বিকল্প বেছে নিন এবং তারপরে সাইজ কলামের নিচের ভ্যালু দেখুন।
এই উদাহরণে, নেটওয়ার্কের মাধ্যমে পাঠানো www.google.com ডকুমেন্টের কম্প্রেস করা সাইজ হল
43.8 KB, যেখানে আনকম্প্রেস করা সাইজ হল 136 KB।
অনুরোধের ডেটা এক্সপোর্ট করুন
আপনি ফিল্টার প্রয়োগ করে অনুরোধের তালিকা এক্সপোর্ট বা কপি করতে পারবেন, যা নিচে বিভিন্ন উপায়ে বর্ণনা করা হয়েছে।
HAR ফাইলে সব নেটওয়ার্ক অনুরোধ সেভ করুন
HAR (HTTP আর্কাইভ) হল একটি ফাইল ফর্ম্যাট যা ক্যাপচার করা ডেটা এক্সপোর্ট করার জন্য একাধিক HTTP সেশন টুল ব্যবহার করে। ফর্ম্যাট হল নির্দিষ্ট ফিল্ডের সেট সহ একটি JSON অবজেক্ট।
সংবেদনশীল তথ্য দুর্ঘটনাবশত ফাঁস হয়ে যাওয়ার সম্ভাবনা কমাতে, ডিফল্ট হিসেবে আপনি HAR ফর্ম্যাটে "স্যানিটাইজ করা" নেটওয়ার্ক লগ এক্সপোর্ট করতে পারবেন, যার মধ্যে Cookie, Set-Cookie ও Authorization হেডার সহ সংবেদনশীল তথ্য থাকে না। প্রয়োজন হলে, আপনি সংবেদনশীল ডেটা সহ লগ এক্সপোর্ট করতে পারবেন।
HAR ফাইলে সব নেটওয়ার্ক অনুরোধ সেভ করতে, দু'টি পদ্ধতির মধ্যে একটি বেছে নিন:
অনুরোধ টেবিলে যেকোনও অনুরোধের উপর ডানদিকের বোতামে ক্লিক করুন এবং কপি করুন > HAR (স্যানিটাইজ করা) হিসেবে সব [তালিকাভুক্ত] সেভ করুন অথবা HAR (সংবেদনশীল ব্যক্তিগত তথ্য সহ) হিসেবে সব [তালিকাভুক্ত] সেভ করুন বিকল্প বেছে নিন।
Network প্যানেলের উপরে অ্যাকশন বারে HAR এক্সপোর্ট করুন (স্যানিটাইজ করা)... বিকল্পে ক্লিক করুন।
সংবেদনশীল ডেটা সহ এক্সপোর্ট করতে, প্রথমে সেটিংস > পছন্দ > নেটওয়ার্ক > সংবেদনশীল ডেটা সহ HAR তৈরি করার অনুমতি দিন বিকল্প চালু করুন, তারপর এক্সপোর্ট করুন বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে HAR এক্সপোর্ট করুন (সংবেদনশীল ডেটা সহ) বিকল্প বেছে নিন।
আপনার কাছে HAR ফাইল থাকলে, আপনি দুটি উপায়ে বিশ্লেষণ করার জন্য এটি DevTools-এ আবার ইমপোর্ট করতে পারবেন:
- HAR ফাইলটি টেনে এনে অনুরোধ টেবিলে রাখুন।
- নেটওয়ার্ক প্যানেলের উপরে অ্যাকশন বারে HAR ইমপোর্ট করুন বিকল্পে ক্লিক করুন।
অনুরোধ, অনুরোধের ফিল্টার করা সেট বা সবকটি ক্লিপবোর্ডে কপি করুন
অনুরোধ টেবিলের নাম কলামের নিচে, কোনও অনুরোধের উপর মাউস নিয়ে গিয়ে ডানদিকের বোতামে ক্লিক করুন, কপি করুন বিকল্পের উপর মাউস নিয়ে যান এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন।
একটি অনুরোধ, তার উত্তর বা স্ট্যাক ট্রেস কপি করতে:
- URL কপি করুন। অনুরোধের URL ক্লিপবোর্ডে কপি করুন।
- cURL হিসেবে কপি করুন। cURL কমান্ড হিসেবে অনুরোধ কপি করুন।
- PowerShell হিসেবে কপি করুন। PowerShell কমান্ড হিসেবে অনুরোধটি কপি করুন।
- ফেচ হিসেবে কপি করুন। ফেচ কল হিসেবে অনুরোধ কপি করুন।
- ফেচ হিসেবে কপি করুন (Node.js)। Node.js ফেচ কল হিসেবে অনুরোধ কপি করুন।
- প্রিলোড এলিমেন্ট হিসেবে কপি করুন। অনুরোধটি
<link rel="preload">HTML ট্যাগ হিসেবে কপি করুন। - উত্তর কপি করুন। ক্লিপবোর্ডে উত্তরের মূল অংশ কপি করুন।
- স্ট্যাক ট্রেস কপি করুন। অনুরোধের স্ট্যাক ট্র্যাক ক্লিপবোর্ডে কপি করুন।
সব অনুরোধ কপি করতে:
- সব URL কপি করুন। ক্লিপবোর্ডে সব অনুরোধের URL কপি করুন।
- cURL হিসেবে সব কপি করুন। cURL কমান্ডের চেন হিসেবে সব অনুরোধ কপি করুন।
- সবকটি PowerShell হিসেবে কপি করুন। PowerShell কমান্ডের চেইন হিসেবে সব অনুরোধ কপি করুন।
- ফেচ হিসেবে সব কপি করুন। ফেচ কলের চেন হিসেবে সব অনুরোধ কপি করুন।
- সব ফেচ (Node.js) হিসেবে কপি করুন। Node.js ফেচ কলের চেইন হিসেবে সব অনুরোধ কপি করুন।
- সব HAR (স্যানিটাইজ করা) হিসেবে কপি করুন।
Cookie,Set-CookieএবংAuthorizationহেডারের মতো সংবেদনশীল ব্যক্তিগত তথ্য বাদ দিয়ে সব অনুরোধ HAR ডেটা হিসেবে কপি করুন। - সব ডেটাকে HAR (সংবেদনশীল ব্যক্তিগত তথ্য সহ) হিসেবে কপি করুন। সংবেদনশীল ডেটা সহ সব অনুরোধ HAR ডেটা হিসেবে কপি করুন।
অনুরোধের ফিল্টার করা সেট কপি করতে, নেটওয়ার্ক লগে ফিল্টার প্রয়োগ করুন, কোনও অনুরোধে ডানদিকের বোতামে ক্লিক করুন এবং বেছে নিন:
- তালিকাভুক্ত সব URL কপি করুন। ক্লিপবোর্ডে ফিল্টার করা সব অনুরোধের URL কপি করুন।
- তালিকায় দেখানো সব অনুরোধ cURL হিসেবে কপি করুন। cURL কমান্ডের চেইন হিসেবে সব ফিল্টার করা অনুরোধ কপি করুন।
- PowerShell হিসেবে তালিকাভুক্ত সবকিছু কপি করুন। ফিল্টার করা সব অনুরোধ PowerShell কমান্ডের চেন হিসেবে কপি করুন।
- তালিকাভুক্ত সব আইটেম ফেচ হিসেবে কপি করুন। ফেচ কলের চেইন হিসেবে সব ফিল্টার করা অনুরোধ কপি করুন।
- তালিকাভুক্ত সব অনুরোধ fetch (Node.js) হিসেবে কপি করুন। Node.js ফেচ কলের চেন হিসেবে সব ফিল্টার করা অনুরোধ কপি করুন।
- HAR (স্যানিটাইজ করা হয়েছে) হিসেবে তালিকাভুক্ত সবকটি কপি করুন।
Cookie,Set-CookieওAuthorizationহেডারের মতো সংবেদনশীল ব্যক্তিগত তথ্য বাদ দিয়ে HAR ডেটা হিসেবে সব ফিল্টার করা অনুরোধ কপি করুন। - তালিকাভুক্ত সব HAR (সংবেদনশীল ব্যক্তিগত তথ্য সহ) হিসেবে কপি করুন। সংবেদনশীল ডেটা সহ সব ফিল্টার করা অনুরোধ HAR ডেটা হিসেবে কপি করুন।
Network প্যানেলের লেআউট পরিবর্তন করুন
আপনার কাছে গুরুত্বপূর্ণ বিষয়গুলিতে ফোকাস করতে নেটওয়ার্ক প্যানেল UI-এর বিভাগগুলি বড় বা ছোট করুন।
'ফিল্টার' অ্যাকশন বার লুকানো
ডিফল্ট হিসেবে, DevTools নেটওয়ার্ক প্যানেলের উপরে ফিল্টার বার দেখায়। এটি লুকাতে ফিল্টার করুন বিকল্পে ক্লিক করুন।
বড় অনুরোধের লাইন ব্যবহার করুন
আপনার নেটওয়ার্ক অনুরোধের টেবিলে আরও হোয়াইটস্পেস চাইলে বড় সারি ব্যবহার করুন। এছাড়াও, বড় সারি ব্যবহার করার সময় কিছু কলাম আরও একটু বেশি তথ্য প্রদান করে। যেমন, সাইজ কলামের নিচের ভ্যালু হল কোনও অনুরোধের আনকমপ্রেসড সাইজ এবং অগ্রাধিকার কলামে প্রাথমিক (নিচের ভ্যালু) এবং চূড়ান্ত (উপরের ভ্যালু) ফেচ করার অগ্রাধিকার দেখানো হয়।
সেটিংস 
খুলুন এবং বড় সারি দেখতে বড় অনুরোধের সারি বিকল্পে ক্লিক করুন।
ওভারভিউ ট্র্যাক লুকানো
ডিফল্ট হিসেবে, DevTools এক নজরে ট্র্যাক দেখায়। সেটিংস 
খুলুন এবং এটি লুকানোর জন্য ওভারভিউ দেখুন চেকবক্স থেকে টিকচিহ্ন সরিয়ে দিন।
