Chrome DevTools নেটওয়ার্ক বিশ্লেষণ বৈশিষ্ট্যগুলির এই ব্যাপক রেফারেন্সে আপনার পৃষ্ঠা কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন উপায়গুলি আবিষ্কার করুন৷
রেকর্ড নেটওয়ার্ক অনুরোধ
ডিফল্টরূপে, DevTools নেটওয়ার্ক প্যানেলে সমস্ত নেটওয়ার্ক অনুরোধ রেকর্ড করে, যতক্ষণ না DevTools খোলা থাকে।
নেটওয়ার্ক অনুরোধ রেকর্ডিং বন্ধ করুন
রেকর্ডিং অনুরোধ বন্ধ করতে:
- নেটওয়ার্ক লগ রেকর্ডিং বন্ধ করুন ক্লিক করুন
নেটওয়ার্ক প্যানেলে। DevTools আর অনুরোধ রেকর্ড করছে না তা বোঝাতে এটি ধূসর হয়ে যায়।
- নেটওয়ার্ক প্যানেল ফোকাসে থাকাকালীন কমান্ড > + E (ম্যাক) বা কন্ট্রোল + ই (উইন্ডোজ, লিনাক্স) টিপুন।
সাফ অনুরোধ
সাফ ক্লিক করুন অনুরোধ টেবিল থেকে সমস্ত অনুরোধ সাফ করতে নেটওয়ার্ক প্যানেলে।
পৃষ্ঠা লোড জুড়ে অনুরোধ সংরক্ষণ করুন
পৃষ্ঠা লোড জুড়ে অনুরোধগুলি সংরক্ষণ করতে, নেটওয়ার্ক প্যানেলে লগ সংরক্ষণ করুন চেকবক্সটি চেক করুন। আপনি সংরক্ষণ লগ অক্ষম না করা পর্যন্ত DevTools সমস্ত অনুরোধ সংরক্ষণ করে।
পৃষ্ঠা লোডের সময় স্ক্রিনশট ক্যাপচার করুন
ব্যবহারকারীরা আপনার পৃষ্ঠা লোড হওয়ার জন্য অপেক্ষা করার সময় কী দেখছেন তা বিশ্লেষণ করতে স্ক্রিনশট ক্যাপচার করুন।
স্ক্রিনশট সক্ষম করতে, সেটিংস খুলুন নেটওয়ার্ক প্যানেলের ভিতরে এবং ক্যাপচার স্ক্রিনশট চেক করুন।
স্ক্রিনশট ক্যাপচার করার জন্য নেটওয়ার্ক প্যানেল ফোকাসে থাকাকালীন পৃষ্ঠাটি পুনরায় লোড করুন৷
একবার ক্যাপচার করা হলে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটগুলির সাথে ইন্টারঅ্যাক্ট করতে পারেন:
- সেই স্ক্রিনশটটি যে বিন্দুতে ক্যাপচার করা হয়েছিল তা দেখতে একটি স্ক্রিনশটের উপর হোভার করুন৷ ওভারভিউ টাইমলাইনে একটি হলুদ লাইন দেখা যাচ্ছে।
- স্ক্রিনশট ক্যাপচার করার পরে যেকোন অনুরোধগুলি ফিল্টার করতে একটি স্ক্রিনশটের থাম্বনেইলে ক্লিক করুন৷
- একটি থাম্বনেইলে জুম বাড়াতে ডাবল-ক্লিক করুন।
XHR অনুরোধ রিপ্লে করুন
একটি XHR অনুরোধ রিপ্লে করতে, অনুরোধ টেবিলে নিম্নলিখিতগুলির মধ্যে একটি করুন:
- অনুরোধটি নির্বাচন করুন এবং R চাপুন।
- অনুরোধটিতে ডান ক্লিক করুন এবং রিপ্লে এক্সএইচআর নির্বাচন করুন।
লোডিং আচরণ পরিবর্তন করুন
ব্রাউজার ক্যাশে নিষ্ক্রিয় করে প্রথমবারের দর্শকদের অনুকরণ করুন
একজন প্রথমবার ব্যবহারকারী আপনার সাইটের অভিজ্ঞতা কেমন তা অনুকরণ করতে, ক্যাশে অক্ষম করুন চেকবক্সটি চেক করুন৷ DevTools ব্রাউজার ক্যাশে অক্ষম করে। এটি আরও নিখুঁতভাবে প্রথমবারের ব্যবহারকারীর অভিজ্ঞতাকে অনুকরণ করে, কারণ বারবার ভিজিট করার সময় ব্রাউজার ক্যাশে থেকে অনুরোধগুলি পরিবেশন করা হয়।
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে অক্ষম করুন
আপনি যদি অন্যান্য DevTools প্যানেলে কাজ করার সময় ক্যাশে অক্ষম করতে চান, তাহলে নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক শর্ত ড্রয়ার খুলতে আইকন।
- অক্ষম ক্যাশে চেকবক্স চেক করুন বা সাফ করুন।
ম্যানুয়ালি ব্রাউজার ক্যাশে সাফ করুন
যে কোনো সময়ে ব্রাউজার ক্যাশে ম্যানুয়ালি সাফ করতে, অনুরোধ টেবিলের যে কোনো জায়গায় ডান-ক্লিক করুন এবং ব্রাউজার ক্যাশে সাফ করুন নির্বাচন করুন।
অফলাইনে অনুকরণ করুন
প্রগ্রেসিভ ওয়েব অ্যাপস নামে একটি নতুন শ্রেণির ওয়েব অ্যাপ রয়েছে, যা পরিষেবা কর্মীদের সাহায্যে অফলাইনে কাজ করতে পারে। আপনি যখন এই ধরনের অ্যাপ তৈরি করছেন, তখন কোনো ডেটা সংযোগ নেই এমন একটি ডিভাইসকে দ্রুত সিমুলেট করতে সক্ষম হওয়া দরকারী।
একটি সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতা অনুকরণ করতে, ক্যাশে নিষ্ক্রিয় চেকবক্সের পাশে থাকা নেটওয়ার্ক থ্রটলিং ড্রপ-ডাউন মেনু থেকে অফলাইন নির্বাচন করুন।
DevTools নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কতা আইকন প্রদর্শন করে যা আপনাকে মনে করিয়ে দেয় যে অফলাইন সক্ষম করা আছে।
ধীর নেটওয়ার্ক সংযোগ অনুকরণ করুন
দ্রুত 4G, স্লো 4G, বা 3G অনুকরণ করতে, শীর্ষে অ্যাকশন বারে থ্রটলিং ড্রপ-ডাউন মেনু থেকে সংশ্লিষ্ট প্রিসেটটি নির্বাচন করুন৷
DevTools নেটওয়ার্ক প্যানেলের পাশে একটি
সতর্কীকরণ আইকন প্রদর্শন করে যাতে আপনাকে মনে করিয়ে দেওয়া যায় যে থ্রটলিং সক্ষম করা হয়েছে।কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন
প্রিসেটগুলি ছাড়াও, যেমন ধীর বা দ্রুত 4G, আপনি আপনার নিজস্ব কাস্টম থ্রটলিং প্রোফাইলগুলিও যুক্ত করতে পারেন:
- থ্রটলিং মেনু খুলুন এবং কাস্টম > যোগ করুন... নির্বাচন করুন।
- সেটিংস > থ্রোটলিং- এ বর্ণিত একটি নতুন থ্রটলিং প্রোফাইল সেট আপ করুন।
নেটওয়ার্ক প্যানেলে ফিরে, থ্রটলিং ড্রপ-ডাউন মেনু থেকে আপনার নতুন প্রোফাইল নির্বাচন করুন।
DevTools প্রদর্শন করে a নেটওয়ার্ক প্যানেলের পাশে সতর্কতা আইকন আপনাকে মনে করিয়ে দিতে যে থ্রটলিং সক্ষম করা হয়েছে।
থ্রটল ওয়েবসকেট সংযোগ
HTTP অনুরোধগুলি ছাড়াও, DevTools 99 সংস্করণ থেকে WebSocket সংযোগগুলিকে থ্রোটল করে৷
ওয়েবসকেট থ্রটলিং পর্যবেক্ষণ করতে:
- একটি নতুন সংযোগ শুরু করুন, উদাহরণস্বরূপ, একটি পরীক্ষা টুল ব্যবহার করে।
- নেটওয়ার্ক প্যানেলে, নো থ্রটলিং নির্বাচন করুন এবং সংযোগের মাধ্যমে একটি বার্তা পাঠান।
- একটি খুব ধীর কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন, উদাহরণস্বরূপ,
10 kbit/s
। এই ধরনের একটি ধীর প্রোফাইল আপনাকে পার্থক্য লক্ষ্য করতে সাহায্য করবে। - নেটওয়ার্ক প্যানেলে, প্রোফাইল নির্বাচন করুন এবং অন্য বার্তা পাঠান।
- WS ফিল্টার টগল করুন, আপনার সংযোগের নামে ক্লিক করুন, বার্তা ট্যাব খুলুন, এবং থ্রটলিং সহ এবং ছাড়াই পাঠানো এবং প্রতিধ্বনিত বার্তাগুলির মধ্যে সময়ের পার্থক্য পরীক্ষা করুন। যেমন:
নেটওয়ার্ক অবস্থার ড্রয়ার থেকে ধীর নেটওয়ার্ক সংযোগগুলি অনুকরণ করুন৷
আপনি যদি অন্যান্য DevTools প্যানেলে কাজ করার সময় নেটওয়ার্ক সংযোগ থ্রোটল করতে চান, তাহলে নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক শর্ত ড্রয়ার খুলতে আইকন।
- নেটওয়ার্ক থ্রটলিং মেনু থেকে একটি সংযোগ গতি নির্বাচন করুন।
ব্রাউজার কুকিজ ম্যানুয়ালি সাফ করুন
যেকোন সময়ে ব্রাউজার কুকিজ ম্যানুয়ালি সাফ করতে, অনুরোধ টেবিলের যেকোনো জায়গায় ডান-ক্লিক করুন এবং ব্রাউজার কুকিজ সাফ করুন নির্বাচন করুন।
HTTP প্রতিক্রিয়া শিরোনাম ওভাররাইড করুন
স্থানীয়ভাবে ওভাররাইড ফাইল এবং HTTP প্রতিক্রিয়া শিরোনাম দেখুন।
ব্যবহারকারী এজেন্টকে ওভাররাইড করুন
ব্যবহারকারী এজেন্টকে ম্যানুয়ালি ওভাররাইড করতে:
- ক্লিক করুন
নেটওয়ার্ক শর্ত ড্রয়ার খুলতে আইকন।
- স্বয়ংক্রিয়ভাবে নির্বাচন সাফ করুন।
- মেনু থেকে একটি ব্যবহারকারী এজেন্ট বিকল্প চয়ন করুন, বা বাক্সে একটি কাস্টম একটি লিখুন৷
অনুসন্ধান অনুরোধ
অনুরোধ শিরোনাম, পেলোড এবং প্রতিক্রিয়া জুড়ে অনুসন্ধান করতে:
ডানদিকে অনুসন্ধান ট্যাব খুলতে নিম্নলিখিত শর্টকাট টিপুন:
- MacOS-এ, Command + F।
- উইন্ডোজ বা লিনাক্সে, কন্ট্রোল + এফ ।
অনুসন্ধান ট্যাবে, আপনার ক্যোয়ারী লিখুন এবং এন্টার টিপুন। যথাক্রমে কেস সেনসিটিভিটি বা রেগুলার এক্সপ্রেশন চালু করতে ঐচ্ছিকভাবে
বা ক্লিক করুন।অনুসন্ধান ফলাফলের একটি ক্লিক করুন. নেটওয়ার্ক প্যানেল হলুদ রঙে হাইলাইট করে যে অনুরোধটি মিলেছে। উপরন্তু, প্যানেল শিরোনাম বা প্রতিক্রিয়া ট্যাব খোলে এবং সেখানে মিলিত স্ট্রিং হাইলাইট করে, যদি থাকে।
অনুসন্ধান ফলাফল রিফ্রেশ করতে,
রিফ্রেশ ক্লিক করুন। ফলাফল সাফ করতে, সাফ ক্লিক করুন।DevTools-এ আপনি যে সমস্ত উপায়ে অনুসন্ধান করতে পারেন সে সম্পর্কে আরও তথ্যের জন্য, অনুসন্ধান দেখুন: সমস্ত লোড করা সংস্থান জুড়ে পাঠ্য খুঁজুন ।
ফিল্টার অনুরোধ
বৈশিষ্ট্য দ্বারা ফিল্টার অনুরোধ
ফিল্টার বক্সটি ব্যবহার করুন ফিল্টার করার জন্য প্রপার্টি, যেমন ডোমেন বা অনুরোধের আকার।
আপনি যদি বাক্সটি দেখতে না পান তবে ফিল্টার বারটি সম্ভবত লুকানো আছে৷ ফিল্টার বার লুকান দেখুন।
আপনার ফিল্টারটি উল্টাতে, ফিল্টার বাক্সের পাশে উল্টানো চেকবক্সটি চেক করুন।
আপনি প্রতিটি সম্পত্তিকে একটি স্থান দিয়ে আলাদা করে একসাথে একাধিক বৈশিষ্ট্য ব্যবহার করতে পারেন। উদাহরণস্বরূপ, mime-type:image/gif larger-than:1K
এক কিলোবাইটের থেকে বড় সব GIF প্রদর্শন করে। এই মাল্টি-প্রপার্টি ফিল্টারগুলি AND অপারেশনের সমতুল্য। বা অপারেশন সমর্থিত নয়।
পরবর্তী সমর্থিত বৈশিষ্ট্য একটি সম্পূর্ণ তালিকা.
-
cookie-domain
। একটি নির্দিষ্ট কুকি ডোমেন সেট করে এমন সংস্থানগুলি দেখান৷ -
cookie-name
একটি নির্দিষ্ট কুকি নাম সেট করে এমন সংস্থানগুলি দেখান। -
cookie-path
একটি নির্দিষ্ট কুকি পাথ সেট করে এমন সংস্থানগুলি দেখান৷ -
cookie-value
একটি নির্দিষ্ট কুকি মান সেট করে এমন সংস্থানগুলি দেখান। -
domain
শুধুমাত্র নির্দিষ্ট ডোমেন থেকে সম্পদ প্রদর্শন করুন. আপনি একাধিক ডোমেন অন্তর্ভুক্ত করতে একটি ওয়াইল্ডকার্ড অক্ষর (*
) ব্যবহার করতে পারেন। উদাহরণস্বরূপ,*.com
.com
এ শেষ হওয়া সমস্ত ডোমেন নাম থেকে সম্পদ প্রদর্শন করে। DevTools একটি স্বয়ংসম্পূর্ণ ড্রপ-ডাউন মেনুকে দেখায় যে সমস্ত ডোমেনের সম্মুখীন হয়েছে। -
has-overrides
ওভাররাইড করাcontent
,headers
, কোনো ওভাররাইড (yes
), বা কোনো ওভাররাইড (no
) আছে এমন অনুরোধগুলি দেখান। আপনি অনুরোধ টেবিলে সংশ্লিষ্ট হ্যাস ওভাররাইড কলাম যোগ করতে পারেন। -
has-response-header
। নির্দিষ্ট HTTP প্রতিক্রিয়া শিরোনাম ধারণকারী সম্পদ দেখান. DevTools স্বয়ংসম্পূর্ণ ড্রপ-ডাউনকে সমস্ত প্রতিক্রিয়া শিরোনামের সাথে পূরণ করে যা এটি সম্মুখীন হয়েছে। -
is
ব্যবহারis:running
WebSocket
রিসোর্স খুঁজতে দৌড়াচ্ছে। -
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
হেডার সহ বিকৃত কুকিগুলি নেটওয়ার্ক প্যানেলে পতাকাঙ্কিত হবে। -
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
আছে এমন সংস্থানগুলি দেখান৷
টাইপ দ্বারা ফিল্টার অনুরোধ
রিসোর্স টাইপ অনুসারে রিকোয়েস্ট ফিল্টার করতে, নেটওয়ার্ক প্যানেলে All , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket), Wasm (WebAssembly), ম্যানিফেস্ট বা অন্যান্য (যেকোনো অন্য প্রকার এখানে তালিকাভুক্ত নয়) বোতামে ক্লিক করুন।
আপনি যদি এই বোতামগুলি দেখতে না পান তবে ফিল্টার অ্যাকশন বারটি সম্ভবত লুকানো থাকে৷ ফিল্টার বার লুকান দেখুন।
একই সাথে একাধিক ধরণের সংস্থান দেখাতে, কমান্ড (ম্যাক) বা কন্ট্রোল (উইন্ডোজ, লিনাক্স) ধরে রাখুন এবং তারপরে বিভিন্ন ধরণের ফিল্টারে ক্লিক করুন।
সময় অনুসারে অনুরোধগুলি ফিল্টার করুন
ওভারভিউ টাইমলাইনে বাম বা ডানে টেনে আনুন শুধুমাত্র সেই সময়সীমার মধ্যে সক্রিয় থাকা অনুরোধগুলি প্রদর্শন করতে। ফিল্টারটি অন্তর্ভুক্ত। হাইলাইট করা সময়ে সক্রিয় ছিল যে কোনো অনুরোধ দেখানো হয়.
ডেটা URL লুকান
ডেটা URL হল ছোট ফাইল যা অন্যান্য নথিতে এম্বেড করা হয়। যেকোন অনুরোধ যা আপনি অনুরোধের টেবিলে দেখতে পান যা data:
একটি ডেটা URL।
এই অনুরোধগুলি লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার নির্বাচন করুন >
ডেটা URL লুকান ।নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
এক্সটেনশন URL লুকান
আপনি যে কোডটি লিখেছেন তার উপর ফোকাস করতে, আপনি Chrome এ ইনস্টল করা এক্সটেনশনগুলির মাধ্যমে প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে পারেন৷ এক্সটেনশন অনুরোধের URL আছে যা chrome-extension://
দিয়ে শুরু হয়।
এক্সটেনশন অনুরোধগুলি লুকাতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার নির্বাচন করুন >
এক্সটেনশন URL লুকান ।নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
অবরুদ্ধ প্রতিক্রিয়া কুকি সহ শুধুমাত্র অনুরোধগুলি দেখান৷
যেকোনো কারণে অবরুদ্ধ প্রতিক্রিয়া কুকিজ সহ অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ডেমো পৃষ্ঠায় এটি চেষ্টা করুন.
ব্লকড প্রতিক্রিয়া কুকিজ নির্বাচন করুন। এইনীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
একটি প্রতিক্রিয়া কুকি কেন ব্লক করা হয়েছে তা জানতে, অনুরোধটি নির্বাচন করুন, এর কুকি ট্যাব খুলুন এবং
তথ্য আইকনের উপর হোভার করুন।উপরন্তু, নেটওয়ার্ক প্যানেল Chrome পতাকা বা কনফিগারেশনের কারণে অবরুদ্ধ কুকিজ সহ একটি অনুরোধের পাশে একটি
সতর্কতা আইকন দেখায়। একটি ক্লু সহ একটি টুলটিপ দেখতে আইকনের উপর হোভার করুন এবং আরও তথ্যের জন্য সমস্যা প্যানেলে যেতে এটিতে ক্লিক করুন।শুধুমাত্র অবরুদ্ধ অনুরোধ দেখান
ব্লক করা অনুরোধ ব্যতীত সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > নেটওয়ার্ক অনুরোধ ব্লকিং ট্যাব ব্যবহার করতে পারেন।
ব্লক করা অনুরোধ নির্বাচন করুন। এটি পরীক্ষা করতে, আপনি ড্রয়ারেঅনুরোধের টেবিলটি লাল রঙে ব্লক করা অনুরোধগুলিকে হাইলাইট করে। নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
শুধুমাত্র তৃতীয় পক্ষের অনুরোধ দেখান
পৃষ্ঠার উৎস থেকে ভিন্ন উৎসের অনুরোধগুলি ছাড়া সবকিছু ফিল্টার করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার > ডেমো পৃষ্ঠায় এটি চেষ্টা করুন.
3য়-পক্ষের অনুরোধ নির্বাচন করুন। এইনীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।
বাছাই অনুরোধ
ডিফল্টরূপে, অনুরোধ টেবিলের অনুরোধগুলি শুরুর সময় অনুসারে সাজানো হয়, তবে আপনি অন্যান্য মানদণ্ড ব্যবহার করে টেবিলটি সাজাতে পারেন।
কলাম অনুসারে সাজান
সেই কলাম অনুসারে অনুরোধগুলি বাছাই করতে অনুরোধ টেবিলের যে কোনও কলামের হেডারে ক্লিক করুন।
কার্যকলাপ পর্যায়ে বাছাই
জলপ্রপাত কীভাবে অনুরোধগুলি সাজায় তা পরিবর্তন করতে, অনুরোধ টেবিলের শিরোনামটিতে ডান-ক্লিক করুন, জলপ্রপাতের উপর হোভার করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন:
- শুরুর সময় । প্রথম যে অনুরোধটি শুরু হয়েছিল তা শীর্ষে রয়েছে।
- প্রতিক্রিয়া সময় । ডাউনলোড করা শুরু করা প্রথম অনুরোধটি শীর্ষে রয়েছে।
- শেষ সময় । শেষ যে প্রথম অনুরোধ শীর্ষে আছে.
- মোট সময়কাল । সংক্ষিপ্ততম সংযোগ সেটআপ এবং অনুরোধ / প্রতিক্রিয়া সহ অনুরোধটি শীর্ষে রয়েছে।
- বিলম্ব একটি প্রতিক্রিয়ার জন্য সবচেয়ে কম সময় অপেক্ষা করা অনুরোধটি শীর্ষে রয়েছে।
এই বিবরণগুলি অনুমান করে যে প্রতিটি স্বতন্ত্র বিকল্পকে সংক্ষিপ্ত থেকে দীর্ঘতম পর্যন্ত স্থান দেওয়া হয়েছে। জলপ্রপাত কলামের হেডারে ক্লিক করলে ক্রম বিপরীত হয়।
এই উদাহরণে, জলপ্রপাতটি মোট সময়কাল অনুসারে সাজানো হয়েছে। প্রতিটি বারের হালকা অংশ অপেক্ষা করার সময় ব্যয় করে। গাঢ় অংশ হল বাইট ডাউনলোড করার সময় ব্যয় করা।
অনুরোধগুলি বিশ্লেষণ করুন
যতক্ষণ পর্যন্ত DevTools খোলা থাকে, এটি নেটওয়ার্ক প্যানেলে সমস্ত অনুরোধ লগ করে। অনুরোধ বিশ্লেষণ করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন.
অনুরোধের একটি লগ দেখুন
DevTools খোলা থাকাকালীন করা সমস্ত অনুরোধের একটি লগ দেখতে অনুরোধের টেবিলটি ব্যবহার করুন। অনুরোধের উপর ক্লিক করা বা হোভার করা তাদের সম্পর্কে আরও তথ্য প্রকাশ করে।
অনুরোধ টেবিলটি ডিফল্টরূপে নিম্নলিখিত কলামগুলি প্রদর্শন করে:
- নাম রিসোর্সের ফাইলের নাম বা একটি শনাক্তকারী।
অবস্থা এই কলামটি নিম্নলিখিত মানগুলি দেখাতে পারে:
- HTTP স্থিতি কোড, উদাহরণস্বরূপ,
200
বা404
। - ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) এর কারণে অনুরোধের জন্য
CORS error
ব্যর্থ হয়েছে৷ -
(blocked:origin)
ভুল কনফিগার করা হেডার সহ অনুরোধের জন্য। কি ভুল হয়েছে তার একটি ইঙ্গিত সহ একটি টুলটিপ দেখতে এই স্ট্যাটাস মানের উপর হোভার করুন। -
(failed)
এর পরে ত্রুটি বার্তা।
- HTTP স্থিতি কোড, উদাহরণস্বরূপ,
টাইপ অনুরোধ করা সম্পদের MIME প্রকার।
সূচনাকারী নিম্নলিখিত বস্তু বা প্রক্রিয়া অনুরোধ শুরু করতে পারে:
- পার্সার Chrome এর HTML পার্সার।
- পুনঃনির্দেশ । একটি HTTP পুনঃনির্দেশ।
- স্ক্রিপ্ট । একটি জাভাস্ক্রিপ্ট ফাংশন।
- অন্যান্য অন্য কিছু প্রক্রিয়া বা ক্রিয়া, যেমন একটি লিঙ্ক ব্যবহার করে একটি পৃষ্ঠায় নেভিগেট করা বা ঠিকানা বারে একটি URL প্রবেশ করানো৷
আকার প্রতিক্রিয়া শিরোনাম এবং প্রতিক্রিয়া বডির সম্মিলিত আকার, সার্ভার দ্বারা বিতরণ করা হয়।
সময় অনুরোধের শুরু থেকে উত্তরে চূড়ান্ত বাইট প্রাপ্তি পর্যন্ত মোট সময়কাল।
জলপ্রপাত । প্রতিটি অনুরোধের কার্যকলাপের একটি ভিজ্যুয়াল ব্রেকডাউন।
কলাম যোগ করুন বা সরান
অনুরোধ টেবিলের শিরোনামে ডান-ক্লিক করুন এবং এটি লুকাতে বা দেখানোর জন্য একটি বিকল্প নির্বাচন করুন। প্রদর্শিত বিকল্পগুলির পাশে চেক চিহ্ন রয়েছে।
আপনি নিম্নলিখিত অতিরিক্ত কলামগুলি যোগ করতে বা সরাতে পারেন: পথ , URL , পদ্ধতি , প্রোটোকল , স্কিম , ডোমেন , দূরবর্তী ঠিকানা , দূরবর্তী ঠিকানা স্থান , ইনিশিয়েটর ঠিকানা স্থান , কুকিজ , কুকিজ সেট করুন , অগ্রাধিকার , সংযোগ আইডি , ওভাররাইড আছে এবং জলপ্রপাত ৷
কাস্টম কলাম যোগ করুন
অনুরোধ টেবিলে একটি কাস্টম কলাম যোগ করতে:
- অনুরোধ টেবিলের হেডারে ডান-ক্লিক করুন এবং প্রতিক্রিয়া শিরোনাম > হেডার কলাম পরিচালনা করুন নির্বাচন করুন।
- ডায়ালগ উইন্ডোতে, কাস্টম শিরোনাম যোগ করুন ক্লিক করুন, এর নাম লিখুন এবং যোগ করুন ক্লিক করুন।
ইনলাইন ফ্রেম দ্বারা গ্রুপ অনুরোধ
যদি একটি পৃষ্ঠার ইনলাইন ফ্রেমগুলি প্রচুর অনুরোধ শুরু করে, আপনি তাদের গোষ্ঠীবদ্ধ করে অনুরোধটিকে লগ বন্ধুত্বপূর্ণ করতে পারেন।
iframes দ্বারা গ্রুপ অনুরোধ করতে, সেটিংস খুলুন নেটওয়ার্ক প্যানেলের ভিতরে এবং চেক করুন ফ্রেম অনুসারে গ্রুপ করুন ।
একটি ইনলাইন ফ্রেম দ্বারা শুরু করা একটি অনুরোধ দেখতে, অনুরোধ লগে এটি প্রসারিত করুন৷
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখুন
একে অপরের সাথে অনুরোধের সময় দেখতে জলপ্রপাত ব্যবহার করুন। ডিফল্টরূপে, অনুরোধের শুরুর সময় অনুসারে জলপ্রপাতটি সংগঠিত হয়। সুতরাং, যে অনুরোধগুলি বাম থেকে আরও দূরে, সেগুলি ডানদিকে আরও দূরে থাকা অনুরোধগুলির চেয়ে আগে শুরু হয়েছিল৷
আপনি জলপ্রপাতকে যে বিভিন্ন উপায়ে সাজাতে পারেন তা দেখতে কার্যকলাপ পর্ব অনুসারে সাজান দেখুন।
একটি WebSocket সংযোগের বার্তা বিশ্লেষণ করুন
একটি WebSocket সংযোগের বার্তা দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে, WebSocket সংযোগের URL-এ ক্লিক করুন।
- বার্তা ট্যাবে ক্লিক করুন। টেবিলটি শেষ 100টি বার্তা দেখায়।
টেবিল রিফ্রেশ করতে, অনুরোধ টেবিলের নাম কলামের অধীনে WebSocket সংযোগের নামে পুনরায় ক্লিক করুন।
টেবিলে তিনটি কলাম রয়েছে:
- তথ্য বার্তা পেলোড. যদি বার্তাটি প্লেইন টেক্সট হয়, তাহলে এটি এখানে প্রদর্শিত হবে। বাইনারি অপকোডের জন্য, এই কলামটি অপকোডের নাম এবং কোড প্রদর্শন করে। নিম্নলিখিত অপকোডগুলি সমর্থিত: কন্টিনিউয়েশন ফ্রেম, বাইনারি ফ্রেম, কানেকশন ক্লোজ ফ্রেম, পিং ফ্রেম এবং পং ফ্রেম।
- দৈর্ঘ্য । বার্তা পেলোডের দৈর্ঘ্য, বাইটে।
- সময় যখন বার্তাটি প্রাপ্ত বা পাঠানো হয়েছিল।
বার্তাগুলি তাদের প্রকার অনুসারে রঙ-কোড করা হয়:
- বহির্গামী পাঠ্য বার্তাগুলি হালকা-সবুজ।
- ইনকামিং টেক্সট বার্তা সাদা হয়.
- WebSocket অপকোড হালকা-হলুদ।
- ত্রুটিগুলি হালকা-লাল।
একটি প্রবাহে ঘটনা বিশ্লেষণ করুন
Fetch API , EventSource API , এবং XHR এর মাধ্যমে সার্ভার স্ট্রিম করা ইভেন্টগুলি দেখতে:
- ইভেন্টগুলি স্ট্রিম করে এমন একটি পৃষ্ঠায় নেটওয়ার্ক অনুরোধগুলি রেকর্ড করুন ৷ উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি খুলুন এবং তিনটি বোতামের যেকোনো একটিতে ক্লিক করুন।
- নেটওয়ার্কে , একটি অনুরোধ নির্বাচন করুন এবং ইভেন্টস্ট্রিম ট্যাবটি খুলুন।
ইভেন্টগুলি ফিল্টার করতে, ইভেন্টস্ট্রিম ট্যাবের উপরে ফিল্টার বারে একটি নিয়মিত অভিব্যক্তি নির্দিষ্ট করুন।
ক্যাপচার করা ইভেন্টের তালিকা সাফ করতে,
সাফ ক্লিক করুন।একটি প্রতিক্রিয়া শরীরের একটি পূর্বরূপ দেখুন
একটি প্রতিক্রিয়া শরীরের একটি পূর্বরূপ দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- প্রিভিউ ট্যাবে ক্লিক করুন।
এই ট্যাবটি বেশিরভাগ ইমেজ দেখার জন্য উপযোগী।
একটি প্রতিক্রিয়া বডি দেখুন
একটি অনুরোধের প্রতিক্রিয়া বডি দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- প্রতিক্রিয়া ট্যাবে ক্লিক করুন।
HTTP শিরোনাম দেখুন
একটি অনুরোধের HTTP হেডার ডেটা দেখতে:
- অনুরোধ টেবিলে একটি অনুরোধ ক্লিক করুন.
- শিরোনাম ট্যাব খুলুন এবং সাধারণ , প্রতিক্রিয়া শিরোনাম , অনুরোধ শিরোনাম , এবং, ঐচ্ছিকভাবে, প্রারম্ভিক ইঙ্গিত শিরোনাম বিভাগে স্ক্রোল করুন।
সাধারণ বিভাগে, DevTools আপনাকে প্রাপ্ত HTTP স্ট্যাটাস কোডের পাশে মানব-পাঠযোগ্য স্থিতি বার্তা দেখায়।
রেসপন্স হেডার বিভাগে, আপনি একটি হেডার মানের উপরে ঘুরতে পারেন এবং স্থানীয়ভাবে প্রতিক্রিয়া শিরোনামটিকে ওভাররাইড করতে সম্পাদনা বোতামে ক্লিক করতে পারেন।
HTTP শিরোনাম উৎস দেখুন
ডিফল্টরূপে, হেডার ট্যাব বর্ণানুক্রমিকভাবে হেডারের নাম দেখায়। এইচটিটিপি হেডারের নামগুলি যে ক্রমে প্রাপ্ত হয়েছিল সেগুলি দেখতে:
- আপনি যে অনুরোধে আগ্রহী তার জন্য শিরোনাম ট্যাবটি খুলুন। HTTP শিরোনাম দেখুন ।
- রিকোয়েস্ট হেডার বা রেসপন্স হেডার সেকশনের পাশে সোর্স ভিউ এ ক্লিক করুন।
অস্থায়ী শিরোনাম সতর্কতা
কখনও কখনও হেডার ট্যাব দেখায় যে Provisional headers are shown...
সতর্কতা বার্তা। এটি নিম্নলিখিত কারণে হতে পারে:
অনুরোধটি নেটওয়ার্কের মাধ্যমে পাঠানো হয়নি তবে একটি স্থানীয় ক্যাশে থেকে পরিবেশিত হয়েছিল, যা মূল অনুরোধের শিরোনাম সংরক্ষণ করে না। এই ক্ষেত্রে, আপনি সম্পূর্ণ অনুরোধ শিরোনাম দেখতে ক্যাশিং অক্ষম করতে পারেন।
নেটওয়ার্ক সংস্থানটি বৈধ নয়৷ উদাহরণস্বরূপ, কনসোলে
fetch("https://jec.fish.com/unknown-url/")
চালান।
নিরাপত্তার কারণে DevTools শুধুমাত্র অস্থায়ী শিরোনাম প্রদর্শন করতে পারে।
অনুরোধ পেলোড দেখুন
অনুরোধের পেলোড দেখতে, অর্থাৎ, এর ক্যোয়ারী স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা, অনুরোধ টেবিল থেকে একটি অনুরোধ নির্বাচন করুন এবং পেলোড ট্যাব খুলুন।
পেলোড উৎস দেখুন
ডিফল্টরূপে, DevTools পেলোডকে মানব-পাঠযোগ্য আকারে দেখায়।
কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটার উত্সগুলি দেখতে, পেলোড ট্যাবে, কোয়েরি স্ট্রিং প্যারামিটার বা ফর্ম ডেটা বিভাগের পাশের উৎস দেখুন ক্লিক করুন৷
ক্যোয়ারী স্ট্রিং প্যারামিটারের URL-ডিকোড করা আর্গুমেন্ট দেখুন
আর্গুমেন্টের জন্য ইউআরএল-এনকোডিং টগল করতে, পেলোড ট্যাবে, ডিকোডেড দেখুন বা URL-এনকোডেড দেখুন ক্লিক করুন।
কুকিজ দেখুন
অনুরোধের HTTP হেডারে পাঠানো কুকি দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- কুকিজ ট্যাবে ক্লিক করুন।
প্রতিটি কলামের বর্ণনার জন্য, ক্ষেত্রগুলি দেখুন।
কুকি পরিবর্তন করতে, দেখুন, সম্পাদনা করুন এবং কুকি মুছুন দেখুন ।
একটি অনুরোধের টাইমিং ব্রেকডাউন দেখুন
একটি অনুরোধের টাইমিং ব্রেকডাউন দেখতে:
- অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
- টাইমিং ট্যাবে ক্লিক করুন।
এই ডেটা অ্যাক্সেস করার একটি দ্রুত উপায়ের জন্য একটি টাইমিং ব্রেকডাউনের পূর্বরূপ দেখুন।
আপনি টাইমিং ট্যাবে দেখতে পারেন এমন প্রতিটি পর্যায় সম্পর্কে আরও তথ্যের জন্য টাইমিং ব্রেকডাউন পর্যায়গুলি ব্যাখ্যা করা দেখুন।
একটি টাইমিং ব্রেকডাউনের পূর্বরূপ দেখুন
একটি অনুরোধের টাইমিং ব্রেকডাউনের একটি পূর্বরূপ দেখতে, অনুরোধ টেবিলের জলপ্রপাত কলামে অনুরোধের এন্ট্রির উপর হোভার করুন৷
এই ডেটা অ্যাক্সেস করার একটি উপায়ের জন্য অনুরোধের টাইমিং ব্রেকডাউন দেখুন যার জন্য হোভারিংয়ের প্রয়োজন নেই৷
টাইমিং ব্রেকডাউন পর্যায়গুলি ব্যাখ্যা করা হয়েছে
টাইমিং ট্যাবে আপনি দেখতে পারেন এমন প্রতিটি ধাপ সম্পর্কে এখানে আরও তথ্য রয়েছে:
- সারিবদ্ধ ব্রাউজার সংযোগ শুরু হওয়ার আগে এবং কখন অনুরোধগুলি সারিবদ্ধ করে:
- উচ্চ অগ্রাধিকার অনুরোধ আছে. অনুরোধের অগ্রাধিকার একটি সম্পদের ধরন, সেইসাথে নথির মধ্যে এর অবস্থানের মতো বিষয়গুলির দ্বারা নির্ধারিত হয়। আরও তথ্যের জন্য,
fetchpriority
গাইডের রিসোর্স অগ্রাধিকার বিভাগটি পড়ুন। - এই উত্সের জন্য ইতিমধ্যে ছয়টি টিসিপি সংযোগ খোলা আছে, যা সীমা। (শুধু HTTP/1.0 এবং HTTP/1.1 এ প্রযোজ্য।)
- ব্রাউজারটি সংক্ষিপ্তভাবে ডিস্ক ক্যাশে স্থান বরাদ্দ করছে।
- উচ্চ অগ্রাধিকার অনুরোধ আছে. অনুরোধের অগ্রাধিকার একটি সম্পদের ধরন, সেইসাথে নথির মধ্যে এর অবস্থানের মতো বিষয়গুলির দ্বারা নির্ধারিত হয়। আরও তথ্যের জন্য,
- স্থবির । কিউয়িং- এ বর্ণিত যেকোনো কারণে সংযোগ শুরু হওয়ার পর অনুরোধটি স্থগিত হতে পারে।
- DNS লুকআপ । ব্রাউজার অনুরোধের আইপি ঠিকানা সমাধান করছে।
- প্রাথমিক সংযোগ । ব্রাউজার টিসিপি হ্যান্ডশেক বা পুনঃপ্রচার সহ একটি সংযোগ স্থাপন করছে এবং একটি SSL নিয়ে আলোচনা করছে।
- প্রক্সি আলোচনা । ব্রাউজারটি একটি প্রক্সি সার্ভারের সাথে অনুরোধটি নিয়ে আলোচনা করছে৷
- অনুরোধ পাঠানো হয়েছে । অনুরোধ পাঠানো হচ্ছে।
- সার্ভিস ওয়ার্কার প্রস্তুতি । ব্রাউজারটি পরিষেবা কর্মী চালু করছে।
- সার্ভিস ওয়ার্কারের কাছে অনুরোধ । সেবা কর্মীর কাছে অনুরোধ পাঠানো হচ্ছে।
- অপেক্ষা (TTFB) । ব্রাউজারটি একটি প্রতিক্রিয়ার প্রথম বাইটের জন্য অপেক্ষা করছে। TTFB মানে টাইম টু ফার্স্ট বাইট। এই টাইমিংয়ে 1 রাউন্ড ট্রিপ অফ লেটেন্সি এবং সার্ভারের প্রতিক্রিয়া প্রস্তুত করতে সময় অন্তর্ভুক্ত রয়েছে।
- কন্টেন্ট ডাউনলোড । ব্রাউজারটি সরাসরি নেটওয়ার্ক থেকে বা কোনও পরিষেবা কর্মী থেকে প্রতিক্রিয়া গ্রহণ করছে৷ এই মান হল রেসপন্স বডি পড়ার মোট সময়। প্রত্যাশিত মানগুলির চেয়ে বড় একটি ধীর নেটওয়ার্ক নির্দেশ করতে পারে, বা ব্রাউজারটি অন্যান্য কাজ সম্পাদনে ব্যস্ত যা প্রতিক্রিয়া পড়তে দেরি করে।
সূচনাকারী এবং নির্ভরতা দেখুন
একটি অনুরোধের সূচনাকারী এবং নির্ভরতা দেখতে, 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 (সংবেদনশীল ডেটা সহ) হিসাবে সমস্ত [তালিকাভুক্ত] সংরক্ষণ করুন নির্বাচন করুন।
নেটওয়ার্ক প্যানেলের শীর্ষে অ্যাকশন বারে
এক্সপোর্ট HAR (স্যানিটাইজড)... ক্লিক করুন।সংবেদনশীল ডেটা সহ রপ্তানি করতে, প্রথমে,
চালু করুন সেটিংস > পছন্দগুলি > নেটওয়ার্ক > সংবেদনশীল ডেটা সহ HAR তৈরি করার অনুমতি দিন , তারপর রপ্তানি বোতামে ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে রপ্তানি HAR (সংবেদনশীল ডেটা সহ) নির্বাচন করুন৷
একবার আপনার কাছে একটি HAR ফাইল হয়ে গেলে, আপনি দুটি উপায়ে বিশ্লেষণের জন্য এটিকে আবার DevTools-এ আমদানি করতে পারেন:
- অনুরোধ টেবিলে HAR ফাইলটি টেনে আনুন।
- নেটওয়ার্ক প্যানেলের শীর্ষে অ্যাকশন বারে HAR ক্লিক করুন।
ক্লিপবোর্ডে একটি অনুরোধ, ফিল্টার করা অনুরোধের সেট বা তাদের সব কপি করুন
অনুরোধ টেবিলের নাম কলামের অধীনে, একটি অনুরোধে ডান-ক্লিক করুন, অনুলিপিতে হোভার করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন।
একটি একক অনুরোধ, তার প্রতিক্রিয়া, বা স্ট্যাক ট্রেস অনুলিপি করতে:
- URL কপি করুন । অনুরোধের URL টি ক্লিপবোর্ডে অনুলিপি করুন।
- CURL হিসাবে অনুলিপি করুন । একটি cURL কমান্ড হিসাবে অনুরোধটি অনুলিপি করুন।
- PowerShell হিসাবে অনুলিপি করুন । একটি পাওয়ারশেল কমান্ড হিসাবে অনুরোধটি অনুলিপি করুন।
- আনয়ন হিসাবে অনুলিপি . একটি আনা কল হিসাবে অনুরোধ অনুলিপি.
- ফেচ হিসাবে কপি করুন (Node.js) । Node.js ফেচ কল হিসাবে অনুরোধটি অনুলিপি করুন।
- কপি প্রতিক্রিয়া . ক্লিপবোর্ডে প্রতিক্রিয়া বডি কপি করুন।
- স্ট্যাক ট্রেস কপি করুন । অনুরোধের স্ট্যাক ট্র্যাকটি ক্লিপবোর্ডে অনুলিপি করুন।
সমস্ত অনুরোধ অনুলিপি করতে:
- সমস্ত URL কপি করুন । ক্লিপবোর্ডে সমস্ত অনুরোধের URL কপি করুন।
- CURL হিসাবে সব কপি করুন । CURL কমান্ডের একটি চেইন হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।
- PowerShell হিসাবে সব কপি করুন । PowerShell কমান্ডের একটি চেইন হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।
- আনা হিসাবে সব কপি করুন . ফেচ কলের একটি চেইন হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।
- ফেচ হিসাবে সব কপি করুন (Node.js) । Node.js ফেচ কলের চেইন হিসাবে সমস্ত অনুরোধ কপি করুন।
- HAR (স্যানিটাইজড) হিসাবে সব কপি করুন ।
Cookie
,Set-Cookie
, এবংAuthorization
শিরোনামগুলির মতো সংবেদনশীল ডেটা ছাড়াই সমস্ত অনুরোধগুলিকে HAR ডেটা হিসাবে অনুলিপি করুন৷ - সমস্ত HAR হিসাবে কপি করুন (সংবেদনশীল ডেটা সহ) । সংবেদনশীল ডেটা সহ HAR ডেটা হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।
অনুরোধের একটি ফিল্টার করা সেট অনুলিপি করতে, নেটওয়ার্ক লগে একটি ফিল্টার প্রয়োগ করুন, একটি অনুরোধে ডান-ক্লিক করুন এবং নির্বাচন করুন:
- সমস্ত তালিকাভুক্ত URL কপি করুন । ক্লিপবোর্ডে সমস্ত ফিল্টার করা অনুরোধের URL কপি করুন।
- CURL হিসাবে তালিকাভুক্ত সমস্ত কপি করুন । সমস্ত ফিল্টার করা অনুরোধগুলি সিআরএল কমান্ডের একটি চেইন হিসাবে অনুলিপি করুন।
- PowerShell হিসাবে তালিকাভুক্ত সব কপি করুন । PowerShell কমান্ডের একটি চেইন হিসাবে সমস্ত ফিল্টার করা অনুরোধ অনুলিপি করুন।
- আনা হিসাবে তালিকাভুক্ত সমস্ত অনুলিপি করুন । সমস্ত ফিল্টার করা অনুরোধগুলিকে ফেচ কলের একটি চেইন হিসাবে অনুলিপি করুন৷
- ফেচ (Node.js) হিসাবে তালিকাভুক্ত সমস্ত কপি করুন । Node.js ফেচ কলের চেইন হিসেবে ফিল্টার করা সব অনুরোধ কপি করুন।
- HAR (স্যানিটাইজড) হিসাবে তালিকাভুক্ত সমস্ত কপি করুন ।
Cookie
,Set-Cookie
, এবংAuthorization
শিরোনামগুলির মতো সংবেদনশীল ডেটা ছাড়াই সমস্ত ফিল্টার করা অনুরোধগুলিকে HAR ডেটা হিসাবে অনুলিপি করুন৷ - HAR হিসাবে তালিকাভুক্ত সমস্ত কপি করুন (সংবেদনশীল ডেটা সহ) । সংবেদনশীল ডেটা সহ HAR ডেটা হিসাবে সমস্ত ফিল্টার করা অনুরোধগুলি অনুলিপি করুন৷
নেটওয়ার্ক প্যানেলের লেআউট পরিবর্তন করুন
নেটওয়ার্ক প্যানেল UI এর বিভাগগুলিকে প্রসারিত বা সঙ্কুচিত করুন যা আপনার জন্য গুরুত্বপূর্ণ তার উপর ফোকাস করুন৷
ফিল্টার অ্যাকশন বার লুকান
ডিফল্টরূপে, DevTools নেটওয়ার্ক প্যানেলের শীর্ষে ফিল্টার বার দেখায়। এটি লুকানোর জন্য ফিল্টার ক্লিক করুন।
বড় অনুরোধ সারি ব্যবহার করুন
আপনি যখন আপনার নেটওয়ার্ক অনুরোধ টেবিলে আরও সাদা স্থান চান তখন বড় সারি ব্যবহার করুন। কিছু কলাম বড় সারি ব্যবহার করার সময় একটু বেশি তথ্য প্রদান করে। উদাহরণস্বরূপ, সাইজ কলামের নীচের মান হল একটি অনুরোধের অসংকোচিত আকার এবং অগ্রাধিকার কলামটি প্রাথমিক (নীচের মান) এবং চূড়ান্ত (শীর্ষ মান) নিয়ে আসা অগ্রাধিকার উভয়ই দেখায়।
সেটিংস খুলুন এবং বড় সারি দেখতে বড় অনুরোধ সারি ক্লিক করুন.
ওভারভিউ ট্র্যাক লুকান
ডিফল্টরূপে, DevTools ওভারভিউ ট্র্যাক দেখায়। সেটিংস খুলুন এবং এটি লুকানোর জন্য ওভারভিউ দেখান চেকবক্সটি সাফ করুন।
Chrome DevTools নেটওয়ার্ক বিশ্লেষণ বৈশিষ্ট্যগুলির এই ব্যাপক রেফারেন্সে আপনার পৃষ্ঠা কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন উপায়গুলি আবিষ্কার করুন৷
রেকর্ড নেটওয়ার্ক অনুরোধ
ডিফল্টরূপে, DevTools নেটওয়ার্ক প্যানেলে সমস্ত নেটওয়ার্ক অনুরোধ রেকর্ড করে, যতক্ষণ না DevTools খোলা থাকে।
নেটওয়ার্ক অনুরোধ রেকর্ডিং বন্ধ করুন
রেকর্ডিং অনুরোধ বন্ধ করতে:
- নেটওয়ার্ক লগ রেকর্ডিং বন্ধ করুন ক্লিক করুন
নেটওয়ার্ক প্যানেলে। DevTools আর অনুরোধ রেকর্ড করছে না তা বোঝাতে এটি ধূসর হয়ে যায়।
- নেটওয়ার্ক প্যানেল ফোকাসে থাকাকালীন কমান্ড > + ই (ম্যাক) বা নিয়ন্ত্রণ + ই (উইন্ডোজ, লিনাক্স) টিপুন।
পরিষ্কার অনুরোধ
পরিষ্কার ক্লিক করুন অনুরোধ টেবিল থেকে সমস্ত অনুরোধ সাফ করতে নেটওয়ার্ক প্যানেলে।
পৃষ্ঠা লোড জুড়ে অনুরোধ সংরক্ষণ করুন
পৃষ্ঠা লোড জুড়ে অনুরোধগুলি সংরক্ষণ করতে, নেটওয়ার্ক প্যানেলে লগ চেকবক্স সংরক্ষণ করুন। আপনি লগ সংরক্ষণ অক্ষম না করা পর্যন্ত ডিভটুলস সমস্ত অনুরোধ সংরক্ষণ করে।
পৃষ্ঠা লোডের সময় স্ক্রিনশটগুলি ক্যাপচার করুন
ব্যবহারকারীরা আপনার পৃষ্ঠাটি লোড হওয়ার জন্য অপেক্ষা করার সাথে সাথে কী দেখছেন তা বিশ্লেষণ করতে স্ক্রিনশটগুলি ক্যাপচার করুন।
স্ক্রিনশট সক্ষম করতে, সেটিংস খোলা নেটওয়ার্ক প্যানেলের ভিতরে এবং ক্যাপচার স্ক্রিনশটগুলি পরীক্ষা করুন।
স্ক্রিনশটগুলি ক্যাপচার করার জন্য নেটওয়ার্ক প্যানেল ফোকাসে থাকা অবস্থায় পৃষ্ঠাটি পুনরায় লোড করুন।
একবার ক্যাপচার হয়ে গেলে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটের সাথে ইন্টারঅ্যাক্ট করতে পারেন:
- যে স্ক্রিনশটটি ক্যাপচার করা হয়েছিল তা দেখার জন্য একটি স্ক্রিনশটের উপরে ঘুরে বেড়ায়। ওভারভিউ টাইমলাইনে একটি হলুদ রেখা উপস্থিত হয়।
- স্ক্রিনশটটি ক্যাপচার হওয়ার পরে ঘটে যাওয়া কোনও অনুরোধ ফিল্টার করতে একটি স্ক্রিনশটের থাম্বনেইল ক্লিক করুন।
- এটিতে জুম করতে একটি থাম্বনেইল ডাবল ক্লিক করুন।
এক্সএইচআর অনুরোধ পুনরায় খেলুন
একটি এক্সএইচআর অনুরোধ পুনরায় খেলতে, অনুরোধ সারণীতে নিম্নলিখিতগুলির মধ্যে একটি করুন:
- অনুরোধটি নির্বাচন করুন এবং আর টিপুন।
- অনুরোধটিতে ডান ক্লিক করুন এবং XHR পুনরায় খেলুন নির্বাচন করুন।
লোডিং আচরণ পরিবর্তন করুন
ব্রাউজার ক্যাশে অক্ষম করে প্রথমবারের দর্শনার্থী অনুকরণ করুন
প্রথমবারের ব্যবহারকারী কীভাবে আপনার সাইটের অভিজ্ঞতা অর্জন করে তা অনুকরণ করতে, ক্যাশে চেকবক্সটি অক্ষম করুন। ডিভটুলগুলি ব্রাউজার ক্যাশে অক্ষম করে। এটি আরও সঠিকভাবে প্রথমবারের ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করে, কারণ পুনরাবৃত্তি ভিজিটগুলিতে ব্রাউজার ক্যাশে থেকে অনুরোধগুলি পরিবেশন করা হয়।
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে অক্ষম করুন
আপনি যদি অন্য ডেভটুলস প্যানেলে কাজ করার সময় ক্যাশে অক্ষম করতে চান তবে নেটওয়ার্ক কন্ডিশন ড্রয়ারটি ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ার খুলতে আইকন।
- ক্যাশে চেকবক্সটি অক্ষম করুন বা সাফ করুন।
ম্যানুয়ালি ব্রাউজার ক্যাশে সাফ করুন
যে কোনও সময় ম্যানুয়ালি ব্রাউজার ক্যাশে সাফ করার জন্য, অনুরোধ টেবিলের যে কোনও জায়গায় ডান ক্লিক করুন এবং ব্রাউজার ক্যাশে পরিষ্কার করুন ।
অফলাইন অনুকরণ
প্রগ্রেসিভ ওয়েব অ্যাপস নামে পরিচিত ওয়েব অ্যাপ্লিকেশনগুলির একটি নতুন শ্রেণি রয়েছে, যা পরিষেবা কর্মীদের সহায়তায় অফলাইনে কাজ করতে পারে। আপনি যখন এই ধরণের অ্যাপটি তৈরি করছেন, তখন দ্রুত কোনও ডিভাইসকে অনুকরণ করতে সক্ষম হওয়া দরকারী যাতে কোনও ডেটা সংযোগ নেই।
সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতার অনুকরণ করতে, নেটওয়ার্ক থ্রোটলিং ড্রপ-ডাউন মেনু থেকে অফলাইন নির্বাচন করুন ক্যাশে চেকবক্সটি অক্ষম করুন ।
অফলাইন সক্ষম করা আছে তা মনে করিয়ে দেওয়ার জন্য ডিভটুলস নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কতা আইকন প্রদর্শন করে।
ধীর নেটওয়ার্ক সংযোগগুলি অনুকরণ করুন
দ্রুত 4 জি, ধীর 4 জি বা 3 জি অনুকরণ করতে, শীর্ষে অ্যাকশন বারের থ্রোটলিং ড্রপ-ডাউন মেনু থেকে সংশ্লিষ্ট প্রিসেটটি নির্বাচন করুন।
ডেভটুলস আপনাকে মনে করিয়ে দেওয়ার জন্য নেটওয়ার্ক প্যানেলের পাশের একটি
সতর্কতা আইকন প্রদর্শন করে যে থ্রোটলিং সক্ষম হয়েছে।কাস্টম থ্রোটলিং প্রোফাইল তৈরি করুন
ধীর বা দ্রুত 4 জি এর মতো প্রিসেটগুলি ছাড়াও আপনি নিজের কাস্টম থ্রোটলিং প্রোফাইলগুলিও যুক্ত করতে পারেন:
- থ্রোটলিং মেনুটি খুলুন এবং কাস্টম > যুক্ত করুন ... নির্বাচন করুন।
- সেটিংস > থ্রোটলিংয়ে বর্ণিত হিসাবে একটি নতুন থ্রোটলিং প্রোফাইল সেট আপ করুন।
নেটওয়ার্ক প্যানেলে ফিরে, থ্রোটলিং ড্রপ-ডাউন মেনু থেকে আপনার নতুন প্রোফাইল নির্বাচন করুন।
ডিভটুলগুলি প্রদর্শন করে a নেটওয়ার্ক প্যানেলের পাশের সতর্কতা আইকন আপনাকে মনে করিয়ে দেওয়ার জন্য যে থ্রোটলিং সক্ষম হয়েছে।
থ্রোটল ওয়েবকেট সংযোগগুলি
এইচটিটিপি অনুরোধগুলি ছাড়াও, ডিভিটুলস 99 সংস্করণ থেকে ওয়েবকেট সংযোগগুলি থ্রোটলস।
ওয়েবকেট থ্রোটলিং পর্যবেক্ষণ করতে:
- একটি নতুন সংযোগ শুরু করুন, উদাহরণস্বরূপ, একটি পরীক্ষার সরঞ্জাম ব্যবহার করে।
- নেটওয়ার্ক প্যানেলে, কোনও থ্রোটলিং নির্বাচন করুন এবং সংযোগের মাধ্যমে একটি বার্তা প্রেরণ করুন।
- একটি খুব ধীর কাস্টম থ্রোটলিং প্রোফাইল তৈরি করুন, উদাহরণস্বরূপ,
10 kbit/s
। এই জাতীয় ধীর প্রোফাইল আপনাকে পার্থক্যটি লক্ষ্য করতে সহায়তা করবে। - নেটওয়ার্ক প্যানেলে, প্রোফাইলটি নির্বাচন করুন এবং অন্য বার্তা প্রেরণ করুন।
- ডাব্লুএস ফিল্টারটি টগল করুন, আপনার সংযোগের নামটি ক্লিক করুন, বার্তা ট্যাবটি খুলুন এবং থ্রোটলিংয়ের সাথে এবং ছাড়াই প্রেরিত এবং প্রতিধ্বনিত বার্তাগুলির মধ্যে সময়ের পার্থক্যটি পরীক্ষা করুন। যেমন:
নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ধীর নেটওয়ার্ক সংযোগগুলি অনুকরণ করুন
আপনি যদি অন্যান্য ডিভটুলস প্যানেলগুলিতে কাজ করার সময় নেটওয়ার্ক সংযোগটি থ্রোটল করতে চান তবে নেটওয়ার্ক কন্ডিশন ড্রয়ারটি ব্যবহার করুন।
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ার খুলতে আইকন।
- নেটওয়ার্ক থ্রোটলিং মেনু থেকে একটি সংযোগ গতি নির্বাচন করুন।
ম্যানুয়ালি ব্রাউজার কুকিজ পরিষ্কার করুন
যে কোনও সময় ম্যানুয়ালি ব্রাউজার কুকিজ সাফ করার জন্য, অনুরোধের টেবিলের যে কোনও জায়গায় ডান ক্লিক করুন এবং ব্রাউজার কুকিজ পরিষ্কার করুন ।
ওভাররাইড এইচটিটিপি প্রতিক্রিয়া শিরোনাম
স্থানীয়ভাবে ওভাররাইড ফাইল এবং এইচটিটিপি প্রতিক্রিয়া শিরোনামগুলি দেখুন।
ব্যবহারকারী এজেন্টকে ওভাররাইড করুন
ম্যানুয়ালি ব্যবহারকারী এজেন্টকে ওভাররাইড করতে:
- ক্লিক করুন
নেটওয়ার্ক কন্ডিশন ড্রয়ার খুলতে আইকন।
- স্বয়ংক্রিয়ভাবে নির্বাচন করুন পরিষ্কার করুন।
- মেনু থেকে একটি ব্যবহারকারী এজেন্ট বিকল্প চয়ন করুন, বা বাক্সে একটি কাস্টম লিখুন।
অনুসন্ধান অনুরোধ
অনুরোধ শিরোনাম, পে -লোড এবং প্রতিক্রিয়াগুলি জুড়ে অনুসন্ধান করতে:
ডানদিকে অনুসন্ধান ট্যাবটি খুলতে নিম্নলিখিত শর্টকাট টিপুন:
- ম্যাকোসে, কমান্ড + এফ ।
- উইন্ডোজ বা লিনাক্সে, নিয়ন্ত্রণ + চ ।
অনুসন্ধান ট্যাবে, আপনার ক্যোয়ারী লিখুন এবং এন্টার টিপুন। কেস সংবেদনশীলতা বা নিয়মিত অভিব্যক্তিগুলি যথাক্রমে চালু করতে
বা ক্লিক করুন।অনুসন্ধানের ফলাফলগুলির মধ্যে একটিতে ক্লিক করুন। নেটওয়ার্ক প্যানেলটি হলুদ রঙের অনুরোধটি হাইলাইট করে যা মেলে। অতিরিক্তভাবে, প্যানেলটি শিরোনাম বা প্রতিক্রিয়া ট্যাবটিও খুলে দেয় এবং সেখানে যে স্ট্রিংটি মিলছে তা হাইলাইট করে।
অনুসন্ধানের ফলাফলগুলি রিফ্রেশ করতে
রিফ্রেশ ক্লিক করুন। ফলাফল সাফ করতে, ক্লিয়ার ক্লিক করুন।আপনি ডেভটুলগুলিতে অনুসন্ধান করতে পারেন এমন সমস্ত উপায়ে আরও তথ্যের জন্য, অনুসন্ধান দেখুন: সমস্ত লোড হওয়া সংস্থানগুলিতে পাঠ্য সন্ধান করুন ।
ফিল্টার অনুরোধ
বৈশিষ্ট্য দ্বারা ফিল্টার অনুরোধ
অনুরোধের ডোমেন বা আকার হিসাবে বৈশিষ্ট্য দ্বারা ফিল্টার অনুরোধগুলি ফিল্টার করতে ফিল্টার বাক্সটি ব্যবহার করুন।
আপনি যদি বাক্সটি দেখতে না পান তবে ফিল্টার বারটি সম্ভবত লুকিয়ে রয়েছে। ফিল্টার বারটি লুকান দেখুন।
আপনার ফিল্টারটি উল্টাতে, ফিল্টার বাক্সের পাশের ইনভার্ট চেকবক্সটি পরীক্ষা করুন।
আপনি প্রতিটি সম্পত্তিকে একটি স্থান দিয়ে আলাদা করে একসাথে একাধিক বৈশিষ্ট্য ব্যবহার করতে পারেন। উদাহরণস্বরূপ, mime-type:image/gif larger-than:1K
এক কিলোবাইটের থেকে বড় সব GIF প্রদর্শন করে। এই মাল্টি-প্রপার্টি ফিল্টারগুলি AND অপারেশনের সমতুল্য। বা অপারেশনগুলি সমর্থিত নয়।
এরপরে সমর্থিত বৈশিষ্ট্যের একটি সম্পূর্ণ তালিকা রয়েছে।
-
cookie-domain
। একটি নির্দিষ্ট কুকি ডোমেন সেট করা সংস্থানগুলি দেখান। -
cookie-name
। একটি নির্দিষ্ট কুকির নাম সেট করা সংস্থানগুলি দেখান। -
cookie-path
একটি নির্দিষ্ট কুকির পথ সেট করে এমন সংস্থানগুলি দেখান। -
cookie-value
। একটি নির্দিষ্ট কুকির মান সেট করা সংস্থানগুলি দেখান। -
domain
কেবলমাত্র নির্দিষ্ট ডোমেন থেকে সংস্থানগুলি প্রদর্শন করুন। আপনি একাধিক ডোমেন অন্তর্ভুক্ত করতে একটি ওয়াইল্ডকার্ড চরিত্র (*
) ব্যবহার করতে পারেন। উদাহরণস্বরূপ,*.com
.com
এ শেষ হওয়া সমস্ত ডোমেন নাম থেকে সংস্থানগুলি প্রদর্শন করে। ডেভটুলগুলি একটি পপুলুলেট দেখায় যে এটি সমস্ত ডোমেনের মুখোমুখি হয়েছে তার সাথে স্বতঃপূর্বক ড্রপ-ডাউন মেনু। -
has-overrides
। ওভাররাইডcontent
,headers
, কোনও ওভাররাইড (yes
), বা কোনও ওভাররাইড (no
) রয়েছে এমন অনুরোধগুলি দেখান। আপনি অনুরোধ টেবিলের সাথে সম্পর্কিত সম্পর্কিত কলামটি ওভাররাইডগুলি যুক্ত করতে পারেন। -
has-response-header
। নির্দিষ্ট HTTP প্রতিক্রিয়া শিরোনামযুক্ত সংস্থানগুলি দেখান। ডেভটুলস এর মুখোমুখি হওয়া সমস্ত প্রতিক্রিয়া শিরোনামগুলির সাথে স্বতঃপ্রবাহের ড্রপ-ডাউনকে পপুলেট করে। -
is
ব্যবহার হ'ল:WebSocket
সংস্থানগুলি সন্ধান করতেis:running
। -
larger-than
। বাইটে নির্দিষ্ট আকারের চেয়ে বড় সংস্থানগুলি দেখান।1000
এর মান নির্ধারণ1k
এর মান নির্ধারণের সমতুল্য। -
method
নির্দিষ্ট HTTP পদ্ধতি ধরণের মাধ্যমে পুনরুদ্ধার করা সংস্থানগুলি দেখান। ডেভটুলস এর মুখোমুখি হওয়া সমস্ত এইচটিটিপি পদ্ধতির সাথে স্বতঃপ্রবাহের ড্রপ-ডাউনকে পপুলেট করে। -
mime-type
একটি নির্দিষ্ট মাইম প্রকারের সংস্থানগুলি দেখান। ডেভটুলগুলি এটির মুখোমুখি হওয়া সমস্ত মাইম প্রকারের সাথে স্বতঃপূর্বক ড্রপ-ডাউনকে পপুলেট করে। -
mixed-content
। সমস্ত মিশ্রিত সামগ্রী সংস্থানগুলি (mixed-content:all
) বা প্রদর্শিত হয় কেবল (mixed-content:displayed
) দেখান। -
priority
এমন সংস্থানগুলি দেখান যার অগ্রাধিকার স্তরটি নির্দিষ্ট মানের সাথে মেলে। -
resource-type
। একটি সংস্থান প্রকারের সংস্থানগুলি দেখান, উদাহরণস্বরূপ, চিত্র। ডেভটুলগুলি এটির মুখোমুখি হওয়া সমস্ত সংস্থান প্রকারের সাথে স্বতঃপ্রবাহের ড্রপ-ডাউনকে পপুলেট করে। -
response-header-set-cookie
। ইস্যু ট্যাবে কাঁচা সেট-কুকি শিরোনামগুলি দেখান। ভুলSet-Cookie
শিরোনাম সহ ত্রুটিযুক্ত কুকিজ নেটওয়ার্ক প্যানেলে পতাকাঙ্কিত করা হবে। -
scheme
। সুরক্ষিত এইচটিটিপি (scheme:http
) বা সুরক্ষিত এইচটিটিপিএস (scheme:https
) এর মাধ্যমে পুনরুদ্ধার করা সংস্থানগুলি দেখান। -
set-cookie-domain
। নির্দিষ্ট মানের সাথে মেলে এমন একটিDomain
অ্যাট্রিবিউট সহ একটিSet-Cookie
শিরোনাম রয়েছে এমন সংস্থানগুলি দেখান। ডেভটুলস এটির মুখোমুখি হওয়া সমস্ত কুকি ডোমেনগুলির সাথে স্বতঃপথে সম্পূর্ণরূপে পপুলেট করে। -
set-cookie-name
। নির্দিষ্ট মানের সাথে মেলে এমন একটি নাম সহSet-Cookie
শিরোনাম রয়েছে এমন সংস্থানগুলি দেখান। ডেভটুলস এটির যে সমস্ত কুকি নামের মুখোমুখি হয়েছে তার সাথে স্বতঃপ্রবর্তনকে পপুলেট করে। -
set-cookie-value
। নির্দিষ্ট মানের সাথে মেলে এমন একটি মান সহ একটিSet-Cookie
শিরোনাম রয়েছে এমন সংস্থানগুলি দেখান। ডেভটুলগুলি এটির মুখোমুখি হওয়া সমস্ত কুকি মানগুলির সাথে স্বতঃপথে সম্পূর্ণরূপে পপুলেট করে। -
status-code
। কেবলমাত্র এমন সংস্থানগুলি দেখান যার এইচটিটিপি স্থিতি কোড নির্দিষ্ট কোডের সাথে মেলে। ডেভটুলস এর মুখোমুখি হওয়া সমস্ত স্ট্যাটাস কোডের সাথে স্বতঃপূর্বক ড্রপ-ডাউন মেনুটিকে পপুলেট করে। -
url
নির্দিষ্ট মানের সাথে মেলে এমন একটিurl
রয়েছে এমন সংস্থানগুলি দেখান।
টাইপ দ্বারা ফিল্টার অনুরোধ
রিসোর্স টাইপের মাধ্যমে অনুরোধগুলি ফিল্টার করতে, সমস্ত , আনুন/এক্সএইচআর , জেএস , সিএসএস , আইএমজি , মিডিয়া , ফন্ট , ডক , ডাব্লুএস (ওয়েবসকেট), ওয়াসম (ওয়েবসেম্বলি), ম্যানিফেস্ট , বা অন্য কোনও প্রকারের তালিকাভুক্ত নয়) নেটওয়ার্ক প্যানেলে ক্লিক করুন।
আপনি যদি এই বোতামগুলি দেখতে না পান তবে ফিল্টারগুলি অ্যাকশন বারটি সম্ভবত লুকানো আছে। ফিল্টার বারটি লুকান দেখুন।
একসাথে একাধিক প্রকারের সংস্থানগুলি দেখানোর জন্য, কমান্ড (ম্যাক) বা নিয়ন্ত্রণ (উইন্ডোজ, লিনাক্স) ধরে রাখুন এবং তারপরে বেশ কয়েকটি ধরণের ফিল্টার ক্লিক করুন।
সময়মতো ফিল্টার অনুরোধ
ওভারভিউ টাইমলাইনে বাম বা ডানদিকে টানুন কেবলমাত্র সেই সময়সীমার সময় সক্রিয় ছিল এমন অনুরোধগুলি প্রদর্শন করতে। ফিল্টার অন্তর্ভুক্ত। হাইলাইটেড সময়ের সময় সক্রিয় ছিল এমন কোনও অনুরোধ দেখানো হয়েছে।
ডেটা URL লুকান
ডেটা ইউআরএলগুলি হ'ল ছোট ফাইলগুলি অন্যান্য নথিতে এম্বেড করা হয়। আপনি অনুরোধ সারণীতে যে কোনও অনুরোধ যা data:
এটি একটি ডেটা ইউআরএল।
এই অনুরোধগুলি আড়াল করতে, ফিল্টারগুলি অ্যাকশন বারে, আরও ফিল্টারগুলি নির্বাচন করুন>
ডেটা ইউআরএলগুলি লুকান ।নীচের অংশে স্থিতি বারটি মোটের মধ্যে প্রদর্শিত অনুরোধগুলির সংখ্যা প্রদর্শন করে।
এক্সটেনশন URL লুকান
আপনার লেখক কোডটিতে ফোকাস করতে, আপনি ক্রোমে ইনস্টল করা এক্সটেনশানগুলি দ্বারা প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে পারেন। এক্সটেনশন অনুরোধগুলিতে URL রয়েছে যা chrome-extension://
দিয়ে শুরু হয়।
এক্সটেনশনের অনুরোধগুলি আড়াল করতে, ফিল্টার অ্যাকশন বারে, আরও ফিল্টার নির্বাচন করুন>
এক্সটেনশন ইউআরএলগুলি লুকান ।নীচের অংশে স্থিতি বারটি মোটের মধ্যে প্রদর্শিত অনুরোধগুলির সংখ্যা প্রদর্শন করে।
অবরুদ্ধ প্রতিক্রিয়া কুকিজ সহ কেবল অনুরোধগুলি দেখান
ফিল্টার অ্যাকশন বারে কোনও কারণে ব্লক করা প্রতিক্রিয়া কুকিজ সহ অনুরোধগুলি ব্যতীত সমস্ত কিছু ফিল্টার করার জন্য, আরও ফিল্টারগুলি নির্বাচন করুন> ডেমো পৃষ্ঠায় এটি চেষ্টা করুন।
ব্লক করা প্রতিক্রিয়া কুকিজ । এইনীচের অংশে স্থিতি বারটি মোটের মধ্যে প্রদর্শিত অনুরোধগুলির সংখ্যা প্রদর্শন করে।
প্রতিক্রিয়া কুকিকে কেন অবরুদ্ধ করা হয়েছিল তার কারণটি জানতে, অনুরোধটি নির্বাচন করুন, তার কুকিজ ট্যাবটি খুলুন এবং
তথ্য আইকনটির উপরে ঘুরে দেখুন।অতিরিক্তভাবে, নেটওয়ার্ক প্যানেল ক্রোম পতাকা বা কনফিগারেশনের কারণে কুকিজ সহ একটি অনুরোধের পাশে একটি
সতর্কতা আইকন দেখায়। একটি ক্লু সহ একটি টুলটিপ দেখতে আইকনটির উপরে ঘুরুন এবং আরও তথ্যের জন্য ইস্যু প্যানেলে যেতে এটি ক্লিক করুন।শুধুমাত্র অবরুদ্ধ অনুরোধগুলি দেখান
ব্লক করা অনুরোধগুলি ব্যতীত সমস্ত কিছু ফিল্টার করার জন্য, ফিল্টার অ্যাকশন বারে, আরও ফিল্টারগুলি নির্বাচন করুন> নেটওয়ার্ক অনুরোধ ব্লকিং ট্যাবটি ব্যবহার করতে পারেন।
ব্লক করা অনুরোধগুলি । এটি পরীক্ষা করতে, আপনি ড্রয়ারেঅনুরোধ টেবিলটি লাল রঙের অনুরোধগুলি অবরুদ্ধ করে। নীচের অংশে স্থিতি বারটি মোটের মধ্যে প্রদর্শিত অনুরোধগুলির সংখ্যা প্রদর্শন করে।
কেবল তৃতীয় পক্ষের অনুরোধগুলি দেখান
ফিল্টার অ্যাকশন বারে পৃষ্ঠার উত্স থেকে পৃথক হওয়া উত্সের সাথে অনুরোধগুলি ব্যতীত সমস্ত কিছু ফিল্টার করার জন্য, আরও ফিল্টারগুলি নির্বাচন করুন> ডেমো পৃষ্ঠায় এটি চেষ্টা করুন।
তৃতীয় পক্ষের অনুরোধগুলি । এইনীচের অংশে স্থিতি বারটি মোটের মধ্যে প্রদর্শিত অনুরোধগুলির সংখ্যা প্রদর্শন করে।
অনুরোধ অনুরোধ
ডিফল্টরূপে, অনুরোধ টেবিলের অনুরোধগুলি দীক্ষা সময় অনুসারে বাছাই করা হয় তবে আপনি অন্যান্য মানদণ্ড ব্যবহার করে টেবিলটি বাছাই করতে পারেন।
কলাম অনুসারে বাছাই করুন
সেই কলামটির অনুরোধগুলি বাছাই করতে অনুরোধ টেবিলের যে কোনও কলামের শিরোনাম ক্লিক করুন।
ক্রিয়াকলাপ পর্যায় অনুসারে বাছাই করুন
জলপ্রপাতটি কীভাবে অনুরোধ করে তা পরিবর্তন করতে, অনুরোধ টেবিলের শিরোনামে ডান ক্লিক করুন, জলপ্রপাতের উপরে ঘোরাঘুরি করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন:
- সময় শুরু । প্রথম অনুরোধটি শুরু করা হয়েছিল শীর্ষে।
- প্রতিক্রিয়া সময় । ডাউনলোড শুরু করা প্রথম অনুরোধটি শীর্ষে রয়েছে।
- শেষ সময় । সমাপ্ত প্রথম অনুরোধটি শীর্ষে রয়েছে।
- মোট সময়কাল । সংক্ষিপ্ত সংযোগ সেটআপ এবং অনুরোধ / প্রতিক্রিয়া সহ অনুরোধটি শীর্ষে রয়েছে।
- বিলম্ব প্রতিক্রিয়াটির জন্য সবচেয়ে কম সময় অপেক্ষা করা অনুরোধটি শীর্ষে রয়েছে।
এই বিবরণগুলি ধরে নিয়েছে যে প্রতিটি সম্পর্কিত বিকল্পটি সংক্ষিপ্ত থেকে দীর্ঘতম পর্যন্ত স্থান পেয়েছে। জলপ্রপাত কলামের শিরোনামে ক্লিক করা ক্রমটি বিপরীত করে।
এই উদাহরণে, জলপ্রপাতটি মোট সময়কাল দ্বারা বাছাই করা হয়। প্রতিটি বারের হালকা অংশ অপেক্ষা করতে সময় ব্যয় হয়। গা er ় অংশটি বাইট ডাউনলোড করতে ব্যয় করা সময়।
অনুরোধগুলি বিশ্লেষণ করুন
যতক্ষণ ডিভটুলগুলি খোলা থাকে, এটি নেটওয়ার্ক প্যানেলে সমস্ত অনুরোধ লগ করে। অনুরোধগুলি বিশ্লেষণ করতে নেটওয়ার্ক প্যানেলটি ব্যবহার করুন।
অনুরোধগুলির একটি লগ দেখুন
ডিভটুলগুলি খোলা থাকাকালীন সমস্ত অনুরোধের লগ দেখতে অনুরোধ টেবিলটি ব্যবহার করুন। অনুরোধগুলি ক্লিক বা ঘোরাফেরা করা তাদের সম্পর্কে আরও তথ্য প্রকাশ করে।
অনুরোধ টেবিলটি ডিফল্টরূপে নিম্নলিখিত কলামগুলি প্রদর্শন করে:
- নাম রিসোর্সের ফাইলের নাম বা একটি সনাক্তকারী।
অবস্থা এই কলামটি নিম্নলিখিত মানগুলি প্রদর্শন করতে পারে:
- এইচটিটিপি স্থিতি কোড, উদাহরণস্বরূপ,
200
বা404
। - ক্রস-অরিজিন রিসোর্স শেয়ারিং (সিওআর) এর কারণে অনুরোধগুলির জন্য
CORS error
ব্যর্থ হয়েছে। -
(blocked:origin)
ভুল কনফিগার করা শিরোনামগুলির সাথে অনুরোধগুলির জন্য। কী ভুল হয়েছে তার ইঙ্গিত সহ একটি সরঞ্জামটিপ দেখতে এই স্থিতির মানটি ঘুরে দেখুন। -
(failed)
ত্রুটি বার্তা অনুসরণ করে।
- এইচটিটিপি স্থিতি কোড, উদাহরণস্বরূপ,
টাইপ অনুরোধ করা রিসোর্সের মাইম প্রকার।
সূচনা । নিম্নলিখিত বস্তু বা প্রক্রিয়াগুলি অনুরোধগুলি শুরু করতে পারে:
- পার্সার ক্রোমের এইচটিএমএল পার্সার।
- পুনঃনির্দেশ । একটি এইচটিটিপি পুনর্নির্দেশ।
- স্ক্রিপ্ট । একটি জাভাস্ক্রিপ্ট ফাংশন।
- অন্যান্য কিছু অন্যান্য প্রক্রিয়া বা ক্রিয়া, যেমন কোনও লিঙ্ক ব্যবহার করে কোনও পৃষ্ঠায় নেভিগেট করা বা ঠিকানা বারে কোনও ইউআরএল প্রবেশ করা।
আকার সার্ভার দ্বারা বিতরণ হিসাবে প্রতিক্রিয়া শিরোনামগুলির সম্মিলিত আকার এবং প্রতিক্রিয়া বডি।
সময় অনুরোধের শুরু থেকে প্রতিক্রিয়াতে চূড়ান্ত বাইট প্রাপ্তি পর্যন্ত মোট সময়কাল।
জলপ্রপাত প্রতিটি অনুরোধের ক্রিয়াকলাপের একটি ভিজ্যুয়াল ব্রেকডাউন।
কলাম যোগ করুন বা সরান
অনুরোধ টেবিলের শিরোনামে ডান ক্লিক করুন এবং এটি লুকিয়ে রাখতে বা দেখানোর জন্য একটি বিকল্প নির্বাচন করুন। প্রদর্শিত বিকল্পগুলির পাশে চেক চিহ্ন রয়েছে।
আপনি নিম্নলিখিত অতিরিক্ত কলামগুলি যুক্ত করতে বা অপসারণ করতে পারেন: পাথ , ইউআরএল , পদ্ধতি , প্রোটোকল , স্কিম , ডোমেন , দূরবর্তী ঠিকানা , দূরবর্তী ঠিকানা স্পেস , ইনিশিয়েটর অ্যাড্রেস স্পেস , কুকিজ , সেট কুকিজ , অগ্রাধিকার , সংযোগ আইডি , ওভাররাইডস এবং জলপ্রপাত রয়েছে ।
কাস্টম কলাম যোগ করুন
অনুরোধ সারণীতে একটি কাস্টম কলাম যুক্ত করতে:
- অনুরোধ টেবিলের শিরোনামে ডান ক্লিক করুন এবং প্রতিক্রিয়া শিরোনামগুলি নির্বাচন করুন> শিরোনাম কলামগুলি পরিচালনা করুন ।
- ডায়ালগ উইন্ডোতে, কাস্টম শিরোনাম যুক্ত করুন ক্লিক করুন, এর নাম লিখুন এবং অ্যাড ক্লিক করুন।
ইনলাইন ফ্রেম দ্বারা গ্রুপ অনুরোধ
যদি কোনও পৃষ্ঠায় ইনলাইন ফ্রেমগুলি প্রচুর অনুরোধ শুরু করে তবে আপনি অনুরোধটি লগকে গ্রুপিং করে বন্ধুবান্ধব করতে পারেন।
আইফ্রেমস, ওপেন সেটিংস দ্বারা অনুরোধ গ্রুপে নেটওয়ার্ক প্যানেলের ভিতরে এবং ফ্রেমের মাধ্যমে গ্রুপ চেক করুন।
একটি ইনলাইন ফ্রেম দ্বারা শুরু করা একটি অনুরোধ দেখতে, অনুরোধ লগে এটি প্রসারিত করুন।
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখুন
একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখতে জলপ্রপাতটি ব্যবহার করুন। ডিফল্টরূপে, জলপ্রপাতটি অনুরোধগুলির শুরুর সময় দ্বারা সংগঠিত হয়। সুতরাং, বাম দিক থেকে আরও দূরে থাকা অনুরোধগুলি ডানদিকে আরও দূরে থাকাগুলির চেয়ে আগে শুরু হয়েছিল।
আপনি জলপ্রপাতটি বাছাই করতে পারেন এমন বিভিন্ন উপায় দেখতে ক্রিয়াকলাপের পর্যায়ে বাছাই করুন।
একটি ওয়েবকেট সংযোগের বার্তা বিশ্লেষণ করুন
একটি ওয়েবকেট সংযোগের বার্তাগুলি দেখতে:
- অনুরোধ টেবিলের নাম কলামে, ওয়েবসকেট সংযোগের URL টি ক্লিক করুন।
- বার্তা ট্যাবে ক্লিক করুন। টেবিলটি সর্বশেষ 100 বার্তা দেখায়।
টেবিলটি রিফ্রেশ করতে, অনুরোধ টেবিলের নাম কলামের অধীনে ওয়েবসকেট সংযোগের নামটি পুনরায় ক্লিক করুন।
টেবিলে তিনটি কলাম রয়েছে:
- তথ্য বার্তা পে -লোড। যদি বার্তাটি সরল পাঠ্য হয় তবে এটি এখানে প্রদর্শিত হবে। বাইনারি ওপকোডগুলির জন্য, এই কলামটি অপকোডের নাম এবং কোড প্রদর্শন করে। নিম্নলিখিত অপকোডগুলি সমর্থিত: ধারাবাহিকতা ফ্রেম, বাইনারি ফ্রেম, সংযোগ ক্লোজ ফ্রেম, পিং ফ্রেম এবং পং ফ্রেম।
- দৈর্ঘ্য । বাইটে বার্তা পে -লোডের দৈর্ঘ্য।
- সময় সময়টি যখন বার্তাটি গ্রহণ করা হয়েছিল বা প্রেরণ করা হয়েছিল।
বার্তাগুলি তাদের ধরণ অনুসারে রঙিন কোডেড:
- বহির্গামী পাঠ্য বার্তাগুলি হালকা-সবুজ।
- আগত পাঠ্য বার্তা সাদা।
- ওয়েবসকেট অপকোডগুলি হালকা-হলুদ।
- ত্রুটিগুলি হালকা-লাল।
একটি প্রবাহে ঘটনা বিশ্লেষণ
ফেচ এপিআই , ইভেন্টসোর্স এপিআই এবং এক্সএইচআর এর মাধ্যমে সার্ভারগুলি প্রবাহিত ইভেন্টগুলি দেখতে:
- ইভেন্টগুলি স্ট্রিম করে এমন কোনও পৃষ্ঠায় নেটওয়ার্কের অনুরোধগুলি রেকর্ড করুন । উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি খুলুন এবং তিনটি বোতামের যে কোনওটিতে ক্লিক করুন।
- নেটওয়ার্কে , একটি অনুরোধ নির্বাচন করুন এবং ইভেন্টস্ট্রিম ট্যাবটি খুলুন।
ইভেন্টগুলি ফিল্টার করতে, ইভেন্টস্ট্রিম ট্যাবের শীর্ষে ফিল্টার বারে একটি নিয়মিত অভিব্যক্তি নির্দিষ্ট করুন।
ক্যাপচারড ইভেন্টগুলির তালিকা সাফ করতে,
ক্লিয়ার ক্লিক করুন।একটি প্রতিক্রিয়া বডি একটি পূর্বরূপ দেখুন
একটি প্রতিক্রিয়া শরীরের একটি পূর্বরূপ দেখতে:
- অনুরোধের টেবিলের নাম কলামের অধীনে অনুরোধের URL টি ক্লিক করুন।
- পূর্বরূপ ট্যাবে ক্লিক করুন।
এই ট্যাবটি বেশিরভাগ চিত্র দেখার জন্য দরকারী।
একটি প্রতিক্রিয়া শরীর দেখুন
একটি অনুরোধে প্রতিক্রিয়া বডি দেখতে:
- অনুরোধের টেবিলের নাম কলামের অধীনে অনুরোধের URL টি ক্লিক করুন।
- প্রতিক্রিয়া ট্যাবে ক্লিক করুন।
এইচটিটিপি শিরোনাম দেখুন
একটি অনুরোধের http শিরোনাম ডেটা দেখতে:
- অনুরোধ সারণীতে একটি অনুরোধ ক্লিক করুন।
- শিরোনাম ট্যাবটি খুলুন এবং সাধারণ , প্রতিক্রিয়া শিরোনাম , অনুরোধ শিরোনাম এবং ally চ্ছিকভাবে প্রাথমিক ইঙ্গিতগুলি শিরোনাম বিভাগগুলিতে স্ক্রোল করুন।
সাধারণ বিভাগে, ডেভটুলস আপনাকে প্রাপ্ত HTTP স্ট্যাটাস কোডের পাশে মানব-পঠনযোগ্য স্থিতি বার্তা দেখায়।
প্রতিক্রিয়া শিরোনাম বিভাগে, আপনি একটি শিরোনাম মানের উপর ঘুরে বেড়াতে পারেন এবং স্থানীয়ভাবে প্রতিক্রিয়া শিরোনামকে ওভাররাইড করতে সম্পাদনা বোতামটি ক্লিক করতে পারেন।
এইচটিটিপি শিরোনাম উত্স দেখুন
ডিফল্টরূপে, শিরোনাম ট্যাব হেডারের নাম বর্ণানুক্রমিকভাবে দেখায়। এইচটিটিপি শিরোনামের নামগুলি যে ক্রমে প্রাপ্ত হয়েছিল তা দেখতে:
- আপনার আগ্রহী অনুরোধের জন্য শিরোনাম ট্যাবটি খুলুন http এইচটিটিপি শিরোনাম দেখুন।
- অনুরোধ শিরোনাম বা প্রতিক্রিয়া শিরোনাম বিভাগের পাশে, ভিউ উত্স ক্লিক করুন।
অস্থায়ী শিরোনাম সতর্কতা
কখনও কখনও শিরোনাম ট্যাবটি Provisional headers are shown...
। এটি নিম্নলিখিত কারণগুলির কারণে হতে পারে:
অনুরোধটি নেটওয়ার্কের মাধ্যমে প্রেরণ করা হয়নি তবে এটি স্থানীয় ক্যাশে থেকে পরিবেশন করা হয়েছিল, যা মূল অনুরোধের শিরোনামগুলি সংরক্ষণ করে না। এই ক্ষেত্রে, আপনি সম্পূর্ণ অনুরোধের শিরোনামগুলি দেখতে ক্যাশিং অক্ষম করতে পারেন।
নেটওয়ার্ক রিসোর্স বৈধ নয়। উদাহরণস্বরূপ, কনসোলে
fetch("https://jec.fish.com/unknown-url/")
কার্যকর করুন।
সুরক্ষার কারণে ডেভটুলগুলি কেবল অস্থায়ী শিরোনামও প্রদর্শন করতে পারে।
অনুরোধ পে -লোড দেখুন
অনুরোধের পে -লোড দেখতে, এটি এর ক্যোয়ারী স্ট্রিং পরামিতি এবং ডেটা ফর্ম দেখতে, অনুরোধ টেবিল থেকে একটি অনুরোধ নির্বাচন করুন এবং পে -লোড ট্যাবটি খুলুন।
পে -লোড উত্স দেখুন
ডিফল্টরূপে, ডেভটুলস একটি মানব-পঠনযোগ্য আকারে পে-লোড দেখায়।
পে -লোড ট্যাবে ক্যোয়ারী স্ট্রিং পরামিতি এবং ফর্ম ডেটাগুলির উত্সগুলি দেখতে, ক্যোয়ারী স্ট্রিং পরামিতিগুলির পাশের উত্স দেখুন বা ডেটা বিভাগগুলি ফর্ম দেখুন ।
ক্যোয়ারী স্ট্রিং প্যারামিটারগুলির ইউআরএল-ডিকোডযুক্ত যুক্তিগুলি দেখুন
পে-লোড ট্যাবে যুক্তিগুলির জন্য ইউআরএল-এনকোডিং টগল করতে, ডিকোডেড ভিউ ক্লিক করুন বা ইউআরএল-এনকোডেড দেখুন ।
কুকিজ দেখুন
একটি অনুরোধের এইচটিটিপি শিরোনামে প্রেরিত কুকিগুলি দেখতে:
- অনুরোধের টেবিলের নাম কলামের অধীনে অনুরোধের URL টি ক্লিক করুন।
- কুকিজ ট্যাবে ক্লিক করুন।
প্রতিটি কলামের বিবরণের জন্য, ক্ষেত্রগুলি দেখুন।
কুকিজ সংশোধন করতে, দেখুন, সম্পাদনা এবং কুকিগুলি মুছতে দেখুন।
একটি অনুরোধের সময় ভাঙ্গন দেখুন
একটি অনুরোধের সময় ভাঙ্গন দেখতে:
- অনুরোধের টেবিলের নাম কলামের অধীনে অনুরোধের URL টি ক্লিক করুন।
- টাইমিং ট্যাবে ক্লিক করুন।
এই ডেটা অ্যাক্সেস করার জন্য দ্রুতগতির জন্য একটি টাইমিং ব্রেকডাউন পূর্বরূপ দেখুন।
টাইমিং ট্যাবে আপনি দেখতে পাচ্ছেন এমন প্রতিটি পর্যায় সম্পর্কে আরও তথ্যের জন্য ব্যাখ্যা করা টাইমিং ব্রেকডাউন পর্যায়গুলি দেখুন।
একটি সময় ভাঙ্গনের পূর্বরূপ
একটি অনুরোধের সময় ভাঙ্গনের পূর্বরূপ দেখতে, অনুরোধের টেবিলের জলপ্রপাত কলামে অনুরোধের প্রবেশের উপর ঘুরে দেখুন।
এই ডেটা অ্যাক্সেস করার জন্য একটি অনুরোধের সময় ভাঙ্গন দেখুন দেখুন যা ঘোরাঘুরি প্রয়োজন হয় না।
টাইমিং ব্রেকডাউন পর্যায়গুলি ব্যাখ্যা করা হয়েছে
টাইমিং ট্যাবে আপনি দেখতে পাবেন এমন প্রতিটি পর্যায় সম্পর্কে আরও তথ্য এখানে:
- সারি । সংযোগ শুরুর আগে ব্রাউজারের সারি অনুরোধগুলি কখন এবং কখন:
- উচ্চতর অগ্রাধিকারের অনুরোধ রয়েছে। অনুরোধের অগ্রাধিকারটি কোনও সংস্থার ধরণ, পাশাপাশি নথির মধ্যে এর অবস্থান দ্বারা নির্ধারিত হয়। আরও তথ্যের জন্য,
fetchpriority
গাইডের রিসোর্স অগ্রাধিকার বিভাগটি পড়ুন। - এই উত্সের জন্য ইতিমধ্যে ছয়টি টিসিপি সংযোগ খোলা রয়েছে, যা সীমা। (কেবলমাত্র http/1.0 এবং http/1.1 এ প্রযোজ্য))
- ব্রাউজারটি সংক্ষেপে ডিস্ক ক্যাশে স্থান বরাদ্দ করছে।
- উচ্চতর অগ্রাধিকারের অনুরোধ রয়েছে। অনুরোধের অগ্রাধিকারটি কোনও সংস্থার ধরণ, পাশাপাশি নথির মধ্যে এর অবস্থান দ্বারা নির্ধারিত হয়। আরও তথ্যের জন্য,
- স্থগিত সারিবদ্ধভাবে বর্ণিত যে কোনও কারণে সংযোগ শুরু হওয়ার পরে অনুরোধটি স্থগিত করা যেতে পারে।
- ডিএনএস লুকআপ । ব্রাউজারটি অনুরোধের আইপি ঠিকানাটি সমাধান করছে।
- প্রাথমিক সংযোগ । ব্রাউজারটি টিসিপি হ্যান্ডশেক বা পুনরায় চেষ্টা এবং একটি এসএসএল নিয়ে আলোচনা সহ একটি সংযোগ স্থাপন করছে।
- প্রক্সি আলোচনা । ব্রাউজারটি একটি প্রক্সি সার্ভারের সাথে অনুরোধটি নিয়ে আলোচনা করছে।
- অনুরোধ প্রেরণ । অনুরোধ পাঠানো হচ্ছে।
- পরিষেবা কর্মী প্রস্তুতি । ব্রাউজারটি পরিষেবা কর্মী শুরু করছে।
- পরিষেবা কর্মী অনুরোধ । অনুরোধটি পরিষেবা কর্মীর কাছে প্রেরণ করা হচ্ছে।
- অপেক্ষা (টিটিএফবি) । ব্রাউজারটি প্রতিক্রিয়াটির প্রথম বাইটের জন্য অপেক্ষা করছে। টিটিএফবি প্রথম বাইটের জন্য সময়ের জন্য দাঁড়িয়েছে। এই সময়টিতে 1 টি রাউন্ড ট্রিপ অফ লেটেন্সি এবং সার্ভার প্রতিক্রিয়া প্রস্তুত করতে সময় নিয়েছিল।
- সামগ্রী ডাউনলোড । ব্রাউজারটি সরাসরি নেটওয়ার্ক থেকে বা কোনও পরিষেবা কর্মী থেকে প্রতিক্রিয়া গ্রহণ করছে। এই মানটি প্রতিক্রিয়া বডি পড়তে ব্যয় করা মোট পরিমাণ। প্রত্যাশিত মানগুলির চেয়ে বড় মানগুলি একটি ধীর নেটওয়ার্ককে নির্দেশ করতে পারে, বা ব্রাউজারটি অন্যান্য কাজ সম্পাদন করতে ব্যস্ত যা প্রতিক্রিয়াটি পড়তে বিলম্ব করে।
সূচনা এবং নির্ভরতা দেখুন
একটি অনুরোধের সূচনাকারী এবং নির্ভরতা দেখতে, অনুরোধ সারণীতে অনুরোধের উপরে শিফটটি ধরে রাখুন এবং ঘুরে দেখুন। ডেভটুলস রঙিন সূচনা সবুজ এবং নির্ভরতা লাল।
যখন অনুরোধ টেবিলটি কালানুক্রমিকভাবে অর্ডার করা হয়, আপনি অনুরোধের উপরে প্রথম সবুজ অনুরোধটি যে আপনি ঘুরে বেড়াচ্ছেন তা হ'ল নির্ভরতার সূচনা। যদি এর উপরে আরও একটি সবুজ অনুরোধ থাকে তবে সেই উচ্চতর অনুরোধটি হ'ল সূচনাকারীর সূচনাকারী। ইত্যাদি।
লোড ইভেন্টগুলি দেখুন
ডিভটুলস নেটওয়ার্ক প্যানেলে একাধিক স্থানে DOMContentLoaded
এবং load
ইভেন্টগুলির সময় প্রদর্শন করে। DOMContentLoaded
ইভেন্টটি নীল রঙের এবং load
ইভেন্টটি লাল।
অনুরোধের মোট সংখ্যা দেখুন
অনুরোধের মোট সংখ্যা নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে তালিকাভুক্ত করা হয়েছে।
স্থানান্তরিত এবং লোডযুক্ত সংস্থানগুলির মোট আকার দেখুন
ডিভটুলস নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে স্থানান্তরিত এবং লোড (সংক্ষেপিত) সংস্থানগুলির মোট আকার তালিকাভুক্ত করে।
ব্রাউজারটি তাদের সঙ্কুচিত করার পরে কত বড় সংস্থান রয়েছে তা দেখতে কোনও সংস্থার সঙ্কুচিত আকার দেখুন ।
স্ট্যাক ট্রেস দেখুন যা একটি অনুরোধের কারণ হয়েছিল
যখন কোনও জাভাস্ক্রিপ্ট বিবৃতি কোনও সংস্থানকে অনুরোধ করা হয়, তখন অনুরোধের দিকে পরিচালিত স্ট্যাক ট্রেসটি দেখার জন্য ইনিশিয়েটার কলামের উপরে ঘুরে বেড়ায়।
একটি সংস্থার সঙ্কুচিত আকার দেখুন
সেটিংস চেক করুন > বড় অনুরোধ সারি এবং তারপরে আকার কলামের নীচের মানটি দেখুন।
এই উদাহরণে, www.google.com
ডকুমেন্টের সংকুচিত আকার যা নেটওয়ার্কের উপরে প্রেরণ করা হয়েছিল তা ছিল 43.8 KB
, যেখানে সঙ্কুচিত আকারটি ছিল 136 KB
।
রফতানি অনুরোধ ডেটা
আপনি পরবর্তী বর্ণিত বিভিন্ন উপায়ে ফিল্টার প্রয়োগ করে অনুরোধগুলির তালিকা রফতানি বা অনুলিপি করতে পারেন।
সমস্ত নেটওয়ার্ক অনুরোধ একটি হার ফাইলে সংরক্ষণ করুন
এইচআর (এইচটিটিপি সংরক্ষণাগার) হ'ল একটি ফাইল ফর্ম্যাট যা ক্যাপচার করা ডেটা রফতানি করতে বেশ কয়েকটি এইচটিটিপি সেশন সরঞ্জাম দ্বারা ব্যবহৃত হয়। ফর্ম্যাটটি একটি নির্দিষ্ট ক্ষেত্রগুলির একটি নির্দিষ্ট সেট সহ একটি জেএসএন অবজেক্ট।
সংবেদনশীল তথ্যের দুর্ঘটনাজনিত ফাঁস হওয়ার সম্ভাবনা হ্রাস করার জন্য, ডিফল্টরূপে আপনি "স্যানিটাইজড" নেটওয়ার্ক লগ ইন এইচআর ফর্ম্যাটটি রফতানি করতে পারেন যা সংবেদনশীল তথ্য যেমন Cookie
, Set-Cookie
এবং Authorization
শিরোনামগুলি বাদ দেয়। যদি প্রয়োজন হয় তবে আপনি সংবেদনশীল ডেটা সহ লগটি রফতানি করতে পারেন।
সমস্ত নেটওয়ার্ক অনুরোধগুলি একটি হার ফাইলে সংরক্ষণ করতে, দুটি উপায়ের একটি চয়ন করুন:
অনুরোধ সারণীতে যে কোনও অনুরোধে ডান ক্লিক করুন এবং অনুলিপি নির্বাচন করুন> সমস্ত [তালিকাভুক্ত] এইচআর (স্যানিটাইজড) সংরক্ষণ করুন বা সমস্ত [তালিকাভুক্ত] এইচআর (সংবেদনশীল ডেটা সহ) সংরক্ষণ করুন ।
নেটওয়ার্ক প্যানেলের শীর্ষে অ্যাকশন বারে
রফতানি হার (স্যানিটাইজড) ক্লিক করুন।সংবেদনশীল ডেটা সহ রফতানি করতে, প্রথমে
সেটিংস > পছন্দসমূহ > নেটওয়ার্ক > সংবেদনশীল ডেটা সহ এইচআর উত্পন্ন করার অনুমতি দিন , তারপরে রফতানি বোতামটি ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে রফতানি হার (সংবেদনশীল ডেটা সহ) নির্বাচন করুন।
একবার আপনার এইচআইআর ফাইল হয়ে গেলে, আপনি দুটি উপায়ে বিশ্লেষণের জন্য এটি ডিভটুলগুলিতে আবার আমদানি করতে পারেন:
- অনুরোধ টেবিলের মধ্যে হার ফাইলটি টেনে আনুন এবং ড্রপ করুন।
- নেটওয়ার্ক প্যানেলের শীর্ষে অ্যাকশন বারে আমদানি হার ক্লিক করুন।
একটি অনুরোধ, অনুরোধের একটি ফিল্টার সেট, বা সেগুলি সমস্ত ক্লিপবোর্ডে অনুলিপি করুন
অনুরোধ টেবিলের নাম কলামের অধীনে, একটি অনুরোধে ডান ক্লিক করুন, অনুলিপিটির উপরে ঘুরুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন।
একটি একক অনুরোধ, এর প্রতিক্রিয়া, বা স্ট্যাক ট্রেস অনুলিপি করতে:
- কপি ইউআরএল । ক্লিপবোর্ডে অনুরোধের ইউআরএলটি অনুলিপি করুন।
- কার্ল হিসাবে অনুলিপি । কার্ল কমান্ড হিসাবে অনুরোধটি অনুলিপি করুন।
- পাওয়ারশেল হিসাবে অনুলিপি করুন । পাওয়ারশেল কমান্ড হিসাবে অনুরোধটি অনুলিপি করুন।
- আনতে অনুলিপি করুন । অনুরোধটি আনুন কল হিসাবে অনুলিপি করুন।
- আনতে অনুলিপি করুন (নোড.জেএস) । অনুরোধটি নোড.জেএস আনার কল হিসাবে অনুলিপি করুন।
- অনুলিপি প্রতিক্রিয়া । ক্লিপবোর্ডে প্রতিক্রিয়া বডিটি অনুলিপি করুন।
- অনুলিপি স্ট্যাক ট্রেস । ক্লিপবোর্ডে অনুরোধের স্ট্যাক ট্র্যাকটি অনুলিপি করুন।
সমস্ত অনুরোধ অনুলিপি করতে:
- সমস্ত ইউআরএল অনুলিপি করুন । ক্লিপবোর্ডে সমস্ত অনুরোধের ইউআরএলগুলি অনুলিপি করুন।
- সমস্ত কার্ল হিসাবে অনুলিপি করুন । কার্ল কমান্ডের একটি চেইন হিসাবে সমস্ত অনুরোধগুলি অনুলিপি করুন।
- পাওয়ারশেল হিসাবে সমস্ত অনুলিপি করুন । পাওয়ারশেল কমান্ডগুলির একটি চেইন হিসাবে সমস্ত অনুরোধগুলি অনুলিপি করুন।
- আনতে সমস্ত অনুলিপি করুন । আনার কলগুলির একটি চেইন হিসাবে সমস্ত অনুরোধগুলি অনুলিপি করুন।
- সমস্ত আনতে অনুলিপি করুন (নোড.জেএস) । নোড.জেএস আনার কলগুলির একটি চেইন হিসাবে সমস্ত অনুরোধগুলি অনুলিপি করুন।
- সমস্ত হর হিসাবে অনুলিপি করুন (স্যানিটাইজড) ।
Cookie
,Set-Cookie
এবংAuthorization
শিরোনামগুলির মতো সংবেদনশীল ডেটা ছাড়াই এইচএআর ডেটা হিসাবে সমস্ত অনুরোধগুলি অনুলিপি করুন। - এইচআর হিসাবে সমস্ত অনুলিপি করুন (সংবেদনশীল ডেটা সহ) । সংবেদনশীল ডেটা সহ এইচআর ডেটা হিসাবে সমস্ত অনুরোধগুলি অনুলিপি করুন।
অনুরোধগুলির একটি ফিল্টার সেট অনুলিপি করতে, নেটওয়ার্ক লগে একটি ফিল্টার প্রয়োগ করুন, একটি অনুরোধে ডান ক্লিক করুন এবং নির্বাচন করুন:
- সমস্ত তালিকাভুক্ত ইউআরএল অনুলিপি করুন । ক্লিপবোর্ডে সমস্ত ফিল্টার করা অনুরোধের URLS অনুলিপি করুন।
- কার্ল হিসাবে তালিকাভুক্ত সমস্ত অনুলিপি করুন । সমস্ত ফিল্টার করা অনুরোধগুলি কার্ল কমান্ডের একটি চেইন হিসাবে অনুলিপি করুন।
- পাওয়ারশেল হিসাবে তালিকাভুক্ত সমস্ত অনুলিপি করুন । পাওয়ারশেল কমান্ডগুলির একটি চেইন হিসাবে সমস্ত ফিল্টার করা অনুরোধগুলি অনুলিপি করুন।
- আনতে তালিকাভুক্ত সমস্ত অনুলিপি করুন । আনার কলগুলির একটি চেইন হিসাবে সমস্ত ফিল্টার করা অনুরোধগুলি অনুলিপি করুন।
- আনতে তালিকাভুক্ত সমস্ত অনুলিপি (নোড.জেএস) । সমস্ত ফিল্টার করা অনুরোধগুলি নোড.জেএস আনার কলগুলির একটি চেইন হিসাবে অনুলিপি করুন।
- এইচআর (স্যানিটাইজড) হিসাবে তালিকাভুক্ত সমস্ত অনুলিপি করুন ।
Cookie
,Set-Cookie
এবংAuthorization
শিরোনামগুলির মতো সংবেদনশীল ডেটা ছাড়াই এইচএআর ডেটা হিসাবে সমস্ত ফিল্টার করা অনুরোধগুলি অনুলিপি করুন। - এইচআর হিসাবে তালিকাভুক্ত সমস্ত অনুলিপি করুন (সংবেদনশীল ডেটা সহ) । সংবেদনশীল ডেটা সহ এইচএআর ডেটা হিসাবে সমস্ত ফিল্টার করা অনুরোধগুলি অনুলিপি করুন।
নেটওয়ার্ক প্যানেলের বিন্যাস পরিবর্তন করুন
আপনার কাছে কী গুরুত্বপূর্ণ তা ফোকাস করার জন্য নেটওয়ার্ক প্যানেল ইউআইয়ের বিভাগগুলি প্রসারিত করুন বা ধসে পড়ুন।
ফিল্টারগুলি অ্যাকশন বারটি লুকান
ডিফল্টরূপে, ডিভটুলস নেটওয়ার্ক প্যানেলের শীর্ষে ফিল্টার বার দেখায়। এটি আড়াল করতে ফিল্টার ক্লিক করুন।
বড় অনুরোধ সারি ব্যবহার করুন
আপনি যখন আপনার নেটওয়ার্ক রিকোয়েস্ট টেবিলটিতে আরও হোয়াইটস্পেস চান তখন বড় সারিগুলি ব্যবহার করুন। কিছু কলাম বড় সারি ব্যবহার করার সময় আরও কিছুটা তথ্য সরবরাহ করে। উদাহরণস্বরূপ, আকার কলামের নীচের মানটি একটি অনুরোধের সংকুচিত আকার এবং অগ্রাধিকার কলামটি প্রাথমিক (নীচের মান) এবং চূড়ান্ত (শীর্ষ মান) উভয়ই অগ্রাধিকার দেখায়।
সেটিংস খুলুন এবং বড় সারিগুলি দেখতে বড় অনুরোধ সারিগুলিতে ক্লিক করুন।
ওভারভিউ ট্র্যাকটি লুকান
ডিফল্টরূপে, ডিভটুলগুলি ওভারভিউ ট্র্যাকটি দেখায়। সেটিংস খুলুন এবং এটি লুকানোর জন্য শো ওভারভিউ চেকবক্সটি সাফ করুন।