Chrome DevTools-এর নেটওয়ার্ক অ্যানালাইসিস ফিচারগুলোর এই বিশদ রেফারেন্সের মাধ্যমে আপনার পেজ কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন উপায়গুলো জানুন।
নেটওয়ার্ক অনুরোধ রেকর্ড করুন
ডিফল্টরূপে, DevTools খোলা থাকা অবস্থায় নেটওয়ার্ক প্যানেলে সমস্ত নেটওয়ার্ক অনুরোধ রেকর্ড করে।
নেটওয়ার্ক অনুরোধ রেকর্ড করা বন্ধ করুন
রেকর্ডিং অনুরোধ বন্ধ করতে:
- নেটওয়ার্ক লগ রেকর্ডিং বন্ধ করতে ক্লিক করুন
নেটওয়ার্ক প্যানেলে। এটি ধূসর হয়ে যায়, যা নির্দেশ করে যে DevTools আর অনুরোধ রেকর্ড করছে না। - নেটওয়ার্ক প্যানেল ফোকাসে থাকা অবস্থায় Command > + E (Mac) অথবা Control + E (Windows, Linux) চাপুন।
স্পষ্ট অনুরোধ
ক্লিয়ার ক্লিক করুন 
রিকোয়েস্ট টেবিল থেকে সমস্ত অনুরোধ মুছে ফেলার জন্য নেটওয়ার্ক প্যানেলে যান।
পৃষ্ঠা লোড হওয়ার সাথে সাথে অনুরোধগুলি সংরক্ষণ করুন
পেজ লোডের সময় অনুরোধগুলি সংরক্ষণ করতে, নেটওয়ার্ক প্যানেলে থাকা ‘প্রিজার্ভ লগ’ চেকবক্সটি চেক করুন। আপনি ‘প্রিজার্ভ লগ’ নিষ্ক্রিয় না করা পর্যন্ত ডেভটুলস সমস্ত অনুরোধ সংরক্ষণ করে রাখে।
পৃষ্ঠা লোড হওয়ার সময় স্ক্রিনশট নিন
আপনার পেজ লোড হওয়ার জন্য অপেক্ষা করার সময় ব্যবহারকারীরা কী দেখেন, তা বিশ্লেষণ করতে স্ক্রিনশট নিন।
স্ক্রিনশট চালু করতে, সেটিংস খুলুন। 
নেটওয়ার্ক প্যানেলের ভিতরে গিয়ে ‘ক্যাপচার স্ক্রিনশট’ চেক করুন।
স্ক্রিনশট নেওয়ার জন্য, নেটওয়ার্ক প্যানেলটি ফোকাসে থাকা অবস্থায় পেজটি রিলোড করুন।
একবার ক্যাপচার করা হয়ে গেলে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারেন:
- স্ক্রিনশটটি ঠিক কোন মুহূর্তে তোলা হয়েছিল তা দেখতে সেটির উপর মাউস রাখুন। ওভারভিউ টাইমলাইনে একটি হলুদ রেখা দেখা যাবে।
- স্ক্রিনশটটি তোলার পরে হওয়া যেকোনো অনুরোধ ফিল্টার করে বাদ দিতে, স্ক্রিনশটটির থাম্বনেইলে ক্লিক করুন।
- কোনো থাম্বনেইল জুম করতে সেটিতে ডাবল-ক্লিক করুন।
XHR অনুরোধের উত্তর দিন
একটি XHR অনুরোধ পুনরায় চালাতে, Requests টেবিলে নিম্নলিখিতগুলির মধ্যে একটি করুন:
- অনুরোধটি নির্বাচন করুন এবং R চাপুন।
- অনুরোধটির উপর রাইট-ক্লিক করুন এবং Replay XHR নির্বাচন করুন।
লোডিং আচরণ পরিবর্তন করুন
ব্রাউজার ক্যাশে নিষ্ক্রিয় করে একজন প্রথমবার পরিদর্শকের মতো আচরণ করুন।
To emulate how a first-time user experiences your site, check the Disable cache checkbox. DevTools disables the browser cache. This more accurately emulates a first-time user's experience, because requests are served from the browser cache on repeat visits.
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে নিষ্ক্রিয় করুন।
অন্যান্য ডেভটুলস প্যানেলে কাজ করার সময় যদি আপনি ক্যাশে নিষ্ক্রিয় করতে চান, তাহলে নেটওয়ার্ক কন্ডিশনস ড্রয়ারটি ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ারটি খোলার জন্য আইকনটি ব্যবহার করুন। - Disable cache চেকবক্সটি চেক করুন অথবা আনচেক করুন।
ম্যানুয়ালি ব্রাউজার ক্যাশে পরিষ্কার করুন
যেকোনো সময় ম্যানুয়ালি ব্রাউজার ক্যাশ পরিষ্কার করতে, Requests টেবিলের যেকোনো জায়গায় রাইট-ক্লিক করুন এবং Clear browser cache নির্বাচন করুন।
অফলাইন অনুকরণ করুন
There's a new class of web apps, called Progressive Web Apps , which can function offline with the help of service workers . When you're building this type of app, it's useful to be able to quickly simulate a device that has no data connection.
সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতা অনুকরণ করতে, '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 ।
- উইন্ডোজ বা লিনাক্সে, কন্ট্রোল + এফ চাপুন।
সার্চ ট্যাবে আপনার কোয়েরি লিখে এন্টার চাপুন। ঐচ্ছিকভাবে, কেস সেনসিটিভিটি বা রেগুলার এক্সপ্রেশন চালু করতে যথাক্রমে বা ক্লিক করুন।
Click one of the search results. The Network panel highlights in yellow the request that matched. Additionally, the panel also opens the Headers or Response tab and highlights the string that matched there, if any.
অনুসন্ধানের ফলাফল রিফ্রেশ করতে, -এ ক্লিক করুন। ফলাফল মুছে ফেলতে, ক্লিক করুন।
DevTools-এ আপনি যে সমস্ত উপায়ে অনুসন্ধান করতে পারেন সে সম্পর্কে আরও তথ্যের জন্য, "অনুসন্ধান: লোড করা সমস্ত রিসোর্স জুড়ে টেক্সট খুঁজুন" দেখুন।
অনুরোধ ফিল্টার করুন
বৈশিষ্ট্য অনুসারে অনুরোধগুলি ফিল্টার করুন
ডোমেইন বা অনুরোধের আকারের মতো বৈশিষ্ট্য অনুযায়ী অনুরোধগুলি ফিল্টার করতে ফিল্টার বক্সটি ব্যবহার করুন।
আপনি যদি বক্সটি দেখতে না পান, তাহলে সম্ভবত ফিল্টার বারটি লুকানো আছে। ফিল্টার বার লুকান দেখুন।
আপনার ফিল্টারটি উল্টানোর জন্য, ফিল্টার বক্সের পাশে থাকা ইনভার্ট চেকবক্সটিতে টিক দিন।
You can use multiple properties simultaneously by separating each property with a space. For example, mime-type:image/gif larger-than:1K displays all GIFs that are larger than one kilobyte. These multi-property filters are equivalent to AND operations. OR operations aren't supported.
এরপরে সমর্থিত প্রপার্টিগুলোর একটি সম্পূর্ণ তালিকা দেওয়া হলো।
-
cookie-domain। যে রিসোর্সগুলো একটি নির্দিষ্ট কুকি ডোমেইন সেট করে, সেগুলো দেখান। -
cookie-name. যে রিসোর্সগুলো একটি নির্দিষ্ট কুকি-নাম সেট করেছে, সেগুলো দেখান। -
cookie-path. যে রিসোর্সগুলো একটি নির্দিষ্ট কুকি পাথ সেট করেছে, সেগুলো দেখান। -
cookie-value। যে রিসোর্সগুলো একটি নির্দিষ্ট কুকি মান সেট করে, সেগুলো দেখান। -
domain. Only display resources from the specified domain. You can use a wildcard character (*) to include multiple domains. For example,*.comdisplays resources from all domain names ending in.com. DevTools shows a populates the autocomplete drop-down menu with all of the domains it has encountered. -
has-overrides. সেইসব রিকোয়েস্ট দেখান যেগুলোতেcontent,headers, বা যেকোনো ওভাররাইড ওভাররাইড করা হয়েছে (yes), অথবা কোনো ওভাররাইড নেই (no)। আপনি রিকোয়েস্ট টেবিলে সংশ্লিষ্ট Has overrides কলামটি যোগ করতে পারেন। -
has-response-header. Show the resources that contain the specified HTTP response header. DevTools populates the autocomplete drop-down with all of the response headers that it has encountered. -
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. Show the resources that have aSet-Cookieheader with aDomainattribute that matches the specified value. DevTools populates the autocomplete with all of the cookie domains that it has encountered. -
set-cookie-name. Show the resources that have aSet-Cookieheader with a name that matches the specified value. DevTools populates the autocomplete with all of the cookie names that it has encountered. -
set-cookie-value. Show the resources that have aSet-Cookieheader with a value that matches the specified value. DevTools populates the autocomplete with all of the cookie values that it has encountered. -
status-code। শুধুমাত্র সেইসব রিসোর্স দেখান যাদের HTTP স্ট্যাটাস কোড নির্দিষ্ট কোডের সাথে মেলে। DevTools তার সম্মুখীন হওয়া সমস্ত স্ট্যাটাস কোড দিয়ে অটোকমপ্লিট ড্রপ-ডাউন মেনুটি পূরণ করে। -
url. সেই রিসোর্সগুলো দেখান যাদেরurlনির্দিষ্ট মানের সাথে মেলে।
প্রকার অনুসারে অনুরোধ ফিল্টার করুন
To filter requests by resource type, click the All , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket), Wasm (WebAssembly), Manifest , or Other (any other type not listed here) buttons on the Network panel.
আপনি যদি এই বাটনগুলো দেখতে না পান, তাহলে সম্ভবত ফিল্টার অ্যাকশন বারটি লুকানো আছে। ফিল্টার বার লুকানো দেখুন।
To show resources of multiple types simultaneously, hold Command (Mac) or Control (Windows, Linux) and then click several type filters.
সময় অনুযায়ী অনুরোধ ফিল্টার করুন
Drag left or right on the Overview timeline to display only the requests that were active during that timeframe. The filter is inclusive. Any request that was active during the highlighted time is shown.
ডেটা ইউআরএল লুকান
ডেটা ইউআরএল হলো অন্যান্য ডকুমেন্টের মধ্যে এমবেড করা ছোট ফাইল। রিকোয়েস্টস টেবিলে আপনি যে কোনো অনুরোধ দেখেন যা data: দিয়ে শুরু হয়, সেটিই একটি ডেটা ইউআরএল।
এই অনুরোধগুলি লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ডেটা ইউআরএল লুকান নির্বাচন করুন।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
এক্সটেনশন ইউআরএল লুকান
আপনার লেখা কোডের উপর মনোযোগ কেন্দ্রীভূত করতে, আপনি ক্রোমে ইনস্টল করা এক্সটেনশনগুলো থেকে পাঠানো অপ্রাসঙ্গিক অনুরোধগুলো ফিল্টার করে বাদ দিতে পারেন। এক্সটেনশনের অনুরোধগুলোর URL chrome-extension:// দিয়ে শুরু হয়।
এক্সটেনশন অনুরোধগুলি লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার নির্বাচন করুন > এক্সটেনশন ইউআরএল লুকান টিক দিন।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
শুধুমাত্র ব্লক করা প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখান
যেকোনো কারণে রেসপন্স কুকি ব্লক করা অনুরোধগুলো ছাড়া বাকি সবকিছু ফিল্টার করে বাদ দিতে, ফিল্টার অ্যাকশন বারে, ‘More filters’ নির্বাচন করুন > ‘Blocked response cookies’ ।
নিচের স্ট্যাটাস বারটি মোট অনুরোধের মধ্যে প্রদর্শিত অনুরোধের সংখ্যা দেখায়।
একটি রেসপন্স কুকি কেন ব্লক করা হয়েছিল তার কারণ জানতে, রিকোয়েস্টটি সিলেক্ট করুন, এর কুকিজ ট্যাবটি খুলুন এবং আইকনটির উপর মাউস রাখুন।
Additionally, the Network panel shows a warning icon next to a request with cookies blocked either because of Chrome flags or configuration. Hover over the icon to see a tooltip with a clue and click it to go to the Issues panel for more information.
শুধুমাত্র ব্লক করা অনুরোধগুলি দেখান
To filter out everything except blocked requests, in the Filters action bar, select More filters > Blocked requests . To test this, you can use the Network request blocking tab in the drawer.
রিকোয়েস্ট টেবিলে ব্লক করা রিকোয়েস্টগুলো লাল রঙে হাইলাইট করা হয়। নিচের স্ট্যাটাস বারটি মোট রিকোয়েস্টের মধ্যে প্রদর্শিত রিকোয়েস্টের সংখ্যা দেখায়।
শুধুমাত্র তৃতীয় পক্ষের অনুরোধগুলি দেখান
পেজের অরিজিন থেকে ভিন্ন অরিজিনের রিকোয়েস্টগুলো ছাড়া বাকি সবকিছু ফিল্টার করে বাদ দিতে, ফিল্টার অ্যাকশন বারে, ‘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 টেবিলের হেডারে রাইট-ক্লিক করে এটিকে লুকানো বা দেখানোর জন্য একটি অপশন বেছে নিন। প্রদর্শিত অপশনগুলোর পাশে টিক চিহ্ন দেওয়া আছে।
আপনি নিম্নলিখিত অতিরিক্ত কলামগুলি যোগ বা অপসারণ করতে পারেন:
- পাথ . ইউআরএল-এর পাথ অংশ।
- URL . অনুরোধটির সম্পূর্ণ URL।
- অনুরোধ নং । অনুরোধ শুরুর চূড়ান্ত ক্রম।
- মেথড . অনুরোধের HTTP মেথড (উদাহরণস্বরূপ,
GET,POST,PUT,DELETE)। - প্রোটোকল । অনুরোধের প্রোটোকল (উদাহরণস্বরূপ, HTTP/2-এর জন্য
h2, HTTP/3-এর জন্যh3, ইত্যাদি)। - Scheme . The scheme part of the URL.
- ডোমেইন . ইউআরএল-এর ডোমেইন অংশ।
- রিমোট অ্যাড্রেস । অনুরোধের রিমোট আইপি অ্যাড্রেস এবং পোর্ট।
- রিমোট অ্যাড্রেস স্পেস । অনুরোধটির রিমোট অ্যাড্রেস স্পেস। পাবলিক আইপি-এর জন্য
Public, প্রাইভেট আইপি-এর জন্যPrivate। - প্রবর্তকের ঠিকানা স্থান । অনুরোধটির প্রবর্তকের ঠিকানা স্থান। রিমোটের অনুরূপ।
- কুকি । অনুরোধে থাকা কুকির সংখ্যা।
- কুকি সেট করুন । রেসপন্সে থাকা কুকির সংখ্যা।
- অগ্রাধিকার । অনুরোধটির অগ্রাধিকার।
- সংযোগ আইডি । ক্লায়েন্ট সেশনে অনুরোধটির সংযোগ আইডি, যদি থাকে।
- ওভাররাইড আছে কিনা । অনুরোধটিতে ওভাররাইড আছে কি না (হ্যাঁ, না, কন্টেন্ট, বা হেডার)।
- বিজ্ঞাপন-সম্পর্কিত কি ? সত্য না মিথ্যা।
- রেন্ডার-ব্লকিং । অনুরোধটি রেন্ডার-ব্লকিং, সম্ভাব্য ব্লকিং, নাকি নয়।
- ওয়াটারফল । প্রতিটি অনুরোধের কার্যকলাপের একটি চাক্ষুষ বিশ্লেষণ।
কাস্টম কলাম যোগ করুন
Requests টেবিলে একটি কাস্টম কলাম যোগ করতে:
- Requests টেবিলের হেডারে রাইট-ক্লিক করুন এবং Response Headers > Manage Header Columns নির্বাচন করুন।
- ডায়ালগ উইন্ডোতে, 'Add custom header'-এ ক্লিক করুন, এর নাম লিখুন এবং 'Add'-এ ক্লিক করুন।
ইনলাইন ফ্রেম অনুসারে অনুরোধগুলিকে গ্রুপ করুন
যদি কোনো পৃষ্ঠার ইনলাইন ফ্রেমগুলো থেকে প্রচুর অনুরোধ পাঠানো হয়, তাহলে সেগুলোকে গ্রুপ করে রিকোয়েস্ট লগটিকে আরও ব্যবহার-বান্ধব করে তোলা যায়।
আইফ্রেম অনুযায়ী অনুরোধগুলিকে গ্রুপ করতে, সেটিংস খুলুন। 
নেটওয়ার্ক প্যানেলের ভিতরে ‘Group by frame’ চেক করুন।
ইনলাইন ফ্রেম দ্বারা শুরু করা কোনো অনুরোধ দেখতে, অনুরোধ লগ-এ সেটিকে প্রসারিত করুন।
অনুরোধগুলোর পারস্পরিক সময় দেখুন
Use the Waterfall to view the timing of requests in relation to one another. By default, the Waterfall is organized by the start time of the requests. So, requests that are farther to the left started earlier than those that are farther to the right.
ওয়াটারফলটি সাজানোর বিভিন্ন উপায় দেখতে ‘অ্যাক্টিভিটি ফেজ অনুযায়ী সাজান’ দেখুন।
একটি ওয়েবসকেট সংযোগের বার্তাগুলো বিশ্লেষণ করুন
একটি ওয়েবসকেট সংযোগের বার্তাগুলি দেখতে:
- Requests টেবিলের Name কলামের অধীনে WebSocket সংযোগের URL-টিতে ক্লিক করুন।
- মেসেজ ট্যাবটি খুলুন। টেবিলটিতে শেষ ১০০টি মেসেজ দেখানো হচ্ছে।
টেবিলটি রিফ্রেশ করতে, Requests টেবিলের Name কলামের অধীনে থাকা WebSocket কানেকশনের নামের উপর পুনরায় ক্লিক করুন।
সারণিটিতে তিনটি কলাম রয়েছে:
- Data . The message payload. If the message is plain text, it's displayed here. For binary opcodes, this column displays the opcode's name and code. The following opcodes are supported: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame.
- দৈর্ঘ্য । মেসেজ পেলোডের দৈর্ঘ্য, বাইটে।
- সময় । যে সময়ে বার্তাটি গ্রহণ বা প্রেরণ করা হয়েছিল।
বার্তাগুলো তাদের প্রকারভেদ অনুযায়ী বিভিন্ন রঙে চিহ্নিত করা হয়েছে:
- পাঠানো টেক্সট মেসেজগুলো হালকা সবুজ রঙের হয়।
- আগত টেক্সট মেসেজগুলো সাদা রঙের।
- 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... ’ সতর্কীকরণ বার্তাটি দেখা যায়। এর নিম্নলিখিত কারণগুলি থাকতে পারে:
The request wasn't sent over the network but was served from a local cache, which doesn't store the original request headers. In this case, you can disable caching to see the full request headers.
নেটওয়ার্ক রিসোর্সটি বৈধ নয়। উদাহরণস্বরূপ, কনসোলে
fetch("https://jec.fish.com/unknown-url/")চালান।
নিরাপত্তাজনিত কারণে ডেভটুলস শুধুমাত্র অস্থায়ী হেডারগুলোও প্রদর্শন করতে পারে।
অনুরোধ পেলোড দেখুন
To view the request's payload, that is, its query string parameters and form data, select a request from the Requests table and open the Payload tab.
পেলোড উৎস দেখুন
ডিফল্টরূপে, ডেভটুলস পেলোডটি মানুষের পাঠযোগ্য আকারে দেখায়।
কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটার উৎস দেখতে, পেলোড ট্যাবে, কোয়েরি স্ট্রিং প্যারামিটার অথবা ফর্ম ডেটা সেকশনের পাশে থাকা ভিউ সোর্স-এ ক্লিক করুন।
কোয়েরি স্ট্রিং প্যারামিটারের URL-ডিকোড করা আর্গুমেন্টগুলো দেখুন
আর্গুমেন্টগুলির জন্য ইউআরএল-এনকোডিং টগল করতে, পেলোড ট্যাবে 'ভিউ ডিকোডেড' বা 'ভিউ ইউআরএল-এনকোডেড'-এ ক্লিক করুন।
কুকি দেখুন
অনুরোধের HTTP হেডারে পাঠানো কুকিগুলো দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- কুকিজ ট্যাবটি খুলুন।
প্রতিটি কলামের বিবরণের জন্য, ফিল্ডস দেখুন।
কুকি পরিবর্তন করতে, ‘ কুকি দেখুন, সম্পাদনা করুন এবং মুছুন’ দেখুন।
ডিভাইস-সংযুক্ত সেশনগুলি দেখুন
ডিভাইস বাউন্ড সেশনস ট্যাবটি একটি সাইটের সমস্ত সক্রিয় ডিভাইস বাউন্ড সেশনের জন্য নির্বাচিত অনুরোধের সাথে সম্পর্কিত ডিফারাল (রিফ্রেশ) তথ্য দেখায়।
স্থগিতকরণ (রিফ্রেশ) তথ্য দেখতে:
- Requests টেবিলের Name কলাম থেকে একটি অনুরোধ নির্বাচন করুন।
- ডিভাইস বাউন্ড সেশন ট্যাবটি খুলুন।
The Device bound sessions tab is shown only for relevant requests with cookies. The tab lists all active device bound sessions and whether the sessions deferred the request (and if not, why). The possible deferral options are:
-
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 কলামে অনুরোধটির এন্ট্রির উপর মাউস রাখুন।
হোভার না করে এই ডেটা অ্যাক্সেস করার একটি পদ্ধতির জন্য করা অনুরোধের সময়ভিত্তিক বিভাজন দেখুন ।
সময় বিভাজনের পর্যায়গুলি ব্যাখ্যা করা হয়েছে
টাইমিং ট্যাবে আপনি যে পর্যায়গুলো দেখতে পারেন, সেগুলোর প্রত্যেকটি সম্পর্কে এখানে আরও তথ্য দেওয়া হলো:
- সারিবদ্ধকরণ । ব্রাউজার সংযোগ শুরুর আগে এবং নিম্নলিখিত ক্ষেত্রে অনুরোধগুলিকে সারিবদ্ধ করে:
- There are higher priority requests. Request priority is determined by factors such as the type of a resource, as well as its location within the document. For more information, read the resource priority section of the
fetchpriorityguide. - এই অরিজিনের জন্য ইতিমধ্যে ছয়টি TCP কানেকশন খোলা আছে, যা এর সীমা। (শুধুমাত্র HTTP/1.0 এবং HTTP/1.1 এর ক্ষেত্রে প্রযোজ্য।)
- ব্রাউজারটি কিছু সময়ের জন্য ডিস্ক ক্যাশে জায়গা বরাদ্দ করছে।
- There are higher priority requests. Request priority is determined by factors such as the type of a resource, as well as its location within the document. For more information, read the resource priority section of the
- আটকে গেছে । কিউইং (Queueing) অংশে বর্ণিত যেকোনো কারণে সংযোগ শুরু হওয়ার পর অনুরোধটি আটকে যেতে পারে।
- ডিএনএস অনুসন্ধান । ব্রাউজারটি অনুরোধটির আইপি ঠিকানা নির্ণয় করছে।
- প্রাথমিক সংযোগ । ব্রাউজারটি একটি সংযোগ স্থাপন করছে, যার মধ্যে TCP হ্যান্ডশেক বা পুনঃপ্রচেষ্টা এবং SSL নিয়ে আলোচনা অন্তর্ভুক্ত রয়েছে।
- প্রক্সি নেগোসিয়েশন । ব্রাউজারটি একটি প্রক্সি সার্ভারের সাথে অনুরোধটি নিয়ে আলোচনা করছে।
- অনুরোধ পাঠানো হয়েছে । অনুরোধটি পাঠানো হচ্ছে।
- সার্ভিসওয়ার্কার প্রস্তুতি । ব্রাউজারটি সার্ভিসওয়ার্কারটি চালু করছে।
- সার্ভিসওয়ার্কারের কাছে অনুরোধ । অনুরোধটি সার্ভিসওয়ার্কারের কাছে পাঠানো হচ্ছে।
- Waiting (TTFB) . The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.
- Content Download . The browser is receiving the response, either directly from the network or from a service worker. This value is the total amount of time spent reading the response body. Larger than expected values could indicate a slow network, or that the browser is busy performing other work which delays the response from being read.
প্রবর্তক এবং নির্ভরতা দেখুন
কোনো অনুরোধের সূচনাকারী এবং নির্ভরশীলতা দেখতে, Requests টেবিলে অনুরোধটির উপর Shift চেপে ধরে মাউস রাখুন। DevTools সূচনাকারীদের সবুজ এবং নির্ভরশীলতাগুলোকে লাল রঙে চিহ্নিত করে।
When the Requests table is ordered chronologically, the first green request above the request that you're hovering over is the initiator of the dependency. If there's another green request above that, that higher request is the initiator of the initiator. And so on.
লোড ইভেন্টগুলি দেখুন
DevTools নেটওয়ার্ক প্যানেলের একাধিক স্থানে DOMContentLoaded এবং load ইভেন্টগুলোর সময় প্রদর্শন করে। DOMContentLoaded ইভেন্টটি নীল রঙে এবং load ইভেন্টটি লাল রঙে দেখানো হয়।
মোট অনুরোধের সংখ্যা দেখুন
The total number of requests is listed in the status bar at the bottom of the Network panel.
স্থানান্তরিত এবং লোড করা রিসোর্সের মোট আকার দেখুন
DevTools নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে স্থানান্তরিত এবং লোড করা (অসংকুচিত) রিসোর্সগুলির মোট আকার তালিকাভুক্ত করে।
ব্রাউজার কোনো রিসোর্সকে আনকমপ্রেস করার পর সেটির আকার কেমন হয় তা দেখতে, "View the uncompressed size of a resource" দেখুন।
যে স্ট্যাক ট্রেসটির কারণে অনুরোধটি করা হয়েছিল তা দেখুন।
যখন কোনো জাভাস্ক্রিপ্ট স্টেটমেন্টের কারণে কোনো রিসোর্স অনুরোধ করা হয়, তখন অনুরোধটি পর্যন্ত স্ট্যাক ট্রেস দেখতে ইনিশিয়েটর কলামের উপর মাউস রাখুন।
কোনো রিসোর্সের অসংকুচিত আকার দেখুন
সেটিংস পরীক্ষা করুন 
বড় অনুরোধের সারিগুলো দেখুন এবং তারপর Size কলামের সর্বনিম্ন মানটি দেখুন।
এই উদাহরণে, নেটওয়ার্কের মাধ্যমে পাঠানো www.google.com ডকুমেন্টটির কম্প্রেসড সাইজ ছিল 43.8 KB , যেখানে আনকম্প্রেসড সাইজ ছিল 136 KB ।
রপ্তানি অনুরোধ ডেটা
পরবর্তীতে বর্ণিত বিভিন্ন উপায়ে আপনি ফিল্টার প্রয়োগ করে অনুরোধের তালিকাটি এক্সপোর্ট বা কপি করতে পারেন।
সমস্ত নেটওয়ার্ক অনুরোধ একটি HAR ফাইলে সংরক্ষণ করুন
HAR (HTTP Archive) হলো একটি ফাইল ফরম্যাট যা বিভিন্ন HTTP সেশন টুল দ্বারা সংগৃহীত ডেটা এক্সপোর্ট করার জন্য ব্যবহৃত হয়। এই ফরম্যাটটি একটি JSON অবজেক্ট, যাতে নির্দিষ্ট কিছু ফিল্ড থাকে।
To reduce the chances of accidental leaks of sensitive information, by default you can export the "sanitized" network log in HAR format that excludes sensitive information such as Cookie , Set-Cookie , and Authorization headers. If required, you can also export the log with sensitive data.
সমস্ত নেটওয়ার্ক অনুরোধ একটি HAR ফাইলে সংরক্ষণ করতে, দুটি পদ্ধতির মধ্যে একটি বেছে নিন:
Requests টেবিলের যেকোনো অনুরোধে রাইট-ক্লিক করুন এবং Copy > Save all [listed] as HAR (sanitized) অথবা Save all [listed] as HAR (with sensitive data) নির্বাচন করুন।
নেটওয়ার্ক প্যানেলের শীর্ষে থাকা অ্যাকশন বারে এক্সপোর্ট HAR (স্যানিটাইজড)...’- এ ক্লিক করুন।
To export with sensitive data, first, turn on Settings > Preferences > Network > Allow to generate HAR with sensitive data , then click the Export button and select Export HAR (with sensitive data) from the drop-down menu.
একবার আপনার কাছে একটি 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 ডেটা হিসেবে কপি করুন।
To copy a filtered set of requests, apply a filter to the network log, right-click a request, and select:
- Copy all listed URLs . Copy URLs of all filtered requests to the clipboard.
- Copy all listed as cURL . Copy all filtered requests as a chain of cURL commands.
- Copy all listed as PowerShell . Copy all filtered requests as a chain of PowerShell commands.
- Copy all listed as fetch . Copy all filtered requests as a chain of fetch calls.
- Copy all listed as fetch (Node.js) . Copy all filtered requests as a chain of Node.js fetch calls.
- Copy all listed as HAR (sanitized) . Copy all filtered requests as HAR data without sensitive data such as
Cookie,Set-Cookie, andAuthorizationheaders. - Copy all listed as HAR (with sensitive data) . Copy all filtered requests as HAR data with sensitive data.
Change the layout of the Network panel
Expand or collapse sections of the Network panel UI to focus on what's important to you.
Hide the Filters action bar
By default, DevTools shows the Filters bar at the top of the Network panel. Click Filter to hide it.
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.
