Chrome DevTools-এর নেটওয়ার্ক অ্যানালাইসিস ফিচারগুলোর এই বিশদ রেফারেন্সের মাধ্যমে আপনার পেজ কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন উপায়গুলো জানুন।
নেটওয়ার্ক অনুরোধ রেকর্ড করুন
ডিফল্টরূপে, DevTools খোলা থাকা অবস্থায় নেটওয়ার্ক প্যানেলে সমস্ত নেটওয়ার্ক অনুরোধ রেকর্ড করে।
নেটওয়ার্ক অনুরোধ রেকর্ড করা বন্ধ করুন
রেকর্ডিং অনুরোধ বন্ধ করতে:
- নেটওয়ার্ক লগ রেকর্ডিং বন্ধ করতে ক্লিক করুন
নেটওয়ার্ক প্যানেলে। এটি ধূসর হয়ে যায়, যা নির্দেশ করে যে DevTools আর অনুরোধ রেকর্ড করছে না। - নেটওয়ার্ক প্যানেল ফোকাসে থাকা অবস্থায় Command > + E (Mac) অথবা Control + E (Windows, Linux) চাপুন।
স্পষ্ট অনুরোধ
ক্লিয়ার ক্লিক করুন 
রিকোয়েস্ট টেবিল থেকে সমস্ত অনুরোধ মুছে ফেলার জন্য নেটওয়ার্ক প্যানেলে যান।
পৃষ্ঠা লোড হওয়ার সাথে সাথে অনুরোধগুলি সংরক্ষণ করুন
পেজ লোডের সময় অনুরোধগুলি সংরক্ষণ করতে, নেটওয়ার্ক প্যানেলে থাকা ‘প্রিজার্ভ লগ’ চেকবক্সটি চেক করুন। আপনি ‘প্রিজার্ভ লগ’ নিষ্ক্রিয় না করা পর্যন্ত ডেভটুলস সমস্ত অনুরোধ সংরক্ষণ করে রাখে।
পৃষ্ঠা লোড হওয়ার সময় স্ক্রিনশট নিন
আপনার পেজ লোড হওয়ার জন্য অপেক্ষা করার সময় ব্যবহারকারীরা কী দেখেন, তা বিশ্লেষণ করতে স্ক্রিনশট নিন।
স্ক্রিনশট চালু করতে, সেটিংস খুলুন। 
নেটওয়ার্ক প্যানেলের ভিতরে গিয়ে ‘ক্যাপচার স্ক্রিনশট’ চেক করুন।
স্ক্রিনশট নেওয়ার জন্য, নেটওয়ার্ক প্যানেলটি ফোকাসে থাকা অবস্থায় পেজটি রিলোড করুন।
একবার ক্যাপচার করা হয়ে গেলে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারেন:
- স্ক্রিনশটটি ঠিক কোন মুহূর্তে তোলা হয়েছিল তা দেখতে সেটির উপর মাউস রাখুন। ওভারভিউ টাইমলাইনে একটি হলুদ রেখা দেখা যাবে।
- স্ক্রিনশটটি তোলার পরে হওয়া যেকোনো অনুরোধ ফিল্টার করে বাদ দিতে, স্ক্রিনশটটির থাম্বনেইলে ক্লিক করুন।
- কোনো থাম্বনেইল জুম করতে সেটিতে ডাবল-ক্লিক করুন।
XHR অনুরোধের উত্তর দিন
একটি XHR অনুরোধ পুনরায় চালাতে, Requests টেবিলে নিম্নলিখিতগুলির মধ্যে একটি করুন:
- অনুরোধটি নির্বাচন করুন এবং R চাপুন।
- অনুরোধটির উপর রাইট-ক্লিক করুন এবং Replay XHR নির্বাচন করুন।
লোডিং আচরণ পরিবর্তন করুন
ব্রাউজার ক্যাশে নিষ্ক্রিয় করে একজন প্রথমবার পরিদর্শকের মতো আচরণ করুন।
প্রথমবার ব্যবহারকারী আপনার সাইটে যে অভিজ্ঞতা লাভ করেন, তা অনুকরণ করতে ‘Disable cache’ চেকবক্সটি চেক করুন। DevTools ব্রাউজার ক্যাশে নিষ্ক্রিয় করে দেয়। এটি প্রথমবার ব্যবহারকারীর অভিজ্ঞতাকে আরও সঠিকভাবে অনুকরণ করে, কারণ বারবার ভিজিট করার সময় অনুরোধগুলো ব্রাউজার ক্যাশে থেকেই পূরণ করা হয়।
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে নিষ্ক্রিয় করুন।
অন্যান্য ডেভটুলস প্যানেলে কাজ করার সময় যদি আপনি ক্যাশে নিষ্ক্রিয় করতে চান, তাহলে নেটওয়ার্ক কন্ডিশনস ড্রয়ারটি ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ারটি খোলার জন্য আইকনটি ব্যবহার করুন। - Disable cache চেকবক্সটি চেক করুন অথবা আনচেক করুন।
ম্যানুয়ালি ব্রাউজার ক্যাশে পরিষ্কার করুন
যেকোনো সময় ম্যানুয়ালি ব্রাউজার ক্যাশ পরিষ্কার করতে, Requests টেবিলের যেকোনো জায়গায় রাইট-ক্লিক করুন এবং Clear browser cache নির্বাচন করুন।
অফলাইন অনুকরণ করুন
প্রগ্রেসিভ ওয়েব অ্যাপস (Progressive Web Apps) নামে এক নতুন শ্রেণীর ওয়েব অ্যাপ রয়েছে, যা সার্ভিস ওয়ার্কারের (service workers) সাহায্যে অফলাইনেও কাজ করতে পারে। এই ধরনের অ্যাপ তৈরি করার সময়, ডেটা সংযোগবিহীন একটি ডিভাইসকে দ্রুত অনুকরণ (implicated) করতে পারাটা বেশ সুবিধাজনক।
সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতা অনুকরণ করতে, 'Disable cache' চেকবক্সের পাশে থাকা 'Network throttling' ড্রপ-ডাউন মেনু থেকে 'Offline' নির্বাচন করুন।
অফলাইন চালু আছে, তা মনে করিয়ে দেওয়ার জন্য DevTools নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কীকরণ আইকন প্রদর্শন করে।
ধীরগতির নেটওয়ার্ক সংযোগ অনুকরণ করুন
দ্রুত 4G, ধীর 4G, বা 3G অনুকরণ করতে, উপরের অ্যাকশন বারে থাকা থ্রটলিং ড্রপ-ডাউন মেনু থেকে সংশ্লিষ্ট প্রিসেটটি নির্বাচন করুন।
থ্রটলিং চালু আছে, তা মনে করিয়ে দেওয়ার জন্য DevTools নেটওয়ার্ক প্যানেলের পাশে একটি আইকন প্রদর্শন করে।
কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন
ধীর বা দ্রুত 4G-এর মতো প্রিসেটগুলির পাশাপাশি, আপনি আপনার নিজস্ব কাস্টম থ্রটলিং প্রোফাইলও যোগ করতে পারেন:
- থ্রটলিং মেনুটি খুলুন এবং কাস্টম > যোগ করুন... নির্বাচন করুন।
- > থ্রটলিং- এ বর্ণিত পদ্ধতি অনুযায়ী একটি নতুন থ্রটলিং প্রোফাইল সেট আপ করুন।
নেটওয়ার্ক প্যানেলে ফিরে এসে, থ্রটলিং ড্রপ-ডাউন মেনু থেকে আপনার নতুন প্রোফাইলটি নির্বাচন করুন।
ডেভটুলস একটি প্রদর্শন করে 
থ্রটলিং চালু আছে, তা মনে করিয়ে দেওয়ার জন্য নেটওয়ার্ক প্যানেলের পাশে একটি সতর্কীকরণ আইকন থাকে।
থ্রটল ওয়েবসকেট সংযোগ
HTTP অনুরোধের পাশাপাশি, DevTools সংস্করণ ৯৯ থেকে WebSocket সংযোগের গতিও নিয়ন্ত্রণ করে।
WebSocket থ্রটলিং পর্যবেক্ষণ করতে:
- একটি নতুন সংযোগ শুরু করুন, উদাহরণস্বরূপ, একটি পরীক্ষা সরঞ্জাম ব্যবহার করে।
- নেটওয়ার্ক প্যানেলে, ‘নো থ্রটলিং’ নির্বাচন করুন এবং সংযোগের মাধ্যমে একটি বার্তা পাঠান।
- একটি খুব ধীরগতির কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন, যেমন,
10 kbit/s। এই ধরনের একটি ধীরগতির প্রোফাইল আপনাকে পার্থক্যটি বুঝতে সাহায্য করবে। - নেটওয়ার্ক প্যানেলে প্রোফাইলটি নির্বাচন করুন এবং আরেকটি বার্তা পাঠান।
- WS ফিল্টারটি টগল করুন, আপনার কানেকশনের নামে ক্লিক করুন, Messages ট্যাবটি খুলুন এবং থ্রটলিং চালু ও বন্ধ থাকা অবস্থায় পাঠানো ও প্রতিধ্বনিত হওয়া মেসেজগুলোর মধ্যে সময়ের পার্থক্য পরীক্ষা করুন। উদাহরণস্বরূপ:
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ধীরগতির নেটওয়ার্ক সংযোগ অনুকরণ করুন।
অন্যান্য DevTools প্যানেলে কাজ করার সময় যদি আপনি নেটওয়ার্ক সংযোগের গতি কমাতে চান, তাহলে নেটওয়ার্ক কন্ডিশনস ড্রয়ারটি ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ারটি খোলার জন্য আইকনটি ব্যবহার করুন। - নেটওয়ার্ক থ্রটলিং মেনু থেকে সংযোগের গতি নির্বাচন করুন।
ব্রাউজার কুকি ম্যানুয়ালি মুছে ফেলুন
যেকোনো সময় ম্যানুয়ালি ব্রাউজার কুকি মুছে ফেলার জন্য, Requests টেবিলের যেকোনো জায়গায় রাইট-ক্লিক করুন এবং Clear browser cookies নির্বাচন করুন।
HTTP প্রতিক্রিয়া হেডারগুলি ওভাররাইড করুন
স্থানীয়ভাবে ফাইল এবং HTTP প্রতিক্রিয়া হেডার ওভাররাইড করুন ।
ব্যবহারকারী এজেন্টকে ওভাররাইড করুন
ইউজার এজেন্টকে ম্যানুয়ালি ওভাররাইড করতে:
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ারটি খোলার জন্য আইকনটি ব্যবহার করুন। - স্বয়ংক্রিয়ভাবে নির্বাচন বাতিল করুন।
- মেনু থেকে একটি ইউজার এজেন্ট বিকল্প বেছে নিন, অথবা বক্সে নিজের পছন্দমতো একটি লিখুন।
অনুসন্ধানের অনুরোধ
অনুরোধ হেডার, পেলোড এবং প্রতিক্রিয়া জুড়ে অনুসন্ধান করতে:
ডানদিকে সার্চ ট্যাবটি খুলতে নিম্নলিখিত শর্টকাটটি চাপুন:
- macOS-এ, Command + F ।
- উইন্ডোজ বা লিনাক্সে, কন্ট্রোল + এফ চাপুন।
সার্চ ট্যাবে আপনার কোয়েরি লিখে এন্টার চাপুন। ঐচ্ছিকভাবে, কেস সেনসিটিভিটি বা রেগুলার এক্সপ্রেশন চালু করতে যথাক্রমে বা ক্লিক করুন।
অনুসন্ধানের ফলাফলগুলোর মধ্যে একটিতে ক্লিক করুন। নেটওয়ার্ক প্যানেলটি মিলে যাওয়া অনুরোধটিকে হলুদ রঙে হাইলাইট করে। এছাড়াও, প্যানেলটি হেডার বা রেসপন্স ট্যাবটি খোলে এবং সেখানে মিলে যাওয়া স্ট্রিংটি (যদি থাকে) হাইলাইট করে।
অনুসন্ধানের ফলাফল রিফ্রেশ করতে, -এ ক্লিক করুন। ফলাফল মুছে ফেলতে, ক্লিক করুন।
DevTools-এ আপনি যে সমস্ত উপায়ে অনুসন্ধান করতে পারেন সে সম্পর্কে আরও তথ্যের জন্য, "অনুসন্ধান: লোড করা সমস্ত রিসোর্স জুড়ে টেক্সট খুঁজুন" দেখুন।
অনুরোধ ফিল্টার করুন
বৈশিষ্ট্য অনুসারে অনুরোধগুলি ফিল্টার করুন
ডোমেইন বা অনুরোধের আকারের মতো বৈশিষ্ট্য অনুযায়ী অনুরোধগুলি ফিল্টার করতে ফিল্টার বক্সটি ব্যবহার করুন।
আপনি যদি বক্সটি দেখতে না পান, তাহলে সম্ভবত ফিল্টার বারটি লুকানো আছে। ফিল্টার বার লুকান দেখুন।
আপনার ফিল্টারটি উল্টানোর জন্য, ফিল্টার বক্সের পাশে থাকা ইনভার্ট চেকবক্সটিতে টিক দিন।
আপনি প্রতিটি প্রপার্টিকে একটি স্পেস দিয়ে আলাদা করে একই সাথে একাধিক প্রপার্টি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, 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 overrides কলামটি যোগ করতে পারেন। -
has-response-header. নির্দিষ্ট HTTP রেসপন্স হেডার ধারণকারী রিসোর্সগুলো দেখান। DevTools তার সম্মুখীন হওয়া সমস্ত রেসপন্স হেডার দিয়ে অটোকমপ্লিট ড্রপ-ডাউনটি পূরণ করে। -
WebSocketরিসোর্স খুঁজে পেতেisis: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. Issues ট্যাবে আসল Set-Cookie হেডারগুলো দেখান। ভুলSet-Cookieহেডারযুক্ত ত্রুটিপূর্ণ কুকিগুলো Network প্যানেলে চিহ্নিত করা হবে। -
scheme। অসুরক্ষিত HTTP (scheme:http) বা সুরক্ষিত HTTPS (scheme:https) এর মাধ্যমে প্রাপ্ত রিসোর্সগুলি দেখান। -
set-cookie-domain. সেই রিসোর্সগুলি দেখান যেগুলির একটিSet-Cookieহেডার আছে এবং যারDomainঅ্যাট্রিবিউটটি নির্দিষ্ট মানের সাথে মেলে। DevTools তার সম্মুখীন হওয়া সমস্ত কুকি ডোমেইন দিয়ে অটোকমপ্লিটটি পূরণ করে। -
set-cookie-name. সেই রিসোর্সগুলো দেখান যেগুলোরSet-Cookieহেডারে নির্দিষ্ট মানের সাথে মেলে এমন নাম রয়েছে। DevTools তার সম্মুখীন হওয়া সমস্ত কুকির নাম দিয়ে অটোকমপ্লিট পূরণ করে। -
set-cookie-value. সেই রিসোর্সগুলো দেখান যেগুলোরSet-Cookieহেডারে নির্দিষ্ট মানের সাথে মেলে এমন একটি মান রয়েছে। DevTools তার সম্মুখীন হওয়া সমস্ত কুকি মান দিয়ে অটোকমপ্লিটটি পূরণ করে। -
status-code। শুধুমাত্র সেইসব রিসোর্স দেখান যাদের HTTP স্ট্যাটাস কোড নির্দিষ্ট কোডের সাথে মেলে। DevTools তার সম্মুখীন হওয়া সমস্ত স্ট্যাটাস কোড দিয়ে অটোকমপ্লিট ড্রপ-ডাউন মেনুটি পূরণ করে। -
url. সেই রিসোর্সগুলো দেখান যাদেরurlনির্দিষ্ট মানের সাথে মেলে।
প্রকার অনুসারে অনুরোধ ফিল্টার করুন
রিসোর্স টাইপ অনুযায়ী অনুরোধ ফিল্টার করতে, নেটওয়ার্ক প্যানেলে থাকা All , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket), Wasm (WebAssembly), Manifest , অথবা Other (এখানে তালিকাভুক্ত নয় এমন অন্য যেকোনো প্রকার) বাটনগুলোতে ক্লিক করুন।
আপনি যদি এই বাটনগুলো দেখতে না পান, তাহলে সম্ভবত ফিল্টার অ্যাকশন বারটি লুকানো আছে। ফিল্টার বার লুকানো দেখুন।
একই সাথে একাধিক ধরণের রিসোর্স দেখানোর জন্য, Command (Mac) বা Control (Windows, Linux) চেপে ধরে একাধিক টাইপ ফিল্টারে ক্লিক করুন।
সময় অনুযায়ী অনুরোধ ফিল্টার করুন
ওভারভিউ টাইমলাইনে বাম বা ডান দিকে টেনে শুধুমাত্র সেই সময়সীমার মধ্যে সক্রিয় থাকা অনুরোধগুলো প্রদর্শন করুন। ফিল্টারটি অন্তর্ভুক্তিমূলক। হাইলাইট করা সময়ে সক্রিয় থাকা যেকোনো অনুরোধ দেখানো হয়।
ডেটা ইউআরএল লুকান
ডেটা ইউআরএল হলো অন্যান্য ডকুমেন্টের মধ্যে এমবেড করা ছোট ফাইল। রিকোয়েস্টস টেবিলে আপনি যে কোনো অনুরোধ দেখেন যা data: দিয়ে শুরু হয়, সেটিই একটি ডেটা ইউআরএল।
এই অনুরোধগুলি লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ডেটা ইউআরএল লুকান নির্বাচন করুন।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
এক্সটেনশন ইউআরএল লুকান
আপনার লেখা কোডের উপর মনোযোগ কেন্দ্রীভূত করতে, আপনি ক্রোমে ইনস্টল করা এক্সটেনশনগুলো থেকে পাঠানো অপ্রাসঙ্গিক অনুরোধগুলো ফিল্টার করে বাদ দিতে পারেন। এক্সটেনশনের অনুরোধগুলোর URL chrome-extension:// দিয়ে শুরু হয়।
এক্সটেনশন অনুরোধগুলি লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার নির্বাচন করুন > এক্সটেনশন ইউআরএল লুকান টিক দিন।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
শুধুমাত্র ব্লক করা প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখান
যেকোনো কারণে রেসপন্স কুকি ব্লক করা অনুরোধগুলো ছাড়া বাকি সবকিছু ফিল্টার করে বাদ দিতে, ফিল্টার অ্যাকশন বারে, ‘More filters’ নির্বাচন করুন > ‘Blocked response cookies’ ।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
একটি রেসপন্স কুকি কেন ব্লক করা হয়েছিল তার কারণ জানতে, রিকোয়েস্টটি সিলেক্ট করুন, এর কুকিজ ট্যাবটি খুলুন এবং আইকনটির উপর মাউস রাখুন।
এছাড়াও, ক্রোম ফ্ল্যাগ বা কনফিগারেশনের কারণে কুকি ব্লক করা থাকলে, নেটওয়ার্ক প্যানেলে সেই রিকোয়েস্টের পাশে একটি আইকন দেখা যায়। আইকনটির উপর মাউস রাখলে একটি ক্লু সহ টুলটিপ দেখা যাবে এবং আরও তথ্যের জন্য ইস্যু প্যানেলে যেতে এটিতে ক্লিক করুন।
শুধুমাত্র ব্লক করা অনুরোধগুলি দেখান
ব্লক করা অনুরোধগুলি ছাড়া বাকি সবকিছু ফিল্টার করে বাদ দিতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ব্লক করা অনুরোধ নির্বাচন করুন। এটি পরীক্ষা করার জন্য, আপনি ড্রয়ারে থাকা নেটওয়ার্ক অনুরোধ ব্লকিং ট্যাবটি ব্যবহার করতে পারেন।
রিকোয়েস্ট টেবিলে ব্লক করা রিকোয়েস্টগুলো লাল রঙে হাইলাইট করা হয়। নিচের স্ট্যাটাস বারটি মোট রিকোয়েস্টের মধ্যে প্রদর্শিত রিকোয়েস্টের সংখ্যা দেখায়।
শুধুমাত্র তৃতীয় পক্ষের অনুরোধগুলি দেখান
পেজের অরিজিন থেকে ভিন্ন অরিজিনের রিকোয়েস্টগুলো ছাড়া বাকি সবকিছু ফিল্টার করে বাদ দিতে, ফিল্টার অ্যাকশন বারে, ‘More filters’ > ‘3rd-party requests’ সিলেক্ট করুন।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
অনুরোধ বাছাই করুন
ডিফল্টরূপে, Requests টেবিলের অনুরোধগুলি শুরুর সময় অনুসারে সাজানো থাকে, কিন্তু আপনি অন্যান্য মানদণ্ড ব্যবহার করেও টেবিলটি সাজাতে পারেন।
কলাম অনুসারে সাজান
Requests টেবিলের যেকোনো কলামের হেডারে ক্লিক করে সেই কলাম অনুযায়ী অনুরোধগুলো সাজানো যাবে।
কার্যকলাপের পর্যায় অনুসারে সাজান
ওয়াটারফল যেভাবে অনুরোধগুলো সাজায় তা পরিবর্তন করতে, রিকোয়েস্টস টেবিলের হেডারে রাইট-ক্লিক করুন, ওয়াটারফল- এর উপর মাউস রাখুন এবং নিচের অপশনগুলোর মধ্যে একটি বেছে নিন:
- শুরুর সময় । প্রথম যে অনুরোধটি শুরু করা হয়েছিল, সেটি সবার উপরে রয়েছে।
- প্রতিক্রিয়া সময় । যে প্রথম অনুরোধটি ডাউনলোড হওয়া শুরু করেছে, সেটি তালিকার শীর্ষে রয়েছে।
- শেষ সময় । যে অনুরোধটি প্রথমে শেষ হয়েছে, সেটি তালিকার শীর্ষে রয়েছে।
- মোট সময়কাল । যে অনুরোধটির সংযোগ স্থাপন এবং অনুরোধ/প্রতিক্রিয়া সময় সবচেয়ে কম, সেটি তালিকার শীর্ষে রয়েছে।
- লেটেন্সি । যে অনুরোধটি প্রতিক্রিয়ার জন্য সবচেয়ে কম সময় অপেক্ষা করেছে, সেটি তালিকার শীর্ষে রয়েছে।
এই বিবরণগুলো ধরে নেয় যে প্রতিটি বিকল্প ছোট থেকে বড় ক্রমে সাজানো আছে। 'ওয়াটারফল ' কলামের শিরোনামে ক্লিক করলে ক্রমটি উল্টে যায়।
এই উদাহরণে, ওয়াটারফলটি মোট সময়কাল অনুসারে সাজানো হয়েছে। প্রতিটি বারের হালকা অংশটি হলো অপেক্ষায় ব্যয়িত সময়। গাঢ় অংশটি হলো বাইট ডাউনলোড করতে ব্যয়িত সময়।
অনুরোধ বিশ্লেষণ করুন
যতক্ষণ DevTools খোলা থাকে, এটি নেটওয়ার্ক প্যানেলে সমস্ত অনুরোধ লগ করে রাখে। অনুরোধগুলো বিশ্লেষণ করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন।
অনুরোধের লগ দেখুন
DevTools খোলা থাকা অবস্থায় করা সমস্ত অনুরোধের লগ দেখতে Requests টেবিলটি ব্যবহার করুন। অনুরোধগুলির উপর ক্লিক করলে বা মাউস রাখলে সেগুলির বিষয়ে আরও তথ্য পাওয়া যায়।
Requests টেবিলটি ডিফল্টরূপে নিম্নলিখিত কলামগুলি প্রদর্শন করে:
- নাম । রিসোর্সটির ফাইলের নাম বা শনাক্তকারী।
অবস্থা । এই কলামটি নিম্নলিখিত মানগুলি দেখাতে পারে:
- HTTP স্ট্যাটাস কোড, যেমন,
200বা404। - ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) এর কারণে অনুরোধগুলি ব্যর্থ হওয়ায়
CORS error। - ভুলভাবে কনফিগার করা হেডারযুক্ত অনুরোধগুলির জন্য
(blocked:origin)। কী ভুল হয়েছে সে সম্পর্কে ইঙ্গিতসহ একটি টুলটিপ দেখতে এই স্ট্যাটাস ভ্যালুটির উপর মাউস রাখুন। -
(failed)এবং এর পরে ত্রুটি বার্তা।
- HTTP স্ট্যাটাস কোড, যেমন,
ধরণ । অনুরোধকৃত রিসোর্সের MIME ধরণ।
প্রবর্তক । নিম্নলিখিত অবজেক্ট বা প্রসেসগুলো অনুরোধ শুরু করতে পারে:
- পার্সার । ক্রোমের এইচটিএমএল পার্সার।
- পুনঃনির্দেশ । একটি HTTP পুনঃনির্দেশ।
- স্ক্রিপ্ট . একটি জাভাস্ক্রিপ্ট ফাংশন।
- অন্যান্য । অন্য কোনো প্রক্রিয়া বা কাজ, যেমন লিঙ্কের মাধ্যমে কোনো পৃষ্ঠায় যাওয়া অথবা অ্যাড্রেস বারে ইউআরএল (URL) লেখা।
আকার । সার্ভার কর্তৃক প্রেরিত রেসপন্স হেডার এবং রেসপন্স বডির সম্মিলিত আকার।
সময় । অনুরোধ শুরু হওয়া থেকে প্রতিক্রিয়ায় শেষ বাইটটি প্রাপ্তি পর্যন্ত মোট সময়কাল।
ওয়াটারফল । প্রতিটি অনুরোধের কার্যকলাপের একটি চাক্ষুষ বিশ্লেষণ।
কলাম যোগ বা অপসারণ করুন
Requests টেবিলের হেডারে রাইট-ক্লিক করে এটিকে লুকানো বা দেখানোর জন্য একটি অপশন বেছে নিন। প্রদর্শিত অপশনগুলোর পাশে টিক চিহ্ন দেওয়া আছে।
আপনি নিম্নলিখিত অতিরিক্ত কলামগুলি যোগ বা অপসারণ করতে পারেন: Path , URL , Method , Protocol , Scheme , Domain , Remote address , Remote address space , Initiator address space , Cookies , Set cookies , Priority , Connection ID , Has overrides , এবং Waterfall ।
কাস্টম কলাম যোগ করুন
Requests টেবিলে একটি কাস্টম কলাম যোগ করতে:
- Requests টেবিলের হেডারে রাইট-ক্লিক করুন এবং Response Headers > Manage Header Columns নির্বাচন করুন।
- ডায়ালগ উইন্ডোতে, 'Add custom header'-এ ক্লিক করুন, এর নাম লিখুন এবং 'Add'-এ ক্লিক করুন।
ইনলাইন ফ্রেম অনুসারে অনুরোধগুলিকে গ্রুপ করুন
যদি কোনো পৃষ্ঠার ইনলাইন ফ্রেমগুলো থেকে প্রচুর অনুরোধ পাঠানো হয়, তাহলে সেগুলোকে গ্রুপ করে রিকোয়েস্ট লগটিকে আরও ব্যবহার-বান্ধব করে তোলা যায়।
আইফ্রেম অনুযায়ী অনুরোধগুলিকে গ্রুপ করতে, সেটিংস খুলুন। 
নেটওয়ার্ক প্যানেলের ভিতরে ‘Group by frame’ চেক করুন।
ইনলাইন ফ্রেম দ্বারা শুরু করা কোনো অনুরোধ দেখতে, অনুরোধ লগ-এ সেটিকে প্রসারিত করুন।
অনুরোধগুলোর পারস্পরিক সময় দেখুন
একটি অনুরোধের সাপেক্ষে তার সময় দেখার জন্য ওয়াটারফল ব্যবহার করুন। ডিফল্টরূপে, ওয়াটারফলটি অনুরোধগুলোর শুরুর সময় অনুসারে সাজানো থাকে। তাই, বাম দিকের অনুরোধগুলো ডান দিকের অনুরোধগুলোর আগে শুরু হয়েছে।
ওয়াটারফলটি সাজানোর বিভিন্ন উপায় দেখতে ‘অ্যাক্টিভিটি ফেজ অনুযায়ী সাজান’ দেখুন।
একটি ওয়েবসকেট সংযোগের বার্তাগুলো বিশ্লেষণ করুন
একটি ওয়েবসকেট সংযোগের বার্তাগুলি দেখতে:
- Requests টেবিলের Name কলামের অধীনে WebSocket সংযোগের URL-টিতে ক্লিক করুন।
- মেসেজ ট্যাবটি খুলুন। টেবিলটিতে শেষ ১০০টি মেসেজ দেখানো হচ্ছে।
টেবিলটি রিফ্রেশ করতে, Requests টেবিলের Name কলামের অধীনে থাকা WebSocket কানেকশনের নামের উপর পুনরায় ক্লিক করুন।
সারণিটিতে তিনটি কলাম রয়েছে:
- ডেটা । বার্তার পেলোড। বার্তাটি যদি সাধারণ টেক্সট হয়, তবে তা এখানে প্রদর্শিত হয়। বাইনারি অপকোডের ক্ষেত্রে, এই কলামে অপকোডটির নাম এবং কোড দেখানো হয়। নিম্নলিখিত অপকোডগুলো সমর্থিত: কন্টিনিউয়েশন ফ্রেম, বাইনারি ফ্রেম, কানেকশন ক্লোজ ফ্রেম, পিং ফ্রেম, এবং পং ফ্রেম।
- দৈর্ঘ্য । মেসেজ পেলোডের দৈর্ঘ্য, বাইটে।
- সময় । যে সময়ে বার্তাটি গ্রহণ বা প্রেরণ করা হয়েছিল।
বার্তাগুলো তাদের প্রকারভেদ অনুযায়ী বিভিন্ন রঙে চিহ্নিত করা হয়েছে:
- পাঠানো টেক্সট মেসেজগুলো হালকা সবুজ রঙের হয়।
- আগত টেক্সট মেসেজগুলো সাদা রঙের।
- WebSocket অপকোডগুলো হালকা হলুদ রঙের।
- ভুলগুলো হালকা লাল রঙের।
একটি স্ট্রিমে ইভেন্টগুলি বিশ্লেষণ করুন
সার্ভারগুলো Fetch API , EventSource API , এবং XHR-এর মাধ্যমে যে ইভেন্টগুলো স্ট্রিম করে তা দেখতে:
- ইভেন্ট স্ট্রিম করে এমন একটি পেজে নেটওয়ার্ক অনুরোধগুলো রেকর্ড করুন ।
- নেটওয়ার্ক- এ, একটি অনুরোধ নির্বাচন করুন এবং ইভেন্টস্ট্রিম ট্যাবটি খুলুন।
ইভেন্ট ফিল্টার করতে, EventStream ট্যাবের শীর্ষে থাকা ফিল্টার বারে একটি রেগুলার এক্সপ্রেশন উল্লেখ করুন।
ক্যাপচার করা ইভেন্টের তালিকা মুছে ফেলতে, ‘ক্লিয়ার’ ক্লিক করুন।
একটি প্রতিক্রিয়ার মূল অংশের পূর্বরূপ দেখুন
প্রতিক্রিয়ার মূল অংশের প্রিভিউ দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- প্রিভিউ ট্যাবটি খুলুন।
এই ট্যাবটি মূলত ছবি দেখার জন্য উপযোগী।
একটি প্রতিক্রিয়া দেখুন
কোনো অনুরোধের প্রতিক্রিয়া মূল অংশ দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- রেসপন্স ট্যাবটি খুলুন।
HTTP হেডারগুলি দেখুন
কোনো অনুরোধের HTTP হেডার ডেটা দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- Headers ট্যাবটি খুলুন এবং General , Response Headers , Request Headers , এবং ঐচ্ছিকভাবে Early Hints Headers সেকশন পর্যন্ত স্ক্রল করুন।
জেনারেল সেকশনে, ডেভটুলস প্রাপ্ত HTTP স্ট্যাটাস কোডের পাশে আপনাকে সহজে পাঠযোগ্য স্ট্যাটাস মেসেজ দেখায়।
রেসপন্স হেডারস সেকশনে, আপনি কোনো হেডার ভ্যালুর উপর মাউস নিয়ে গিয়ে বাটনে ক্লিক করে স্থানীয়ভাবে রেসপন্স হেডারটি ওভাররাইড করতে পারেন।
HTTP হেডার উৎস দেখুন
ডিফল্টরূপে, হেডার ট্যাব হেডারের নামগুলো বর্ণানুক্রমিকভাবে দেখায়। HTTP হেডারের নামগুলো প্রাপ্তির ক্রমানুসারে দেখতে:
- আপনার কাঙ্ক্ষিত অনুরোধটির জন্য হেডার ট্যাবটি খুলুন। HTTP হেডারসমূহ দেখুন।
- Request Header বা Response Header সেকশনের পাশে থাকা 'view source'-এ ক্লিক করুন।
অস্থায়ী হেডার সতর্কতা
কখনও কখনও হেডারস ট্যাবে ‘ Provisional headers are shown... ’ সতর্কীকরণ বার্তাটি দেখা যায়। এর নিম্নলিখিত কারণগুলি থাকতে পারে:
অনুরোধটি নেটওয়ার্কের মাধ্যমে পাঠানো হয়নি, বরং একটি স্থানীয় ক্যাশে থেকে পরিবেশন করা হয়েছে, যা মূল অনুরোধের হেডারগুলো সংরক্ষণ করে না। এক্ষেত্রে, সম্পূর্ণ অনুরোধের হেডারগুলো দেখতে আপনি ক্যাশিং নিষ্ক্রিয় করতে পারেন।
নেটওয়ার্ক রিসোর্সটি বৈধ নয়। উদাহরণস্বরূপ, কনসোলে
fetch("https://jec.fish.com/unknown-url/")চালান।
নিরাপত্তাজনিত কারণে ডেভটুলস শুধুমাত্র অস্থায়ী হেডারগুলোও প্রদর্শন করতে পারে।
অনুরোধ পেলোড দেখুন
অনুরোধের পেলোড, অর্থাৎ এর কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা দেখতে, Requests টেবিল থেকে একটি অনুরোধ নির্বাচন করুন এবং Payload ট্যাবটি খুলুন।
পেলোড উৎস দেখুন
ডিফল্টরূপে, ডেভটুলস পেলোডটি মানুষের পাঠযোগ্য আকারে দেখায়।
কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটার উৎস দেখতে, পেলোড ট্যাবে, কোয়েরি স্ট্রিং প্যারামিটার অথবা ফর্ম ডেটা সেকশনের পাশে থাকা ভিউ সোর্স-এ ক্লিক করুন।
কোয়েরি স্ট্রিং প্যারামিটারের URL-ডিকোড করা আর্গুমেন্টগুলো দেখুন
আর্গুমেন্টগুলির জন্য ইউআরএল-এনকোডিং টগল করতে, পেলোড ট্যাবে 'ভিউ ডিকোডেড' বা 'ভিউ ইউআরএল-এনকোডেড'-এ ক্লিক করুন।
কুকি দেখুন
অনুরোধের HTTP হেডারে পাঠানো কুকিগুলো দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- কুকিজ ট্যাবটি খুলুন।
প্রতিটি কলামের বিবরণের জন্য, ফিল্ডস দেখুন।
কুকি পরিবর্তন করতে, ‘ কুকি দেখুন, সম্পাদনা করুন এবং মুছুন’ দেখুন।
ডিভাইস-সংযুক্ত সেশনগুলি দেখুন
ডিভাইস বাউন্ড সেশনস ট্যাবটি একটি সাইটের সমস্ত সক্রিয় ডিভাইস বাউন্ড সেশনের জন্য নির্বাচিত অনুরোধের সাথে সম্পর্কিত ডিফারাল (রিফ্রেশ) তথ্য দেখায়।
স্থগিতকরণ (রিফ্রেশ) তথ্য দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- ডিভাইস বাউন্ড সেশন ট্যাবটি খুলুন।
ডিভাইস বাউন্ড সেশন ট্যাবটি শুধুমাত্র কুকি সহ প্রাসঙ্গিক অনুরোধগুলির জন্য দেখানো হয়। ট্যাবটি সমস্ত সক্রিয় ডিভাইস বাউন্ড সেশন এবং সেশনগুলি অনুরোধটি স্থগিত করেছে কিনা (এবং যদি না করে থাকে, তবে কেন) তা তালিকাভুক্ত করে। স্থগিত করার সম্ভাব্য বিকল্পগুলি হলো:
-
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)
একটি অনুরোধের সময় বিভাজন দেখুন
কোনো অনুরোধের সময়ভিত্তিক বিস্তারিত বিবরণ দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- টাইমিং ট্যাবটি খুলুন।
এই ডেটা আরও দ্রুত অ্যাক্সেস করার জন্য টাইমিং ব্রেকডাউনের প্রিভিউ দেখুন।
টাইমিং ট্যাবে আপনি যে পর্যায়গুলো দেখতে পারেন, সেগুলোর প্রতিটি সম্পর্কে আরও তথ্যের জন্য "টাইমিং বিভাজনের পর্যায়গুলোর ব্যাখ্যা" দেখুন।
সময়সূচীর একটি বিশদ বিবরণ দেখুন
কোনো অনুরোধের সময়ভিত্তিক বিভাজনের প্রিভিউ দেখতে, Requests টেবিলের Waterfall কলামে অনুরোধটির এন্ট্রির উপর মাউস রাখুন।
হোভার না করে এই ডেটা অ্যাক্সেস করার একটি পদ্ধতির জন্য করা অনুরোধের সময়ভিত্তিক বিভাজন দেখুন ।
সময় বিভাজনের পর্যায়গুলি ব্যাখ্যা করা হয়েছে
টাইমিং ট্যাবে আপনি যে পর্যায়গুলো দেখতে পারেন, সেগুলোর প্রত্যেকটি সম্পর্কে এখানে আরও তথ্য দেওয়া হলো:
- সারিবদ্ধকরণ । ব্রাউজার সংযোগ শুরুর আগে এবং নিম্নলিখিত ক্ষেত্রে অনুরোধগুলিকে সারিবদ্ধ করে:
- উচ্চতর অগ্রাধিকারের অনুরোধ রয়েছে। অনুরোধের অগ্রাধিকার একটি রিসোর্সের প্রকার এবং ডকুমেন্টের মধ্যে এর অবস্থানের মতো বিষয়গুলির উপর নির্ভর করে নির্ধারিত হয়। আরও তথ্যের জন্য,
fetchpriorityগাইডের রিসোর্স প্রায়োরিটি বিভাগটি পড়ুন। - এই অরিজিনের জন্য ইতিমধ্যে ছয়টি TCP কানেকশন খোলা আছে, যা এর সীমা। (শুধুমাত্র HTTP/1.0 এবং HTTP/1.1 এর ক্ষেত্রে প্রযোজ্য।)
- ব্রাউজারটি কিছু সময়ের জন্য ডিস্ক ক্যাশে জায়গা বরাদ্দ করছে।
- উচ্চতর অগ্রাধিকারের অনুরোধ রয়েছে। অনুরোধের অগ্রাধিকার একটি রিসোর্সের প্রকার এবং ডকুমেন্টের মধ্যে এর অবস্থানের মতো বিষয়গুলির উপর নির্ভর করে নির্ধারিত হয়। আরও তথ্যের জন্য,
- আটকে গেছে । কিউইং (Queueing) অংশে বর্ণিত যেকোনো কারণে সংযোগ শুরু হওয়ার পর অনুরোধটি আটকে যেতে পারে।
- ডিএনএস অনুসন্ধান । ব্রাউজারটি অনুরোধটির আইপি ঠিকানা নির্ণয় করছে।
- প্রাথমিক সংযোগ । ব্রাউজারটি একটি সংযোগ স্থাপন করছে, যার মধ্যে TCP হ্যান্ডশেক বা পুনঃপ্রচেষ্টা এবং SSL নিয়ে আলোচনা অন্তর্ভুক্ত রয়েছে।
- প্রক্সি নেগোসিয়েশন । ব্রাউজারটি একটি প্রক্সি সার্ভারের সাথে অনুরোধটি নিয়ে আলোচনা করছে।
- অনুরোধ পাঠানো হয়েছে । অনুরোধটি পাঠানো হচ্ছে।
- সার্ভিসওয়ার্কার প্রস্তুতি । ব্রাউজারটি সার্ভিসওয়ার্কারটি চালু করছে।
- সার্ভিসওয়ার্কারের কাছে অনুরোধ । অনুরোধটি সার্ভিসওয়ার্কারের কাছে পাঠানো হচ্ছে।
- অপেক্ষা (TTFB) । ব্রাউজার একটি প্রতিক্রিয়ার প্রথম বাইটের জন্য অপেক্ষা করছে। TTFB-এর পূর্ণরূপ হলো Time To First Byte (প্রথম বাইটে পৌঁছানোর সময়)। এই সময়ের মধ্যে ১টি রাউন্ড ট্রিপ ল্যাটেন্সি এবং সার্ভারের প্রতিক্রিয়া প্রস্তুত করতে নেওয়া সময় অন্তর্ভুক্ত থাকে।
- কন্টেন্ট ডাউনলোড । ব্রাউজারটি সরাসরি নেটওয়ার্ক থেকে অথবা কোনো সার্ভিস ওয়ার্কারের কাছ থেকে রেসপন্সটি গ্রহণ করছে। এই মানটি হলো রেসপন্স বডিটি পড়তে ব্যয়িত মোট সময়। প্রত্যাশিত মানের চেয়ে বেশি হলে তা ধীরগতির নেটওয়ার্ক অথবা ব্রাউজারের অন্য কোনো কাজে ব্যস্ত থাকার ইঙ্গিত দিতে পারে, যার ফলে রেসপন্সটি পড়তে দেরি হচ্ছে।
প্রবর্তক এবং নির্ভরতা দেখুন
কোনো অনুরোধের সূচনাকারী এবং নির্ভরশীলতা দেখতে, Requests টেবিলে অনুরোধটির উপর Shift চেপে ধরে মাউস রাখুন। DevTools সূচনাকারীদের সবুজ এবং নির্ভরশীলতাগুলোকে লাল রঙে চিহ্নিত করে।
যখন রিকোয়েস্ট টেবিলটি কালানুক্রমিকভাবে সাজানো থাকে, তখন আপনি যে রিকোয়েস্টটির উপর মাউস রাখছেন তার ঠিক উপরের প্রথম সবুজ রিকোয়েস্টটি হলো ডিপেন্ডেন্সিটির ইনিশিয়েটর। যদি তার উপরে আরেকটি সবুজ রিকোয়েস্ট থাকে, তবে সেই উপরের রিকোয়েস্টটি হলো ইনিশিয়েটরের ইনিশিয়েটর। এবং এভাবেই চলতে থাকে।
লোড ইভেন্টগুলি দেখুন
DevTools নেটওয়ার্ক প্যানেলের একাধিক স্থানে DOMContentLoaded এবং load ইভেন্টগুলোর সময় প্রদর্শন করে। DOMContentLoaded ইভেন্টটি নীল রঙে এবং load ইভেন্টটি লাল রঙে দেখানো হয়।
মোট অনুরোধের সংখ্যা দেখুন
নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে মোট অনুরোধের সংখ্যা তালিকাভুক্ত করা থাকে।
স্থানান্তরিত এবং লোড করা রিসোর্সের মোট আকার দেখুন
DevTools নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে স্থানান্তরিত এবং লোড করা (অসংকুচিত) রিসোর্সগুলির মোট আকার তালিকাভুক্ত করে।
ব্রাউজার কোনো রিসোর্সকে আনকমপ্রেস করার পর সেটির আকার কেমন হয় তা দেখতে, "View the uncompressed size of a resource" দেখুন।
যে স্ট্যাক ট্রেসটির কারণে অনুরোধটি করা হয়েছিল তা দেখুন।
যখন কোনো জাভাস্ক্রিপ্ট স্টেটমেন্টের কারণে কোনো রিসোর্স অনুরোধ করা হয়, তখন অনুরোধটি পর্যন্ত স্ট্যাক ট্রেস দেখতে ইনিশিয়েটর কলামের উপর মাউস রাখুন।
কোনো রিসোর্সের অসংকুচিত আকার দেখুন
সেটিংস পরীক্ষা করুন 
বড় অনুরোধের সারিগুলো দেখুন এবং তারপর Size কলামের সর্বনিম্ন মানটি দেখুন।
এই উদাহরণে, নেটওয়ার্কের মাধ্যমে পাঠানো www.google.com ডকুমেন্টটির কম্প্রেসড সাইজ ছিল 43.8 KB , যেখানে আনকম্প্রেসড সাইজ ছিল 136 KB ।
রপ্তানি অনুরোধ ডেটা
পরবর্তীতে বর্ণিত বিভিন্ন উপায়ে আপনি ফিল্টার প্রয়োগ করে অনুরোধের তালিকাটি এক্সপোর্ট বা কপি করতে পারেন।
সমস্ত নেটওয়ার্ক অনুরোধ একটি HAR ফাইলে সংরক্ষণ করুন
HAR (HTTP Archive) হলো একটি ফাইল ফরম্যাট যা বিভিন্ন HTTP সেশন টুল দ্বারা সংগৃহীত ডেটা এক্সপোর্ট করার জন্য ব্যবহৃত হয়। এই ফরম্যাটটি একটি JSON অবজেক্ট, যাতে নির্দিষ্ট কিছু ফিল্ড থাকে।
সংবেদনশীল তথ্যের আকস্মিক ফাঁসের সম্ভাবনা কমাতে, ডিফল্টরূপে আপনি HAR ফরম্যাটে "স্যানিটাইজড" নেটওয়ার্ক লগ এক্সপোর্ট করতে পারেন, যা Cookie , Set-Cookie , এবং Authorization হেডারের মতো সংবেদনশীল তথ্য বাদ দেয়। প্রয়োজনে, আপনি সংবেদনশীল ডেটাসহ লগটিও এক্সপোর্ট করতে পারেন।
সমস্ত নেটওয়ার্ক অনুরোধ একটি HAR ফাইলে সংরক্ষণ করতে, দুটি পদ্ধতির মধ্যে একটি বেছে নিন:
Requests টেবিলের যেকোনো অনুরোধে রাইট-ক্লিক করুন এবং Copy > Save all [listed] as HAR (sanitized) অথবা Save all [listed] as HAR (with sensitive data) নির্বাচন করুন।
নেটওয়ার্ক প্যানেলের শীর্ষে থাকা অ্যাকশন বারে এক্সপোর্ট HAR (স্যানিটাইজড)...’- এ ক্লিক করুন।
সংবেদনশীল ডেটা সহ এক্সপোর্ট করতে, প্রথমে > প্রেফারেন্সেস > নেটওয়ার্ক -এ গিয়ে ' Allow to generate HAR with sensitive data' চেকবক্সটি করুন, তারপর এক্সপোর্ট বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে 'Export HAR (with sensitive data)' নির্বাচন করুন।
একবার আপনার কাছে একটি HAR ফাইল থাকলে, আপনি দুটি উপায়ে বিশ্লেষণের জন্য এটিকে DevTools-এ পুনরায় ইম্পোর্ট করতে পারেন:
- HAR ফাইলটিকে টেনে Requests টেবিলে রাখুন।
- নেটওয়ার্ক প্যানেলের শীর্ষে থাকা অ্যাকশন বারে > ইমপোর্ট HAR- এ ক্লিক করুন।
একটি অনুরোধ, ফিল্টার করা অনুরোধের সেট, অথবা সবগুলো অনুরোধ ক্লিপবোর্ডে কপি করুন।
Requests টেবিলের Name কলামের অধীনে, একটি রিকোয়েস্টের উপর রাইট-ক্লিক করুন, Copy-এর উপর মাউস রাখুন এবং নিচের অপশনগুলো থেকে একটি বেছে নিন।
একটিমাত্র অনুরোধ, তার প্রতিক্রিয়া, বা স্ট্যাক ট্রেস কপি করতে:
- URL কপি করুন । অনুরোধের URL-টি ক্লিপবোর্ডে কপি করুন।
- cURL হিসেবে কপি করুন । অনুরোধটি একটি cURL কমান্ড হিসেবে কপি করুন।
- পাওয়ারশেল হিসেবে কপি করুন । অনুরোধটি একটি পাওয়ারশেল কমান্ড হিসেবে কপি করুন।
- অনুরোধটিকে একটি ফেচ কল হিসেবে কপি করুন।
- ফেচ হিসেবে কপি করুন (নোড.জেএস) । অনুরোধটিকে একটি নোড.জেএস ফেচ কল হিসেবে কপি করুন।
- প্রতিক্রিয়া কপি করুন । প্রতিক্রিয়ার মূল অংশটি ক্লিপবোর্ডে কপি করুন।
- স্ট্যাক ট্রেস কপি করুন । অনুরোধের স্ট্যাক ট্র্যাকটি ক্লিপবোর্ডে কপি করুন।
সমস্ত অনুরোধ কপি করতে:
- সমস্ত ইউআরএল কপি করুন । সমস্ত অনুরোধের ইউআরএল ক্লিপবোর্ডে কপি করুন।
- সবগুলো cURL হিসেবে কপি করুন । সমস্ত অনুরোধ cURL কমান্ডের একটি শৃঙ্খল হিসেবে কপি করুন।
- সবগুলো PowerShell হিসেবে কপি করুন । সমস্ত অনুরোধ PowerShell কমান্ডের একটি শৃঙ্খল হিসেবে কপি করুন।
- সবগুলো ফেচ হিসেবে কপি করুন । সমস্ত অনুরোধকে ফেচ কলের একটি শৃঙ্খল হিসেবে কপি করুন।
- সবগুলোকে ফেচ (Node.js) হিসেবে কপি করুন । সমস্ত রিকোয়েস্টকে Node.js ফেচ কলের একটি চেইন হিসেবে কপি করুন।
- সবকিছু HAR (স্যানিটাইজড) হিসেবে কপি করুন ।
Cookie,Set-Cookie, এবংAuthorizationহেডারের মতো সংবেদনশীল ডেটা ছাড়া সমস্ত অনুরোধ HAR ডেটা হিসেবে কপি করুন। - সংবেদনশীল তথ্য সহ সবকিছু HAR হিসেবে কপি করুন। সংবেদনশীল তথ্য সহ সমস্ত অনুরোধ HAR ডেটা হিসেবে কপি করুন।
ফিল্টার করা অনুরোধের একটি সেট কপি করতে, নেটওয়ার্ক লগে একটি ফিল্টার প্রয়োগ করুন, একটি অনুরোধে রাইট-ক্লিক করুন এবং নির্বাচন করুন:
- তালিকাভুক্ত সমস্ত ইউআরএল কপি করুন । ফিল্টার করা সমস্ত অনুরোধের ইউআরএল ক্লিপবোর্ডে কপি করুন।
- তালিকাভুক্ত সবগুলোকে cURL হিসেবে কপি করুন । ফিল্টার করা সমস্ত অনুরোধকে cURL কমান্ডের একটি শৃঙ্খল হিসেবে কপি করুন।
- PowerShell হিসেবে তালিকাভুক্ত সবকিছু কপি করুন । ফিল্টার করা সমস্ত অনুরোধ PowerShell কমান্ডের একটি শৃঙ্খল হিসেবে কপি করুন।
- ফেচ হিসেবে তালিকাভুক্ত সবগুলো কপি করুন । ফিল্টার করা সমস্ত অনুরোধকে ফেচ কলের একটি শৃঙ্খল হিসেবে কপি করুন।
- ফেচ (নোড.জেএস) হিসেবে তালিকাভুক্ত সবকিছু কপি করুন । ফিল্টার করা সমস্ত অনুরোধকে নোড.জেএস ফেচ কলের একটি শৃঙ্খল হিসেবে কপি করুন।
- তালিকাভুক্ত সবকিছু HAR (স্যানিটাইজড) হিসেবে কপি করুন ।
Cookie,Set-CookieএবংAuthorizationহেডারের মতো সংবেদনশীল ডেটা ছাড়া সমস্ত ফিল্টার করা অনুরোধ HAR ডেটা হিসেবে কপি করুন। - সংবেদনশীল তথ্যসহ HAR হিসেবে তালিকাভুক্ত সবকিছু কপি করুন । সংবেদনশীল তথ্যসহ ফিল্টার করা সমস্ত অনুরোধ HAR ডেটা হিসেবে কপি করুন।
নেটওয়ার্ক প্যানেলের লেআউট পরিবর্তন করুন
আপনার জন্য গুরুত্বপূর্ণ বিষয়গুলিতে মনোযোগ দেওয়ার জন্য নেটওয়ার্ক প্যানেল UI-এর অংশগুলি প্রসারিত বা সংকুচিত করুন।
ফিল্টার অ্যাকশন বার লুকান
ডিফল্টরূপে, ডেভটুলস নেটওয়ার্ক প্যানেলের শীর্ষে ফিল্টার বারটি দেখায়। এটি লুকানোর জন্য ফিল্টার-এ ক্লিক করুন।
Use big request rows
Use big rows when you want more whitespace in your network requests table. Some columns also provide a little more information when using big rows. For example, the bottom value of the Size column is the uncompressed size of a request and the Priority column shows both the initial (bottom value) and final (top value) fetch priority.
সেটিংস খুলুন 
and click Big request rows to see big rows.
Hide the Overview track
By default, DevTools shows the Overview track. Open Settings 
and clear the Show overview checkbox to hide it.
