Chrome DevTools নেটওয়ার্ক বিশ্লেষণ বৈশিষ্ট্যের এই বিস্তৃত রেফারেন্সে আপনার পৃষ্ঠা কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন উপায় আবিষ্কার করুন।
নেটওয়ার্ক অনুরোধ রেকর্ড করুন
ডিফল্টরূপে, DevTools নেটওয়ার্ক প্যানেলে সমস্ত নেটওয়ার্ক অনুরোধ রেকর্ড করে, যতক্ষণ DevTools খোলা থাকে।
নেটওয়ার্ক অনুরোধ রেকর্ড করা বন্ধ করুন
অনুরোধ রেকর্ড করা বন্ধ করতে:
- নেটওয়ার্ক লগ রেকর্ড করা বন্ধ করুন ক্লিক করুন
নেটওয়ার্ক প্যানেলে। এটি ধূসর হয়ে যায় যা নির্দেশ করে যে DevTools আর অনুরোধ রেকর্ড করছে না। - নেটওয়ার্ক প্যানেলটি ফোকাসে থাকাকালীন Command > + E (Mac) অথবা Control + E (Windows, Linux) টিপুন।
অনুরোধগুলি সাফ করুন
"সাফ করুন" এ ক্লিক করুন 
অনুরোধ টেবিল থেকে সমস্ত অনুরোধ মুছে ফেলার জন্য নেটওয়ার্ক প্যানেলে।
পৃষ্ঠা লোড জুড়ে অনুরোধগুলি সংরক্ষণ করুন
পৃষ্ঠা লোড জুড়ে অনুরোধগুলি সংরক্ষণ করতে, নেটওয়ার্ক প্যানেলে প্রিজারভ লগ চেকবক্সটি চেক করুন। আপনি প্রিজারভ লগ অক্ষম না করা পর্যন্ত DevTools সমস্ত অনুরোধ সংরক্ষণ করে।
পৃষ্ঠা লোডের সময় স্ক্রিনশট ক্যাপচার করুন
আপনার পৃষ্ঠা লোড হওয়ার জন্য অপেক্ষা করার সময় ব্যবহারকারীরা কী দেখেন তা বিশ্লেষণ করতে স্ক্রিনশট ক্যাপচার করুন।
স্ক্রিনশট চালু করতে, সেটিংস খুলুন 
নেটওয়ার্ক প্যানেলের ভিতরে এবং ক্যাপচার স্ক্রিনশট চেক করুন।
স্ক্রিনশট ক্যাপচার করার জন্য নেটওয়ার্ক প্যানেল ফোকাসে থাকা অবস্থায় পৃষ্ঠাটি পুনরায় লোড করুন।
একবার ক্যাপচার হয়ে গেলে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটগুলির সাথে ইন্টারঅ্যাক্ট করতে পারেন:
- স্ক্রিনশটটি কোন বিন্দুতে তোলা হয়েছে তা দেখতে স্ক্রিনশটের উপর কার্সার রাখুন। ওভারভিউ টাইমলাইনে একটি হলুদ রেখা দেখা যাবে।
- স্ক্রিনশট ক্যাপচার করার পরে যে কোনও অনুরোধ ফিল্টার করে বাদ দিতে স্ক্রিনশটের থাম্বনেইলে ক্লিক করুন।
- একটি থাম্বনেইল জুম করতে ডাবল-ক্লিক করুন।
XHR অনুরোধ রিপ্লে করুন
XHR অনুরোধটি পুনরায় চালানোর জন্য, অনুরোধ সারণীতে নিম্নলিখিতগুলির মধ্যে একটি করুন:
- অনুরোধটি নির্বাচন করুন এবং R টিপুন।
- অনুরোধটিতে ডান-ক্লিক করুন এবং Replay XHR নির্বাচন করুন।
লোডিং আচরণ পরিবর্তন করুন
ব্রাউজার ক্যাশে নিষ্ক্রিয় করে প্রথমবারের মতো আসা একজনকে অনুকরণ করুন
আপনার সাইটে প্রথমবার আসা ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করতে, "ক্যাশে বন্ধ করুন" চেকবক্সটি চেক করুন। DevTools ব্রাউজার ক্যাশে বন্ধ করে দেয়। এটি আরও সঠিকভাবে প্রথমবার আসা ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করে, কারণ বারবার দেখার সময় ব্রাউজার ক্যাশে থেকে অনুরোধগুলি পরিবেশন করা হয়।
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে অক্ষম করুন।
অন্যান্য DevTools প্যানেলে কাজ করার সময় যদি আপনি ক্যাশে নিষ্ক্রিয় করতে চান, তাহলে নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ার খুলতে আইকন। - ক্যাশে নিষ্ক্রিয় করুন চেকবক্সটি চেক করুন বা সাফ করুন।
ব্রাউজার ক্যাশে ম্যানুয়ালি সাফ করুন
যেকোনো সময় ব্রাউজার ক্যাশে ম্যানুয়ালি সাফ করতে, অনুরোধ টেবিলের যেকোনো জায়গায় ডান-ক্লিক করুন এবং ব্রাউজার ক্যাশে সাফ করুন নির্বাচন করুন।
অফলাইনে অনুকরণ করুন
প্রোগ্রেসিভ ওয়েব অ্যাপস নামে একটি নতুন শ্রেণীর ওয়েব অ্যাপ তৈরি হয়েছে, যা পরিষেবা কর্মীদের সাহায্যে অফলাইনে কাজ করতে পারে। যখন আপনি এই ধরণের অ্যাপ তৈরি করছেন, তখন কোনও ডেটা সংযোগ নেই এমন ডিভাইস দ্রুত সিমুলেট করতে সক্ষম হওয়া কার্যকর।
সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতা অনুকরণ করতে, ডিসএবল ক্যাশে চেকবক্সের পাশে থাকা নেটওয়ার্ক থ্রটলিং ড্রপ-ডাউন মেনু থেকে অফলাইন নির্বাচন করুন।
DevTools নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কতা আইকন প্রদর্শন করে যা আপনাকে মনে করিয়ে দেয় যে অফলাইন সক্ষম করা আছে।
ধীরগতির নেটওয়ার্ক সংযোগ অনুকরণ করুন
দ্রুত 4G, ধীর 4G, অথবা 3G অনুকরণ করতে, উপরের অ্যাকশন বারে থ্রটলিং ড্রপ-ডাউন মেনু থেকে সংশ্লিষ্ট প্রিসেটটি নির্বাচন করুন।
DevTools নেটওয়ার্ক প্যানেলের পাশে একটি আইকন প্রদর্শন করে যা আপনাকে মনে করিয়ে দেয় যে থ্রটলিং সক্ষম করা আছে।
কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন
ধীর বা দ্রুত 4G এর মতো প্রিসেটগুলি ছাড়াও, আপনি আপনার নিজস্ব কাস্টম থ্রটলিং প্রোফাইলও যোগ করতে পারেন:
- থ্রটলিং মেনু খুলুন এবং কাস্টম > যোগ করুন... নির্বাচন করুন।
- > থ্রটলিং -এ বর্ণিত পদ্ধতিতে একটি নতুন থ্রটলিং প্রোফাইল সেট আপ করুন।
নেটওয়ার্ক প্যানেলে ফিরে, থ্রটলিং ড্রপ-ডাউন মেনু থেকে আপনার নতুন প্রোফাইল নির্বাচন করুন।
DevTools প্রদর্শন করে a 
নেটওয়ার্ক প্যানেলের পাশে থাকা সতর্কতা আইকনটি আপনাকে মনে করিয়ে দেবে যে থ্রটলিং সক্ষম করা হয়েছে।
থ্রটল ওয়েবসকেট সংযোগগুলি
HTTP অনুরোধের পাশাপাশি, DevTools 99 সংস্করণ থেকে WebSocket সংযোগগুলিকে থ্রোটল করে।
ওয়েবসকেট থ্রটলিং পর্যবেক্ষণ করতে:
- একটি নতুন সংযোগ শুরু করুন, উদাহরণস্বরূপ, একটি পরীক্ষামূলক সরঞ্জাম ব্যবহার করে।
- নেটওয়ার্ক প্যানেলে, No throttling নির্বাচন করুন এবং সংযোগের মাধ্যমে একটি বার্তা পাঠান।
- খুব ধীর গতির একটি কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন, উদাহরণস্বরূপ,
10 kbit/s। এই ধরনের ধীর প্রোফাইল আপনাকে পার্থক্যটি লক্ষ্য করতে সাহায্য করবে। - নেটওয়ার্ক প্যানেলে, প্রোফাইলটি নির্বাচন করুন এবং আরেকটি বার্তা পাঠান।
- WS ফিল্টারটি টগল করুন, আপনার সংযোগের নামে ক্লিক করুন, বার্তা ট্যাবটি খুলুন এবং থ্রটলিং সহ এবং ছাড়াই প্রেরিত এবং প্রতিধ্বনিত বার্তাগুলির মধ্যে সময়ের পার্থক্য পরীক্ষা করুন। উদাহরণস্বরূপ:
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ধীরগতির নেটওয়ার্ক সংযোগ অনুকরণ করুন
অন্যান্য DevTools প্যানেলে কাজ করার সময় যদি আপনি নেটওয়ার্ক সংযোগ থ্রোটল করতে চান, তাহলে নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ার খুলতে আইকন। - নেটওয়ার্ক থ্রটলিং মেনু থেকে একটি সংযোগের গতি নির্বাচন করুন।
ব্রাউজার কুকিজ ম্যানুয়ালি সাফ করুন
যেকোনো সময় ব্রাউজার কুকিজ ম্যানুয়ালি সাফ করতে, অনুরোধ টেবিলের যেকোনো জায়গায় ডান-ক্লিক করুন এবং ব্রাউজার কুকিজ সাফ করুন নির্বাচন করুন।
HTTP প্রতিক্রিয়া হেডারগুলিকে ওভাররাইড করুন
স্থানীয়ভাবে ফাইল এবং HTTP প্রতিক্রিয়া শিরোনাম ওভাররাইড দেখুন।
ব্যবহারকারী এজেন্টকে ওভাররাইড করুন
ব্যবহারকারী এজেন্টকে ম্যানুয়ালি ওভাররাইড করতে:
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ার খুলতে আইকন। - স্বয়ংক্রিয়ভাবে নির্বাচন করুন সাফ করুন।
- মেনু থেকে একটি ব্যবহারকারী এজেন্ট বিকল্প নির্বাচন করুন, অথবা বাক্সে একটি কাস্টম বিকল্প লিখুন।
অনুসন্ধানের অনুরোধ
অনুরোধের শিরোনাম, পেলোড এবং প্রতিক্রিয়া জুড়ে অনুসন্ধান করতে:
ডানদিকে অনুসন্ধান ট্যাব খুলতে নিম্নলিখিত শর্টকাটটি টিপুন:
- macOS-এ, Command + F ।
- উইন্ডোজ বা লিনাক্সে, Control + 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 স্বয়ংসম্পূর্ণ ড্রপ-ডাউনে এটির সম্মুখীন হওয়া সমস্ত প্রতিক্রিয়া শিরোনামগুলি পূরণ করে। -
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। সমস্যা ট্যাবে raw Set-Cookie হেডার দেখান। ভুলSet-Cookieহেডার সহ ত্রুটিপূর্ণ কুকিজ নেটওয়ার্ক প্যানেলে ফ্ল্যাগ করা হবে। -
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 (এখানে তালিকাভুক্ত নয় এমন অন্য যেকোনো ধরণের ) বোতামগুলিতে ক্লিক করুন।
যদি আপনি এই বোতামগুলি দেখতে না পান, তাহলে সম্ভবত ফিল্টার অ্যাকশন বারটি লুকানো আছে। ফিল্টার বারটি লুকান দেখুন।
একসাথে একাধিক ধরণের রিসোর্স দেখানোর জন্য, কমান্ড (ম্যাক) অথবা কন্ট্রোল (উইন্ডোজ, লিনাক্স) ধরে রাখুন এবং তারপর বিভিন্ন ধরণের ফিল্টারে ক্লিক করুন।
সময় অনুসারে অনুরোধগুলি ফিল্টার করুন
শুধুমাত্র সেই সময়সীমার মধ্যে সক্রিয় থাকা অনুরোধগুলি প্রদর্শন করতে ওভারভিউ টাইমলাইনে বাম বা ডানে টেনে আনুন। ফিল্টারটি অন্তর্ভুক্ত। হাইলাইট করা সময়ের মধ্যে সক্রিয় থাকা যেকোনো অনুরোধ দেখানো হবে।
ডেটা URL লুকান
ডেটা URL হল ছোট ফাইল যা অন্যান্য নথিতে এমবেড করা থাকে। অনুরোধ টেবিলে আপনি যে কোনও অনুরোধ দেখতে পান যা data: এটি একটি ডেটা URL।
এই অনুরোধগুলি লুকানোর জন্য, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > নির্বাচন করুন। ডেটা URL লুকান ।
নীচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
এক্সটেনশন URL গুলি লুকান
আপনার লেখা কোডের উপর ফোকাস করার জন্য, আপনি Chrome এ ইনস্টল করা এক্সটেনশনগুলি দ্বারা প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে পারেন। এক্সটেনশন অনুরোধগুলির URL গুলি chrome-extension:// দিয়ে শুরু হয়।
এক্সটেনশন অনুরোধ লুকানোর জন্য, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > নির্বাচন করুন এক্সটেনশন URL লুকান ।
নীচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
শুধুমাত্র ব্লক করা রেসপন্স কুকি সহ অনুরোধগুলি দেখান
যেকোনো কারণে ব্লক করা রেসপন্স কুকিজ ছাড়া অন্য সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ব্লক করা রেসপন্স কুকিজ নির্বাচন করুন।
নীচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
একটি রেসপন্স কুকি কেন ব্লক করা হয়েছিল তা জানতে, অনুরোধটি নির্বাচন করুন, এর কুকিজ ট্যাবটি খুলুন এবং তথ্য আইকনের উপর কার্সার রাখুন।
অতিরিক্তভাবে, নেটওয়ার্ক প্যানেলে Chrome ফ্ল্যাগ বা কনফিগারেশনের কারণে কুকিজ ব্লক করা একটি অনুরোধের পাশে একটি সতর্কতা আইকন দেখানো হয়। একটি সূত্র সহ একটি টুলটিপ দেখতে আইকনের উপর কার্সার রাখুন এবং আরও তথ্যের জন্য সমস্যা প্যানেলে যেতে এটিতে ক্লিক করুন।
শুধুমাত্র ব্লক করা অনুরোধগুলি দেখান
ব্লক করা অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ব্লক করা অনুরোধ নির্বাচন করুন। এটি পরীক্ষা করার জন্য, আপনি ড্রয়ারে নেটওয়ার্ক অনুরোধ ব্লকিং ট্যাব ব্যবহার করতে পারেন।
অনুরোধের টেবিলটি লাল রঙে ব্লক করা অনুরোধগুলিকে হাইলাইট করে। নীচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
শুধুমাত্র তৃতীয় পক্ষের অনুরোধগুলি দেখান
পৃষ্ঠার অরিজিন থেকে আলাদা অরিজিন সহ অনুরোধগুলি ছাড়া সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > 3rd-party requests নির্বাচন করুন।
নীচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
অনুরোধগুলি সাজান
ডিফল্টরূপে, অনুরোধ টেবিলের অনুরোধগুলি শুরুর সময় অনুসারে সাজানো হয়, তবে আপনি অন্যান্য মানদণ্ড ব্যবহার করে টেবিলটি সাজাতে পারেন।
কলাম অনুসারে সাজান
অনুরোধ টেবিলের যেকোনো কলামের হেডারে ক্লিক করে সেই কলাম অনুসারে অনুরোধগুলি সাজিয়ে নিন।
কার্যকলাপ পর্যায় অনুসারে সাজান
Waterfall অনুরোধগুলি কীভাবে সাজানো হয় তা পরিবর্তন করতে, অনুরোধ টেবিলের শিরোনামে ডান-ক্লিক করুন, Waterfall এর উপর কার্সার রাখুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন:
- শুরুর সময় । প্রথম যে অনুরোধটি শুরু করা হয়েছিল তা উপরে রয়েছে।
- প্রতিক্রিয়া সময় । ডাউনলোড শুরু হওয়া প্রথম অনুরোধটি উপরে রয়েছে।
- শেষ সময় । প্রথম যে অনুরোধটি শেষ হয়েছে তা উপরে রয়েছে।
- মোট সময়কাল । সবচেয়ে কম সংযোগ সেটআপ এবং অনুরোধ/প্রতিক্রিয়া সহ অনুরোধটি শীর্ষে রয়েছে।
- লেটেন্সি । যে অনুরোধটি সবচেয়ে কম সময় ধরে সাড়া দেওয়ার জন্য অপেক্ষা করেছিল তা শীর্ষে রয়েছে।
এই বর্ণনাগুলি ধরে নেয় যে প্রতিটি বিকল্পকে ছোট থেকে দীর্ঘতম পর্যন্ত স্থান দেওয়া হয়েছে। Waterfall কলামের হেডারে ক্লিক করলে ক্রমটি বিপরীত হয়ে যায়।
এই উদাহরণে, ওয়াটারফল মোট সময়কাল অনুসারে সাজানো হয়েছে। প্রতিটি বারের হালকা অংশ হল অপেক্ষা করার সময় ব্যয় করা। অন্ধকার অংশ হল বাইট ডাউনলোড করার সময় ব্যয় করা।
অনুরোধ বিশ্লেষণ করুন
যতক্ষণ DevTools খোলা থাকে, ততক্ষণ এটি নেটওয়ার্ক প্যানেলে সমস্ত অনুরোধ লগ করে। অনুরোধ বিশ্লেষণ করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন।
অনুরোধের একটি লগ দেখুন
DevTools খোলা থাকাকালীন করা সমস্ত অনুরোধের লগ দেখতে অনুরোধের টেবিলটি ব্যবহার করুন। অনুরোধগুলিতে ক্লিক করলে বা তাদের উপর কার্সার রাখলে সেগুলি সম্পর্কে আরও তথ্য পাওয়া যায়।
অনুরোধের টেবিলটি ডিফল্টরূপে নিম্নলিখিত কলামগুলি প্রদর্শন করে:
- নাম । রিসোর্সের ফাইলের নাম, অথবা একটি শনাক্তকারী।
স্থিতি । এই কলামে নিম্নলিখিত মানগুলি দেখাতে পারে:
- HTTP স্ট্যাটাস কোড, উদাহরণস্বরূপ,
200অথবা404। - ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) এর কারণে অনুরোধের জন্য
CORS errorব্যর্থ হয়েছে। - ভুলভাবে কনফিগার করা হেডার সহ অনুরোধের জন্য
(blocked:origin)। কী ভুল হয়েছে তার ইঙ্গিত সহ একটি টুলটিপ দেখতে এই স্ট্যাটাস মানের উপর কার্সার রাখুন। -
(failed)এর পরে ত্রুটি বার্তাটি আসে।
- HTTP স্ট্যাটাস কোড, উদাহরণস্বরূপ,
প্রকার । অনুরোধকৃত রিসোর্সের MIME প্রকার।
ইনিশিয়েটর । নিম্নলিখিত অবজেক্ট বা প্রক্রিয়াগুলি অনুরোধ শুরু করতে পারে:
- পার্সার । ক্রোমের HTML পার্সার।
- পুনঃনির্দেশ । একটি HTTP পুনঃনির্দেশ।
- স্ক্রিপ্ট । একটি জাভাস্ক্রিপ্ট ফাংশন।
- অন্যান্য । অন্য কোন প্রক্রিয়া বা ক্রিয়া, যেমন একটি লিঙ্ক ব্যবহার করে একটি পৃষ্ঠায় নেভিগেট করা বা ঠিকানা বারে একটি URL প্রবেশ করানো।
আকার । সার্ভার দ্বারা সরবরাহিত প্রতিক্রিয়া শিরোনাম এবং প্রতিক্রিয়া বডির সম্মিলিত আকার।
সময় । অনুরোধের শুরু থেকে প্রতিক্রিয়ায় চূড়ান্ত বাইট প্রাপ্তি পর্যন্ত মোট সময়কাল।
জলপ্রপাত । প্রতিটি অনুরোধের কার্যকলাপের একটি দৃশ্যমান বিশ্লেষণ।
কলাম যোগ করুন বা সরান
অনুরোধ টেবিলের হেডারে ডান-ক্লিক করুন এবং এটি লুকানোর বা দেখানোর জন্য একটি বিকল্প নির্বাচন করুন। প্রদর্শিত বিকল্পগুলির পাশে চেক চিহ্ন রয়েছে।
আপনি নিম্নলিখিত অতিরিক্ত কলামগুলি যোগ বা অপসারণ করতে পারেন: Path , URL , Method , Protocol , Scheme , Domain , Remote address , Remote address space , Initiator address space , Cookies , Set cookies , Priority , Connection ID , Has overrides , এবং Waterfall ।
কাস্টম কলাম যোগ করুন
অনুরোধ টেবিলে একটি কাস্টম কলাম যোগ করতে:
- অনুরোধ টেবিলের হেডারে ডান-ক্লিক করুন এবং রেসপন্স হেডার > ম্যানেজ হেডার কলাম নির্বাচন করুন।
- ডায়ালগ উইন্ডোতে, কাস্টম হেডার যোগ করুন এ ক্লিক করুন, এর নাম লিখুন এবং যোগ করুন এ ক্লিক করুন।
ইনলাইন ফ্রেম অনুসারে অনুরোধগুলিকে গ্রুপ করুন
যদি কোনও পৃষ্ঠার ইনলাইন ফ্রেমগুলি অনেকগুলি অনুরোধ শুরু করে, তাহলে আপনি অনুরোধ লগগুলিকে গ্রুপ করে আরও বন্ধুত্বপূর্ণ করতে পারেন।
আইফ্রেম অনুসারে অনুরোধগুলিকে গোষ্ঠীভুক্ত করতে, সেটিংস খুলুন 
নেটওয়ার্ক প্যানেলের ভিতরে এবং চেক করুন ফ্রেম অনুসারে গ্রুপ করুন ।
একটি ইনলাইন ফ্রেম দ্বারা শুরু করা একটি অনুরোধ দেখতে, অনুরোধ লগে এটি প্রসারিত করুন।
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখুন
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখতে ওয়াটারফল ব্যবহার করুন। ডিফল্টরূপে, ওয়াটারফল অনুরোধের শুরুর সময় অনুসারে সংগঠিত হয়। সুতরাং, বাম দিকের আরও দূরে থাকা অনুরোধগুলি ডানদিকের আরও দূরে থাকা অনুরোধগুলির চেয়ে আগে শুরু হয়েছিল।
জলপ্রপাত সাজানোর বিভিন্ন উপায় দেখতে "অ্যাক্টিভিটি ফেজ অনুসারে সাজানো" দেখুন।
একটি ওয়েবসকেট সংযোগের বার্তা বিশ্লেষণ করুন
একটি ওয়েবসকেট সংযোগের বার্তাগুলি দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে, ওয়েবসকেট সংযোগের URL-এ ক্লিক করুন।
- বার্তা ট্যাবে ক্লিক করুন। টেবিলটি শেষ ১০০টি বার্তা দেখায়।
টেবিলটি রিফ্রেশ করতে, Requests টেবিলের Name কলামের অধীনে WebSocket সংযোগের নামের উপর পুনরায় ক্লিক করুন।
টেবিলটিতে তিনটি কলাম রয়েছে:
- ডেটা । বার্তা পেলোড। যদি বার্তাটি প্লেইন টেক্সট হয়, তাহলে এটি এখানে প্রদর্শিত হবে। বাইনারি অপকোডের জন্য, এই কলামটি অপকোডের নাম এবং কোড প্রদর্শন করে। নিম্নলিখিত অপকোডগুলি সমর্থিত: কন্টিনিউয়েশন ফ্রেম, বাইনারি ফ্রেম, কানেকশন ক্লোজ ফ্রেম, পিং ফ্রেম এবং পং ফ্রেম।
- দৈর্ঘ্য । বার্তা পেলোডের দৈর্ঘ্য, বাইটে।
- সময় । বার্তাটি গ্রহণ বা পাঠানোর সময়।
বার্তাগুলি তাদের ধরণ অনুসারে রঙিন কোডেড করা হয়:
- বহির্গামী টেক্সট বার্তাগুলি হালকা সবুজ রঙের।
- আগত টেক্সট বার্তাগুলি সাদা।
- ওয়েবসকেট অপকোডগুলি হালকা হলুদ রঙের।
- ত্রুটিগুলি হালকা লাল রঙের।
একটি স্ট্রিমে ইভেন্ট বিশ্লেষণ করুন
Fetch API , EventSource API , এবং XHR এর মাধ্যমে সার্ভারগুলি যে ইভেন্টগুলি স্ট্রিম করে তা দেখতে:
- ইভেন্ট স্ট্রিম করে এমন একটি পৃষ্ঠায় নেটওয়ার্ক অনুরোধ রেকর্ড করুন ।
- নেটওয়ার্কে , একটি অনুরোধ নির্বাচন করুন এবং ইভেন্টস্ট্রিম ট্যাবটি খুলুন।
ইভেন্ট ফিল্টার করতে, EventStream ট্যাবের উপরে ফিল্টার বারে একটি নিয়মিত অভিব্যক্তি নির্দিষ্ট করুন।
ক্যাপচার করা ইভেন্টের তালিকা মুছে ফেলতে, ক্লিয়ার ক্লিক করুন।
একটি প্রতিক্রিয়া অংশের একটি পূর্বরূপ দেখুন
একটি প্রতিক্রিয়া অংশের পূর্বরূপ দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- প্রিভিউ ট্যাবে ক্লিক করুন।
এই ট্যাবটি বেশিরভাগ ক্ষেত্রে ছবি দেখার জন্য কার্যকর।
একটি প্রতিক্রিয়ার মূল অংশ দেখুন
একটি অনুরোধের প্রতিক্রিয়ার মূল অংশ দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- প্রতিক্রিয়া ট্যাবে ক্লিক করুন।
HTTP হেডার দেখুন
একটি অনুরোধের HTTP হেডার ডেটা দেখতে:
- অনুরোধ টেবিলে একটি অনুরোধে ক্লিক করুন।
- হেডার ট্যাবটি খুলুন এবং জেনারেল , রেসপন্স হেডার , রিকোয়েস্ট হেডার এবং ঐচ্ছিকভাবে, আর্লি হিন্টস হেডার বিভাগে স্ক্রোল করুন।
সাধারণ বিভাগে, DevTools আপনাকে প্রাপ্ত HTTP স্ট্যাটাস কোডের পাশে মানব-পঠনযোগ্য স্ট্যাটাস বার্তা দেখায়।
রেসপন্স হেডারস বিভাগে, আপনি একটি হেডার মানের উপর কার্সার রাখতে পারেন এবং স্থানীয়ভাবে রেসপন্স হেডারটি ওভাররাইড করতে সম্পাদনা বোতামে ক্লিক করতে পারেন।
HTTP হেডার সোর্স দেখুন
ডিফল্টরূপে, হেডার ট্যাব হেডারের নামগুলি বর্ণানুক্রমিকভাবে দেখায়। HTTP হেডারের নামগুলি যে ক্রমে প্রাপ্ত হয়েছে তা দেখতে:
- আপনার আগ্রহের অনুরোধের জন্য হেডার ট্যাবটি খুলুন। View HTTP হেডারগুলি দেখুন।
- অনুরোধ শিরোনাম বা প্রতিক্রিয়া শিরোনাম বিভাগের পাশে, উৎস দেখুন ক্লিক করুন।
অস্থায়ী হেডার সতর্কতা
কখনও কখনও হেডার ট্যাবে Provisional headers are shown... সতর্কতামূলক বার্তা। এটি নিম্নলিখিত কারণে হতে পারে:
অনুরোধটি নেটওয়ার্কের মাধ্যমে পাঠানো হয়নি বরং একটি স্থানীয় ক্যাশে থেকে পরিবেশন করা হয়েছে, যা মূল অনুরোধের শিরোনামগুলি সংরক্ষণ করে না। এই ক্ষেত্রে, সম্পূর্ণ অনুরোধের শিরোনামগুলি দেখতে আপনি ক্যাশিং অক্ষম করতে পারেন।
নেটওয়ার্ক রিসোর্সটি বৈধ নয়। উদাহরণস্বরূপ, কনসোলে
fetch("https://jec.fish.com/unknown-url/")এক্সিকিউট করুন।
নিরাপত্তার কারণে DevTools শুধুমাত্র অস্থায়ী হেডার প্রদর্শন করতে পারে।
অনুরোধের পেলোড দেখুন
অনুরোধের পেলোড, অর্থাৎ এর কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা দেখতে, অনুরোধ টেবিল থেকে একটি অনুরোধ নির্বাচন করুন এবং পেলোড ট্যাব খুলুন।
পেলোড সোর্স দেখুন
ডিফল্টরূপে, DevTools পেলোডকে মানুষের পঠনযোগ্য আকারে দেখায়।
কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটার উৎস দেখতে, পেলোড ট্যাবে, কোয়েরি স্ট্রিং প্যারামিটার বা ফর্ম ডেটা বিভাগের পাশে ভিউ সোর্স ক্লিক করুন।
কোয়েরি স্ট্রিং প্যারামিটারের URL-ডিকোডেড আর্গুমেন্ট দেখুন
আর্গুমেন্টের জন্য URL-এনকোডিং টগল করতে, Payload ট্যাবে, view decoded অথবা view URL-এনকোডেড ক্লিক করুন।
কুকিজ দেখুন
অনুরোধের HTTP হেডারে পাঠানো কুকিজ দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- কুকিজ ট্যাবে ক্লিক করুন।
প্রতিটি কলামের বর্ণনার জন্য, ক্ষেত্রগুলি দেখুন।
কুকিজ পরিবর্তন করতে, কুকিজ দেখুন, সম্পাদনা করুন এবং মুছুন দেখুন ।
একটি অনুরোধের সময় বিবরণ দেখুন
একটি অনুরোধের সময়সীমা দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- টাইমিং ট্যাবে ক্লিক করুন।
এই ডেটা অ্যাক্সেস করার দ্রুত উপায়ের জন্য টাইমিং ব্রেকডাউনের পূর্বরূপ দেখুন।
টাইমিং ট্যাবে আপনি যে প্রতিটি ধাপ দেখতে পাবেন সে সম্পর্কে আরও তথ্যের জন্য টাইমিং ব্রেকডাউন ধাপগুলি ব্যাখ্যা করা হয়েছে তা দেখুন।
সময়ের একটি বিশ্লেষণের পূর্বরূপ দেখুন
কোনও অনুরোধের সময় নির্ধারণের পূর্বরূপ দেখতে, অনুরোধ টেবিলের ওয়াটারফল কলামে অনুরোধের এন্ট্রির উপর কার্সার রাখুন।
এই ডেটা অ্যাক্সেস করার জন্য একটি অনুরোধের সময়গত ভাঙ্গন দেখুন যার জন্য ঘোরানোর প্রয়োজন হয় না।
সময় নির্ধারণের পর্যায়গুলি ব্যাখ্যা করা হয়েছে
টাইমিং ট্যাবে আপনি যে প্রতিটি ধাপ দেখতে পাবেন সে সম্পর্কে আরও তথ্য এখানে দেওয়া হল:
- সংযোগ শুরু হওয়ার আগে এবং কখন ব্রাউজার অনুরোধগুলি সারিবদ্ধ করে:
- উচ্চতর অগ্রাধিকার অনুরোধ রয়েছে। অনুরোধের অগ্রাধিকার নির্ধারিত হয় রিসোর্সের ধরণ, সেইসাথে ডকুমেন্টের মধ্যে এর অবস্থানের মতো বিষয়গুলির দ্বারা। আরও তথ্যের জন্য,
fetchpriorityনির্দেশিকার রিসোর্স অগ্রাধিকার বিভাগটি পড়ুন। - এই অরিজিনের জন্য ইতিমধ্যেই ছয়টি TCP সংযোগ খোলা আছে, যা সীমা। (শুধুমাত্র HTTP/1.0 এবং HTTP/1.1 এর ক্ষেত্রে প্রযোজ্য।)
- ব্রাউজারটি ডিস্ক ক্যাশে সংক্ষিপ্তভাবে স্থান বরাদ্দ করছে।
- উচ্চতর অগ্রাধিকার অনুরোধ রয়েছে। অনুরোধের অগ্রাধিকার নির্ধারিত হয় রিসোর্সের ধরণ, সেইসাথে ডকুমেন্টের মধ্যে এর অবস্থানের মতো বিষয়গুলির দ্বারা। আরও তথ্যের জন্য,
- স্থগিত । Queueing -এ বর্ণিত যেকোনো কারণে সংযোগ শুরু হওয়ার পরে অনুরোধটি স্থগিত করা যেতে পারে।
- DNS লুকআপ । ব্রাউজারটি অনুরোধের IP ঠিকানাটি সমাধান করছে।
- প্রাথমিক সংযোগ । ব্রাউজারটি একটি সংযোগ স্থাপন করছে, যার মধ্যে রয়েছে TCP হ্যান্ডশেক বা পুনরায় চেষ্টা এবং একটি SSL নিয়ে আলোচনা।
- প্রক্সি নেগোসিয়েশন । ব্রাউজারটি একটি প্রক্সি সার্ভারের সাথে অনুরোধটি নিয়ে আলোচনা করছে।
- অনুরোধ পাঠানো হয়েছে । অনুরোধটি পাঠানো হচ্ছে।
- সার্ভিস ওয়ার্কার প্রস্তুতি । ব্রাউজারটি সার্ভিস ওয়ার্কার চালু করছে।
- সার্ভিস ওয়ার্কারের কাছে অনুরোধ । অনুরোধটি সার্ভিস কর্মীর কাছে পাঠানো হচ্ছে।
- অপেক্ষা (TTFB) । ব্রাউজারটি প্রতিক্রিয়ার প্রথম বাইটের জন্য অপেক্ষা করছে। TTFB এর অর্থ হল টাইম টু ফার্স্ট বাইট। এই সময়ের মধ্যে রয়েছে ১ রাউন্ড ট্রিপ ল্যাটেন্সি এবং সার্ভার প্রতিক্রিয়া প্রস্তুত করতে যে সময় নিয়েছে।
- কন্টেন্ট ডাউনলোড । ব্রাউজারটি সরাসরি নেটওয়ার্ক থেকে অথবা কোনও পরিষেবা কর্মীর কাছ থেকে প্রতিক্রিয়া গ্রহণ করছে। এই মানটি হল প্রতিক্রিয়ার বডিটি পড়ার জন্য ব্যয় করা মোট সময়। প্রত্যাশিত মানগুলির চেয়ে বড় হলে এটি নির্দেশ করতে পারে যে নেটওয়ার্কটি ধীরগতির, অথবা ব্রাউজারটি অন্য কোনও কাজ করতে ব্যস্ত যা প্রতিক্রিয়াটি পড়তে বিলম্ব করে।
ইনিশিয়েটর এবং নির্ভরতা দেখুন
একটি অনুরোধের ইনিশিয়েটর এবং নির্ভরতা দেখতে, Shift ধরে রাখুন এবং অনুরোধ টেবিলে অনুরোধের উপর হোভার করুন। DevTools ইনিশিয়েটরগুলিকে সবুজ এবং নির্ভরতাগুলিকে লাল রঙ করে।
যখন রিকোয়েস্ট টেবিলটি কালানুক্রমিকভাবে সাজানো হয়, তখন আপনি যে রিকোয়েস্টের উপর ঘোরাফেরা করছেন তার উপরে প্রথম সবুজ রিকোয়েস্টটি হল ডিপেন্ডেন্সির ইনিশিয়েটর। যদি এর উপরে আরেকটি গ্রিন রিকোয়েস্ট থাকে, তাহলে সেই উচ্চতর রিকোয়েস্টটি হল ইনিশিয়েটরের ইনিশিয়েটর। ইত্যাদি।
লোড ইভেন্ট দেখুন
DevTools নেটওয়ার্ক প্যানেলে একাধিক স্থানে DOMContentLoaded এবং load ইভেন্টের সময় প্রদর্শন করে। DOMContentLoaded ইভেন্টটি নীল রঙের এবং load ইভেন্টটি লাল রঙের।
মোট অনুরোধের সংখ্যা দেখুন
নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে মোট অনুরোধের সংখ্যা তালিকাভুক্ত করা হয়েছে।
স্থানান্তরিত এবং লোড করা সম্পদের মোট আকার দেখুন
DevTools নেটওয়ার্ক প্যানেলের নীচের স্ট্যাটাস বারে স্থানান্তরিত এবং লোড করা (অসংকুচিত) রিসোর্সের মোট আকার তালিকাভুক্ত করে।
ব্রাউজারটি রিসোর্সগুলি আনকম্প্রেস করার পরে কত বড় রিসোর্স তা দেখতে রিসোর্সের আনকম্প্রেসড সাইজ দেখুন।
অনুরোধের কারণ হওয়া স্ট্যাক ট্রেসটি দেখুন
যখন একটি জাভাস্ক্রিপ্ট স্টেটমেন্ট কোনও রিসোর্স অনুরোধ করে, তখন অনুরোধের দিকে নিয়ে যাওয়া স্ট্যাক ট্রেসটি দেখতে ইনিশিয়েটর কলামের উপর কার্সার রাখুন।
একটি রিসোর্সের আনকম্প্রেসড সাইজ দেখুন
সেটিংস পরীক্ষা করুন 
> বড় অনুরোধ সারি এবং তারপর আকার কলামের নীচের মানটি দেখুন।
এই উদাহরণে, নেটওয়ার্কের মাধ্যমে পাঠানো www.google.com ডকুমেন্টের সংকুচিত আকার ছিল 43.8 KB , যেখানে আনকম্প্রেসড সাইজ ছিল 136 KB ।
অনুরোধের ডেটা রপ্তানি করুন
আপনি ফিল্টার প্রয়োগ করে অনুরোধের তালিকাটি রপ্তানি বা অনুলিপি করতে পারেন, যা পরবর্তীতে বর্ণিত বিভিন্ন উপায়ে করা হয়েছে।
সমস্ত নেটওয়ার্ক অনুরোধ একটি HAR ফাইলে সংরক্ষণ করুন
HAR (HTTP আর্কাইভ) হল একটি ফাইল ফর্ম্যাট যা বিভিন্ন HTTP সেশন টুল দ্বারা ক্যাপচার করা ডেটা এক্সপোর্ট করার জন্য ব্যবহৃত হয়। ফর্ম্যাটটি হল একটি JSON অবজেক্ট যার একটি নির্দিষ্ট ফিল্ড সেট থাকে।
সংবেদনশীল তথ্যের দুর্ঘটনাজনিত ফাঁসের সম্ভাবনা কমাতে, ডিফল্টরূপে আপনি HAR ফর্ম্যাটে "স্যানিটাইজড" নেটওয়ার্ক লগ রপ্তানি করতে পারেন যা Cookie , Set-Cookie এবং Authorization শিরোনামের মতো সংবেদনশীল তথ্য বাদ দেয়। প্রয়োজনে, আপনি সংবেদনশীল ডেটা সহ লগ রপ্তানিও করতে পারেন।
একটি HAR ফাইলে সমস্ত নেটওয়ার্ক অনুরোধ সংরক্ষণ করতে, দুটি উপায়ের মধ্যে একটি বেছে নিন:
অনুরোধ টেবিলের যেকোনো অনুরোধে ডান-ক্লিক করুন এবং Copy > Save all [listed] as HAR (sanitized) অথবা Save all [listed] as HAR (সংবেদনশীল ডেটা সহ) নির্বাচন করুন।
নেটওয়ার্ক প্যানেলের উপরের অ্যাকশন বারে এক্সপোর্ট HAR (স্যানিটাইজড)... এ ক্লিক করুন।
সংবেদনশীল ডেটা রপ্তানি করতে, প্রথমে > পছন্দ > নেটওয়ার্ক > চালু করুন । সংবেদনশীল ডেটা দিয়ে HAR তৈরি করতে অনুমতি দিন , তারপর এক্সপোর্ট বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে এক্সপোর্ট HAR (সংবেদনশীল ডেটা সহ) নির্বাচন করুন।
একবার আপনার কাছে একটি HAR ফাইল হয়ে গেলে, আপনি দুটি উপায়ে বিশ্লেষণের জন্য এটি DevTools-এ আবার আমদানি করতে পারেন:
- HAR ফাইলটি রিকোয়েস্ট টেবিলে টেনে আনুন।
- নেটওয়ার্ক প্যানেলের উপরের অ্যাকশন বারে ইমপোর্ট HAR- এ ক্লিক করুন।
একটি অনুরোধ, ফিল্টার করা অনুরোধের সেট, অথবা সবগুলো ক্লিপবোর্ডে কপি করুন
অনুরোধ টেবিলের নাম কলামের অধীনে, একটি অনুরোধে ডান-ক্লিক করুন, Copy এর উপর কার্সার রাখুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন।
একটি একক অনুরোধ, তার প্রতিক্রিয়া, অথবা স্ট্যাক ট্রেস কপি করতে:
- URL কপি করুন । অনুরোধের URL ক্লিপবোর্ডে কপি করুন।
- cURL হিসেবে কপি করুন । অনুরোধটি cURL কমান্ড হিসেবে কপি করুন।
- PowerShell হিসেবে কপি করুন । PowerShell কমান্ড হিসেবে অনুরোধটি কপি করুন।
- ফেচ হিসেবে কপি করুন । ফেচ কল হিসেবে অনুরোধটি কপি করুন।
- ফেচ (Node.js) হিসেবে কপি করুন । Node.js ফেচ কল হিসেবে অনুরোধটি কপি করুন।
- প্রতিক্রিয়া কপি করুন । প্রতিক্রিয়ার মূল অংশটি ক্লিপবোর্ডে কপি করুন।
- স্ট্যাক ট্রেস কপি করুন । অনুরোধের স্ট্যাক ট্র্যাকটি ক্লিপবোর্ডে কপি করুন।
সকল অনুরোধ কপি করতে:
- সকল URL কপি করুন । সকল অনুরোধের URL ক্লিপবোর্ডে কপি করুন।
- সবগুলো cURL হিসেবে কপি করুন । সবগুলো অনুরোধ cURL কমান্ডের একটি শৃঙ্খল হিসেবে কপি করুন।
- PowerShell হিসেবে সব কপি করুন । PowerShell কমান্ডের একটি শৃঙ্খল হিসেবে সব অনুরোধ কপি করুন।
- সবগুলো fetch হিসেবে কপি করুন । সবগুলো অনুরোধ fetch কলের একটি শৃঙ্খল হিসেবে কপি করুন।
- সবগুলো ফেচ (Node.js) হিসেবে কপি করুন । Node.js ফেচ কলের একটি শৃঙ্খল হিসেবে সকল অনুরোধ কপি করুন।
- সবগুলো HAR (স্যানিটাইজড) হিসেবে কপি করুন ।
Cookie,Set-CookieএবংAuthorizationহেডারের মতো সংবেদনশীল ডেটা ছাড়াই HAR ডেটা হিসেবে সকল অনুরোধ কপি করুন। - সবগুলো HAR হিসেবে কপি করুন (সংবেদনশীল তথ্য সহ) । সবগুলো অনুরোধ সংবেদনশীল তথ্য সহ HAR হিসেবে কপি করুন।
ফিল্টার করা অনুরোধের সেট কপি করতে, নেটওয়ার্ক লগে একটি ফিল্টার প্রয়োগ করুন, একটি অনুরোধে ডান-ক্লিক করুন এবং নির্বাচন করুন:
- তালিকাভুক্ত সকল URL কপি করুন । সকল ফিল্টার করা অনুরোধের URL ক্লিপবোর্ডে কপি করুন।
- তালিকাভুক্ত সকলকে cURL হিসেবে কপি করুন । সকল ফিল্টার করা অনুরোধকে cURL কমান্ডের একটি শৃঙ্খল হিসেবে কপি করুন।
- PowerShell হিসাবে তালিকাভুক্ত সমস্ত অনুলিপি করুন । PowerShell কমান্ডের একটি শৃঙ্খল হিসাবে সমস্ত ফিল্টার করা অনুরোধ অনুলিপি করুন।
- তালিকাভুক্ত সকলকে fetch হিসেবে কপি করুন । সকল ফিল্টার করা অনুরোধকে fetch কলের একটি শৃঙ্খল হিসেবে কপি করুন।
- তালিকাভুক্ত সকলকে fetch (Node.js) হিসেবে কপি করুন । Node.js fetch কলের একটি শৃঙ্খল হিসেবে সকল ফিল্টার করা অনুরোধ কপি করুন।
- HAR (স্যানিটাইজড) হিসেবে তালিকাভুক্ত সকল কপি করুন ।
Cookie,Set-CookieএবংAuthorizationহেডারের মতো সংবেদনশীল ডেটা ছাড়াই সমস্ত ফিল্টার করা অনুরোধ HAR ডেটা হিসেবে কপি করুন। - HAR হিসেবে তালিকাভুক্ত সকল তথ্য (সংবেদনশীল তথ্য সহ) অনুলিপি করুন । সংবেদনশীল তথ্য সহ সকল ফিল্টার করা অনুরোধ HAR হিসেবে অনুলিপি করুন।
নেটওয়ার্ক প্যানেলের লেআউট পরিবর্তন করুন
আপনার কাছে কী গুরুত্বপূর্ণ তার উপর ফোকাস করতে নেটওয়ার্ক প্যানেল UI এর বিভাগগুলি প্রসারিত বা সঙ্কুচিত করুন।
ফিল্টার অ্যাকশন বার লুকান
ডিফল্টরূপে, DevTools নেটওয়ার্ক প্যানেলের উপরে ফিল্টার বারটি দেখায়। এটি লুকানোর জন্য ফিল্টারে ক্লিক করুন।
বড় অনুরোধ সারি ব্যবহার করুন
আপনার নেটওয়ার্ক অনুরোধ টেবিলে আরও বেশি ফাঁকা স্থান চাইলে বড় সারি ব্যবহার করুন। বড় সারি ব্যবহার করার সময় কিছু কলাম আরও কিছু তথ্য প্রদান করে। উদাহরণস্বরূপ, আকার কলামের নীচের মান হল একটি অনুরোধের অসংকুচিত আকার এবং অগ্রাধিকার কলামটি প্রাথমিক (নীচের মান) এবং চূড়ান্ত (শীর্ষ মান) ফেচ অগ্রাধিকার উভয়ই দেখায়।
সেটিংস খুলুন 
এবং বড় সারি দেখতে Big request rows-এ ক্লিক করুন।
ওভারভিউ ট্র্যাকটি লুকান
ডিফল্টরূপে, DevTools ওভারভিউ ট্র্যাকটি দেখায়। সেটিংস খুলুন 
and clear the Show overview checkbox to hide it.
