নেটওয়ার্ক বৈশিষ্ট্য উল্লেখ

Kayce Basques
সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova
GitHub

Chrome DevTools নেটওয়ার্ক বিশ্লেষণ বৈশিষ্ট্যগুলির এই ব্যাপক রেফারেন্সে আপনার পৃষ্ঠা কীভাবে লোড হয় তা বিশ্লেষণ করার নতুন উপায়গুলি আবিষ্কার করুন৷

রেকর্ড নেটওয়ার্ক অনুরোধ

ডিফল্টরূপে, DevTools নেটওয়ার্ক প্যানেলে সমস্ত নেটওয়ার্ক অনুরোধ রেকর্ড করে, যতক্ষণ না DevTools খোলা থাকে।

নেটওয়ার্ক প্যানেল।

নেটওয়ার্ক অনুরোধ রেকর্ডিং বন্ধ করুন

রেকর্ডিং অনুরোধ বন্ধ করতে:

  • নেটওয়ার্ক লগ রেকর্ডিং বন্ধ করুন ক্লিক করুন রেকর্ডিং নেটওয়ার্ক বন্ধ করুন। নেটওয়ার্ক প্যানেলে। DevTools আর অনুরোধ রেকর্ড করছে না তা বোঝাতে এটি ধূসর হয়ে যায়।
  • নেটওয়ার্ক প্যানেল ফোকাসে থাকাকালীন কমান্ড > + E (ম্যাক) বা কন্ট্রোল + ই (উইন্ডোজ, লিনাক্স) টিপুন।

সাফ অনুরোধ

সাফ ক্লিক করুন পরিষ্কার. অনুরোধ টেবিল থেকে সমস্ত অনুরোধ সাফ করতে নেটওয়ার্ক প্যানেলে।

ক্লিয়ার বোতাম।

পৃষ্ঠা লোড জুড়ে অনুরোধ সংরক্ষণ করুন

পৃষ্ঠা লোড জুড়ে অনুরোধগুলি সংরক্ষণ করতে, নেটওয়ার্ক প্যানেলে লগ সংরক্ষণ করুন চেকবক্সটি চেক করুন। আপনি সংরক্ষণ লগ অক্ষম না করা পর্যন্ত DevTools সমস্ত অনুরোধ সংরক্ষণ করে।

পৃষ্ঠা লোডের সময় স্ক্রিনশট ক্যাপচার করুন

ব্যবহারকারীরা আপনার পৃষ্ঠা লোড হওয়ার জন্য অপেক্ষা করার সময় কী দেখছেন তা বিশ্লেষণ করতে স্ক্রিনশট ক্যাপচার করুন।

স্ক্রিনশট সক্ষম করতে, সেটিংস খুলুন সেটিংস. নেটওয়ার্ক প্যানেলের ভিতরে এবং ক্যাপচার স্ক্রিনশট চেক করুন।

স্ক্রিনশট ক্যাপচার করার জন্য নেটওয়ার্ক প্যানেল ফোকাসে থাকাকালীন পৃষ্ঠাটি পুনরায় লোড করুন৷

একবার ক্যাপচার করা হলে, আপনি নিম্নলিখিত উপায়ে স্ক্রিনশটগুলির সাথে ইন্টারঅ্যাক্ট করতে পারেন:

  • সেই স্ক্রিনশটটি যে বিন্দুতে ক্যাপচার করা হয়েছিল তা দেখতে একটি স্ক্রিনশটের উপর হোভার করুন৷ ওভারভিউ প্যানে একটি হলুদ রেখা দেখা যাচ্ছে।
  • স্ক্রিনশট ক্যাপচার করার পরে যেকোন অনুরোধগুলি ফিল্টার করতে একটি স্ক্রিনশটের থাম্বনেইলে ক্লিক করুন৷
  • একটি থাম্বনেইলে জুম বাড়াতে ডাবল-ক্লিক করুন।

স্ক্রিনশট ক্যাপচার সক্ষম।

XHR অনুরোধ রিপ্লে করুন

একটি XHR অনুরোধ রিপ্লে করতে, অনুরোধ টেবিলে নিম্নলিখিতগুলির মধ্যে একটি করুন:

  • অনুরোধটি নির্বাচন করুন এবং R চাপুন।
  • অনুরোধটিতে ডান ক্লিক করুন এবং রিপ্লে এক্সএইচআর নির্বাচন করুন।

রিপ্লে এক্সএইচআর নির্বাচন করা হচ্ছে।

লোডিং আচরণ পরিবর্তন করুন

ব্রাউজার ক্যাশে নিষ্ক্রিয় করে প্রথমবারের দর্শকদের অনুকরণ করুন

একজন প্রথমবার ব্যবহারকারী আপনার সাইটের অভিজ্ঞতা কেমন তা অনুকরণ করতে, ক্যাশে অক্ষম করুন চেকবক্সটি চেক করুন৷ DevTools ব্রাউজার ক্যাশে অক্ষম করে। এটি আরও নিখুঁতভাবে প্রথমবারের ব্যবহারকারীর অভিজ্ঞতাকে অনুকরণ করে, কারণ বারবার ভিজিট করার সময় ব্রাউজার ক্যাশে থেকে অনুরোধগুলি পরিবেশন করা হয়।

অক্ষম ক্যাশে চেকবক্স.

নেটওয়ার্ক কন্ডিশন ড্রয়ার থেকে ব্রাউজার ক্যাশে অক্ষম করুন

আপনি যদি অন্যান্য DevTools প্যানেলে কাজ করার সময় ক্যাশে অক্ষম করতে চান, তাহলে নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।

  1. ক্লিক করুন নেটওয়ার্ক অবস্থা। নেটওয়ার্ক শর্ত ড্রয়ার খুলতে আইকন।
  2. অক্ষম ক্যাশে চেকবক্স চেক করুন বা সাফ করুন।

ম্যানুয়ালি ব্রাউজার ক্যাশে সাফ করুন

যে কোনো সময়ে ব্রাউজার ক্যাশে ম্যানুয়ালি সাফ করতে, অনুরোধ টেবিলের যে কোনো জায়গায় ডান-ক্লিক করুন এবং ব্রাউজার ক্যাশে সাফ করুন নির্বাচন করুন।

ব্রাউজার ক্যাশে সাফ নির্বাচন করা হচ্ছে।

অফলাইনে অনুকরণ করুন

প্রগ্রেসিভ ওয়েব অ্যাপস নামে একটি নতুন শ্রেণির ওয়েব অ্যাপ রয়েছে, যা পরিষেবা কর্মীদের সাহায্যে অফলাইনে কাজ করতে পারে। আপনি যখন এই ধরনের অ্যাপ তৈরি করছেন, তখন কোনো ডেটা সংযোগ নেই এমন একটি ডিভাইসকে দ্রুত সিমুলেট করতে সক্ষম হওয়া দরকারী।

একটি সম্পূর্ণ অফলাইন নেটওয়ার্ক অভিজ্ঞতা অনুকরণ করতে, ক্যাশে নিষ্ক্রিয় চেকবক্সের পাশে থাকা নেটওয়ার্ক থ্রটলিং ড্রপ-ডাউন মেনু থেকে অফলাইন নির্বাচন করুন।

ড্রপ-ডাউন মেনু থেকে অফলাইন নির্বাচিত।

DevTools নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কতা আইকন প্রদর্শন করে যা আপনাকে মনে করিয়ে দেয় যে অফলাইন সক্ষম করা আছে।

ধীর নেটওয়ার্ক সংযোগ অনুকরণ করুন

ধীর 3G, দ্রুত 3G, এবং অন্যান্য সংযোগ গতি অনুকরণ করতে, থ্রটলিং মেনু থেকে সংশ্লিষ্ট বিকল্পগুলি নির্বাচন করুন৷

নেটওয়ার্ক থ্রটলিং মেনু।

DevTools নেটওয়ার্ক ট্যাবের পাশে একটি সতর্কতা আইকন প্রদর্শন করে যাতে আপনাকে মনে করিয়ে দেয় যে থ্রোটলিং সক্ষম করা হয়েছে।

কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন

প্রিসেটগুলি ছাড়াও, যেমন ধীর বা দ্রুত 3G, আপনি আপনার নিজস্ব কাস্টম থ্রটলিং প্রোফাইলগুলিও যুক্ত করতে পারেন:

  1. থ্রটলিং মেনু খুলুন এবং কাস্টম > যোগ করুন... নির্বাচন করুন।
  2. সেটিংস সেটিংস > থ্রোটলিং- এ বর্ণিত একটি নতুন থ্রটলিং প্রোফাইল সেট আপ করুন।

  3. নেটওয়ার্ক প্যানেলে ফিরে, থ্রটলিং ড্রপ-ডাউন মেনু থেকে আপনার নতুন প্রোফাইল নির্বাচন করুন।

    থ্রটলিং মেনু থেকে নির্বাচিত একটি কাস্টম প্রোফাইল৷ নেটওয়ার্ক প্যানেল একটি সতর্কতা আইকন প্রদর্শন করে।

DevTools প্রদর্শন করে a সতর্কতা। নেটওয়ার্ক প্যানেলের পাশে সতর্কতা আইকন আপনাকে মনে করিয়ে দিতে যে থ্রটলিং সক্ষম করা হয়েছে।

থ্রটল ওয়েবসকেট সংযোগ

HTTP অনুরোধগুলি ছাড়াও, DevTools 99 সংস্করণ থেকে WebSocket সংযোগগুলিকে থ্রোটল করে৷

ওয়েবসকেট থ্রটলিং পর্যবেক্ষণ করতে:

  1. একটি নতুন সংযোগ শুরু করুন, উদাহরণস্বরূপ, একটি পরীক্ষা টুল ব্যবহার করে।
  2. নেটওয়ার্ক প্যানেলে, নো থ্রটলিং নির্বাচন করুন এবং সংযোগের মাধ্যমে একটি বার্তা পাঠান।
  3. একটি খুব ধীর কাস্টম থ্রটলিং প্রোফাইল তৈরি করুন, উদাহরণস্বরূপ, 10 kbit/s । এই ধরনের একটি ধীর প্রোফাইল আপনাকে পার্থক্য লক্ষ্য করতে সাহায্য করবে।
  4. নেটওয়ার্ক প্যানেলে, প্রোফাইল নির্বাচন করুন এবং অন্য বার্তা পাঠান।
  5. WS ফিল্টার টগল করুন, আপনার সংযোগের নামে ক্লিক করুন, বার্তা ট্যাব খুলুন, এবং থ্রটলিং সহ এবং ছাড়াই পাঠানো এবং প্রতিধ্বনিত বার্তাগুলির মধ্যে সময়ের পার্থক্য পরীক্ষা করুন। উদাহরণ স্বরূপ:

বার্তা পাঠানো হয় এবং থ্রোটলিং ছাড়াই প্রতিধ্বনিত হয়।

নেটওয়ার্ক অবস্থার ড্রয়ার থেকে ধীর নেটওয়ার্ক সংযোগগুলি অনুকরণ করুন৷

আপনি যদি অন্যান্য DevTools প্যানেলে কাজ করার সময় নেটওয়ার্ক সংযোগ থ্রোটল করতে চান, তাহলে নেটওয়ার্ক কন্ডিশন ড্রয়ার ব্যবহার করুন।

  1. ক্লিক করুন নেটওয়ার্ক অবস্থা। নেটওয়ার্ক শর্ত ড্রয়ার খুলতে আইকন।
  2. নেটওয়ার্ক থ্রটলিং মেনু থেকে একটি সংযোগ গতি নির্বাচন করুন।

ব্রাউজার কুকিজ ম্যানুয়ালি সাফ করুন

যেকোন সময়ে ব্রাউজার কুকিজ ম্যানুয়ালি সাফ করতে, অনুরোধ টেবিলের যেকোনো জায়গায় ডান-ক্লিক করুন এবং ব্রাউজার কুকিজ সাফ করুন নির্বাচন করুন।

ক্লিয়ার ব্রাউজার কুকিজ নির্বাচন করা হচ্ছে।

HTTP প্রতিক্রিয়া শিরোনাম ওভাররাইড করুন

স্থানীয়ভাবে ওভাররাইড ফাইল এবং HTTP প্রতিক্রিয়া শিরোনাম দেখুন।

ব্যবহারকারী এজেন্টকে ওভাররাইড করুন

ব্যবহারকারী এজেন্টকে ম্যানুয়ালি ওভাররাইড করতে:

  1. ক্লিক করুন নেটওয়ার্ক অবস্থা। নেটওয়ার্ক শর্ত ড্রয়ার খুলতে আইকন।
  2. স্বয়ংক্রিয়ভাবে নির্বাচন সাফ করুন।
  3. মেনু থেকে একটি ব্যবহারকারী এজেন্ট বিকল্প চয়ন করুন, বা বাক্সে একটি কাস্টম একটি লিখুন৷

ফিল্টার অনুরোধ

বৈশিষ্ট্য দ্বারা ফিল্টার অনুরোধ

ফিল্টার বক্স ব্যবহার করুন ফিল্টার করার জন্য প্রপার্টি, যেমন ডোমেন বা অনুরোধের আকার।

আপনি যদি বাক্সটি দেখতে না পান তবে ফিল্টার ফলকটি সম্ভবত লুকানো আছে। ফিল্টার ফলকটি লুকান দেখুন।

ফিল্টার টেক্সট বক্স এবং ইনভার্ট চেকবক্স।

আপনার ফিল্টারটি উল্টাতে, ফিল্টার বাক্সের পাশে উল্টানো চেকবক্সটি চেক করুন।

আপনি প্রতিটি সম্পত্তিকে একটি স্থান দিয়ে আলাদা করে একসাথে একাধিক বৈশিষ্ট্য ব্যবহার করতে পারেন। উদাহরণস্বরূপ, 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), ম্যানিফেস্ট বা অন্যান্য (যেকোন প্রকার এখানে তালিকাভুক্ত নয়) বোতামে ক্লিক করুন। নেটওয়ার্ক প্যানেলে।

আপনি যদি এই বোতামগুলি দেখতে না পান তবে ফিল্টার ফলকটি সম্ভবত লুকানো আছে৷ ফিল্টার ফলকটি লুকান দেখুন।

একসাথে একাধিক ধরনের ফিল্টার সক্ষম করতে, কমান্ড (ম্যাক) বা কন্ট্রোল (উইন্ডোজ, লিনাক্স) ধরে রাখুন এবং তারপরে ক্লিক করুন।

JS, CSS, এবং ডকুমেন্ট রিসোর্স প্রদর্শন করতে টাইপ ফিল্টার ব্যবহার করে।

সময় অনুসারে অনুরোধগুলি ফিল্টার করুন

শুধুমাত্র সেই সময়সীমার মধ্যে সক্রিয় থাকা অনুরোধগুলি প্রদর্শন করতে ওভারভিউ ফলকে বাম বা ডানে টেনে আনুন। ফিল্টারটি অন্তর্ভুক্ত। হাইলাইট করা সময়ে সক্রিয় ছিল যে কোনো অনুরোধ দেখানো হয়.

প্রায় 21-25 ms সক্রিয় ছিল না যে কোনো অনুরোধ ফিল্টার আউট.

ডেটা URL লুকান

ডেটা URL হল ছোট ফাইল যা অন্যান্য নথিতে এম্বেড করা হয়। যেকোন অনুরোধ যা আপনি অনুরোধের টেবিলে দেখতে পান যা data: একটি ডেটা URL।

এই অনুরোধগুলি লুকাতে, চেক করুন চেকবক্স। ডেটা URL লুকান ।

অনুরোধের টেবিল থেকে লুকানো ডেটা URL।

নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।

এক্সটেনশন URL লুকান

আপনি যে কোডটি লিখেছেন তার উপর ফোকাস করতে, আপনি Chrome এ ইনস্টল করা এক্সটেনশনগুলির মাধ্যমে প্রেরিত অপ্রাসঙ্গিক অনুরোধগুলি ফিল্টার করতে পারেন৷ এক্সটেনশন অনুরোধের URL আছে যা chrome-extension:// দিয়ে শুরু হয়।

এক্সটেনশন অনুরোধ লুকাতে, চেক করুন চেকবক্স। এক্সটেনশন URL লুকান ।

অনুরোধ টেবিল থেকে লুকানো এক্সটেনশন URLs.

নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।

অবরুদ্ধ প্রতিক্রিয়া কুকি সহ শুধুমাত্র অনুরোধগুলি দেখান৷

যেকোনো কারণে অবরুদ্ধ প্রতিক্রিয়া কুকি সহ অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, চেক করুন চেকবক্স। অবরুদ্ধ প্রতিক্রিয়া কুকিজ . এই ডেমো পৃষ্ঠায় এটি চেষ্টা করুন.

অনুরোধের সারণী শুধুমাত্র অবরুদ্ধ প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখায়।

নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।

একটি প্রতিক্রিয়া কুকি কেন ব্লক করা হয়েছিল তার কারণ খুঁজে বের করতে, অনুরোধটি নির্বাচন করুন, এর কুকি ট্যাব খুলুন এবং এর উপর হোভার করুন তথ্য আইকন।

অতিরিক্তভাবে, নেটওয়ার্ক প্যানেল তৃতীয় পক্ষের কুকি ফেজআউট দ্বারা প্রভাবিত বা এটি থেকে অব্যাহতিপ্রাপ্ত একটি অনুরোধের পাশে একটি সতর্কতা সতর্কতা আইকন দেখায়। একটি ক্লু সহ একটি টুলটিপ দেখতে আইকনের উপর হোভার করুন এবং আরও তথ্যের জন্য সমস্যা প্যানেলে যেতে এটিতে ক্লিক করুন।

তৃতীয় পক্ষের কুকি ফেজআউট দ্বারা প্রভাবিত অনুরোধের পাশে সতর্কতা আইকন।

শুধুমাত্র অবরুদ্ধ অনুরোধ দেখান

ব্লক করা অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, চেক করুন চেকবক্স। ব্লক করা অনুরোধ । এটি পরীক্ষা করতে, আপনি নেটওয়ার্ক অনুরোধ ব্লকিং ড্রয়ার ট্যাব ব্যবহার করতে পারেন।

অনুরোধ সারণী শুধুমাত্র ব্লক করা অনুরোধ দেখায়।

অনুরোধের টেবিলটি লাল রঙে ব্লক করা অনুরোধগুলিকে হাইলাইট করে। নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।

শুধুমাত্র তৃতীয় পক্ষের অনুরোধ দেখান

পৃষ্ঠার উৎস থেকে ভিন্ন উৎসের অনুরোধ ছাড়া সবকিছু ফিল্টার করতে, চেক করুন চেকবক্স। তৃতীয় পক্ষের অনুরোধ । এই ডেমো পৃষ্ঠায় এটি চেষ্টা করুন.

অনুরোধ সারণী শুধুমাত্র তৃতীয় পক্ষের অনুরোধ দেখায়।

নীচের স্ট্যাটাস বারটি মোটের মধ্যে দেখানো অনুরোধের সংখ্যা প্রদর্শন করে।

বাছাই অনুরোধ

ডিফল্টরূপে, অনুরোধ টেবিলের অনুরোধগুলি শুরুর সময় অনুসারে সাজানো হয়, তবে আপনি অন্যান্য মানদণ্ড ব্যবহার করে টেবিলটি সাজাতে পারেন।

কলাম অনুসারে সাজান

সেই কলাম অনুসারে অনুরোধগুলি বাছাই করতে অনুরোধ টেবিলের যে কোনও কলামের হেডারে ক্লিক করুন।

কার্যকলাপ পর্যায়ে বাছাই

জলপ্রপাত কীভাবে অনুরোধগুলি সাজায় তা পরিবর্তন করতে, অনুরোধ টেবিলের শিরোনামটিতে ডান-ক্লিক করুন, জলপ্রপাতের উপর হোভার করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন:

  • সময় শুরু . প্রথম যে অনুরোধটি শুরু হয়েছিল তা শীর্ষে রয়েছে।
  • প্রতিক্রিয়া সময় । ডাউনলোড করা শুরু করা প্রথম অনুরোধটি শীর্ষে রয়েছে।
  • শেষ সময় . শেষ যে প্রথম অনুরোধ শীর্ষে আছে.
  • মোট সময়কাল . সংক্ষিপ্ততম সংযোগ সেটআপ এবং অনুরোধ / প্রতিক্রিয়া সহ অনুরোধটি শীর্ষে রয়েছে।
  • বিলম্ব একটি প্রতিক্রিয়ার জন্য সবচেয়ে কম সময় অপেক্ষা করা অনুরোধটি শীর্ষে রয়েছে।

এই বিবরণগুলি অনুমান করে যে প্রতিটি স্বতন্ত্র বিকল্পকে সংক্ষিপ্ত থেকে দীর্ঘতম পর্যন্ত স্থান দেওয়া হয়েছে। জলপ্রপাত কলামের হেডারে ক্লিক করলে ক্রম বিপরীত হয়।

এই উদাহরণে, জলপ্রপাতটি মোট সময়কাল অনুসারে সাজানো হয়েছে। প্রতিটি বারের হালকা অংশ অপেক্ষা করার সময় ব্যয় করে। গাঢ় অংশ হল বাইট ডাউনলোড করার সময় ব্যয় করা।

মোট সময়কাল দ্বারা জলপ্রপাত বাছাই.

অনুরোধগুলি বিশ্লেষণ করুন

যতক্ষণ পর্যন্ত DevTools খোলা থাকে, এটি নেটওয়ার্ক প্যানেলে সমস্ত অনুরোধ লগ করে। অনুরোধ বিশ্লেষণ করতে নেটওয়ার্ক প্যানেল ব্যবহার করুন.

অনুরোধের একটি লগ দেখুন

DevTools খোলা থাকাকালীন করা সমস্ত অনুরোধের একটি লগ দেখতে অনুরোধের টেবিলটি ব্যবহার করুন। অনুরোধের উপর ক্লিক করা বা হোভার করা তাদের সম্পর্কে আরও তথ্য প্রকাশ করে।

অনুরোধ টেবিল.

অনুরোধ টেবিলটি ডিফল্টরূপে নিম্নলিখিত কলামগুলি প্রদর্শন করে:

  • নাম রিসোর্সের ফাইলের নাম বা একটি শনাক্তকারী।

  • অবস্থা এই কলামটি নিম্নলিখিত মানগুলি দেখাতে পারে:

    স্ট্যাটাস কলামে বিভিন্ন মান।

    • HTTP স্থিতি কোড, উদাহরণস্বরূপ, 200 বা 404 ।
    • ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) এর কারণে অনুরোধের জন্য CORS error ব্যর্থ হয়েছে৷
    • (blocked:origin) ভুল কনফিগার করা হেডার সহ অনুরোধের জন্য। কি ভুল হয়েছে তার একটি ইঙ্গিত সহ একটি টুলটিপ দেখতে এই স্ট্যাটাস মানের উপর হোভার করুন।
    • (failed) এর পরে ত্রুটি বার্তা।

  • টাইপ অনুরোধ করা সম্পদের MIME প্রকার।

  • সূচনাকারী নিম্নলিখিত বস্তু বা প্রক্রিয়া অনুরোধ শুরু করতে পারে:

    • পার্সার Chrome এর HTML পার্সার।
    • পুনঃনির্দেশ । একটি HTTP পুনঃনির্দেশ।
    • লিপি . একটি জাভাস্ক্রিপ্ট ফাংশন।
    • অন্যান্য অন্য কিছু প্রক্রিয়া বা ক্রিয়া, যেমন একটি লিঙ্ক ব্যবহার করে একটি পৃষ্ঠায় নেভিগেট করা বা ঠিকানা বারে একটি URL প্রবেশ করানো৷

  • আকার প্রতিক্রিয়া শিরোনাম এবং প্রতিক্রিয়া বডির সম্মিলিত আকার, সার্ভার দ্বারা বিতরণ করা হয়।

  • সময় অনুরোধের শুরু থেকে উত্তরে চূড়ান্ত বাইট প্রাপ্তি পর্যন্ত মোট সময়কাল।

  • জলপ্রপাত । প্রতিটি অনুরোধের কার্যকলাপের একটি ভিজ্যুয়াল ব্রেকডাউন।

কলাম যোগ করুন বা সরান

অনুরোধ টেবিলের শিরোনামে ডান-ক্লিক করুন এবং এটি লুকাতে বা দেখানোর জন্য একটি বিকল্প নির্বাচন করুন। প্রদর্শিত বিকল্পগুলির পাশে চেক চিহ্ন রয়েছে।

অনুরোধ টেবিলে একটি কলাম যোগ করা হচ্ছে।

আপনি নিম্নলিখিত অতিরিক্ত কলামগুলি যোগ করতে বা সরাতে পারেন: পাথ , URL , পদ্ধতি , প্রোটোকল , স্কিম , ডোমেন , দূরবর্তী ঠিকানা , দূরবর্তী ঠিকানা স্থান , ইনিশিয়েটর ঠিকানা স্থান , কুকিজ , কুকিজ সেট করুন , অগ্রাধিকার , সংযোগ আইডি , এবং ওভাররাইড আছে ৷

কাস্টম কলাম যোগ করুন

অনুরোধ টেবিলে একটি কাস্টম কলাম যোগ করতে:

  1. অনুরোধ টেবিলের হেডারে ডান-ক্লিক করুন এবং প্রতিক্রিয়া শিরোনাম > হেডার কলাম পরিচালনা করুন নির্বাচন করুন।
  2. ডায়ালগ উইন্ডোতে, কাস্টম শিরোনাম যোগ করুন ক্লিক করুন, এর নাম লিখুন এবং যোগ করুন ক্লিক করুন।

অনুরোধ টেবিলে একটি কাস্টম কলাম যোগ করা হচ্ছে।

ইনলাইন ফ্রেম দ্বারা গ্রুপ অনুরোধ

যদি একটি পৃষ্ঠার ইনলাইন ফ্রেমগুলি প্রচুর অনুরোধ শুরু করে, আপনি তাদের গোষ্ঠীবদ্ধ করে অনুরোধটিকে লগ বন্ধুত্বপূর্ণ করতে পারেন।

iframes দ্বারা গ্রুপ অনুরোধ করতে, সেটিংস খুলুন সেটিংস. নেটওয়ার্ক প্যানেলের ভিতরে এবং চেক করুন চেকবক্স। ফ্রেম দ্বারা গ্রুপ .

iframes দ্বারা গোষ্ঠীবদ্ধ অনুরোধ সহ নেটওয়ার্ক অনুরোধ লগ.

একটি ইনলাইন ফ্রেম দ্বারা শুরু করা একটি অনুরোধ দেখতে, অনুরোধ লগে এটি প্রসারিত করুন৷

একে অপরের সাথে সম্পর্কিত অনুরোধের সময় দেখুন

একে অপরের সাথে অনুরোধের সময় দেখতে জলপ্রপাত ব্যবহার করুন। ডিফল্টরূপে, অনুরোধের শুরুর সময় অনুসারে জলপ্রপাতটি সংগঠিত হয়। সুতরাং, যে অনুরোধগুলি বাম থেকে আরও দূরে, সেগুলি ডানদিকে আরও দূরে থাকা অনুরোধগুলির চেয়ে আগে শুরু হয়েছিল৷

আপনি জলপ্রপাতকে যে বিভিন্ন উপায়ে সাজাতে পারেন তা দেখতে কার্যকলাপ পর্ব অনুসারে সাজান দেখুন।

অনুরোধ ফলকের জলপ্রপাত কলাম।

একটি WebSocket সংযোগের বার্তা বিশ্লেষণ করুন

একটি WebSocket সংযোগের বার্তা দেখতে:

  1. অনুরোধ টেবিলের নাম কলামের অধীনে, WebSocket সংযোগের URL-এ ক্লিক করুন।
  2. বার্তা ট্যাবে ক্লিক করুন। টেবিলটি শেষ 100টি বার্তা দেখায়।

টেবিল রিফ্রেশ করতে, অনুরোধ টেবিলের নাম কলামের অধীনে WebSocket সংযোগের নামে পুনরায় ক্লিক করুন।

বার্তা ট্যাব।

টেবিলে তিনটি কলাম রয়েছে:

  • তথ্য বার্তা পেলোড. যদি বার্তাটি প্লেইন টেক্সট হয়, তাহলে এটি এখানে প্রদর্শিত হবে। বাইনারি অপকোডের জন্য, এই কলামটি অপকোডের নাম এবং কোড প্রদর্শন করে। নিম্নলিখিত অপকোডগুলি সমর্থিত: কন্টিনিউয়েশন ফ্রেম, বাইনারি ফ্রেম, কানেকশন ক্লোজ ফ্রেম, পিং ফ্রেম এবং পং ফ্রেম।
  • দৈর্ঘ্য । বার্তা পেলোডের দৈর্ঘ্য, বাইটে।
  • সময় যখন বার্তাটি প্রাপ্ত বা পাঠানো হয়েছিল।

বার্তাগুলি তাদের প্রকার অনুসারে রঙ-কোড করা হয়:

  • বহির্গামী পাঠ্য বার্তাগুলি হালকা-সবুজ।
  • ইনকামিং টেক্সট বার্তা সাদা হয়.
  • WebSocket অপকোড হালকা-হলুদ।
  • ত্রুটিগুলি হালকা-লাল।

একটি প্রবাহে ঘটনা বিশ্লেষণ করুন

Fetch API , EventSource API , এবং XHR এর মাধ্যমে সার্ভার স্ট্রিম করা ইভেন্টগুলি দেখতে:

  1. ইভেন্টগুলি স্ট্রিম করে এমন একটি পৃষ্ঠায় নেটওয়ার্ক অনুরোধগুলি রেকর্ড করুন ৷ উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি খুলুন এবং তিনটি বোতামের যেকোনো একটিতে ক্লিক করুন।
  2. নেটওয়ার্কে , একটি অনুরোধ নির্বাচন করুন এবং ইভেন্টস্ট্রিম ট্যাবটি খুলুন।

ইভেন্টস্ট্রিম ট্যাব।

ইভেন্টগুলি ফিল্টার করতে, ইভেন্টস্ট্রিম ট্যাবের উপরে ফিল্টার বারে একটি নিয়মিত অভিব্যক্তি নির্দিষ্ট করুন।

ক্যাপচার করা ইভেন্টের তালিকা সাফ করতে, ব্লক সাফ ক্লিক করুন।

একটি প্রতিক্রিয়া শরীরের একটি পূর্বরূপ দেখুন

একটি প্রতিক্রিয়া শরীরের একটি পূর্বরূপ দেখতে:

  1. অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
  2. প্রিভিউ ট্যাবে ক্লিক করুন।

এই ট্যাবটি বেশিরভাগ ইমেজ দেখার জন্য উপযোগী।

পূর্বরূপ ট্যাব।

একটি প্রতিক্রিয়া বডি দেখুন

একটি অনুরোধের প্রতিক্রিয়া বডি দেখতে:

  1. অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
  2. প্রতিক্রিয়া ট্যাবে ক্লিক করুন।

প্রতিক্রিয়া ট্যাব।

HTTP শিরোনাম দেখুন

একটি অনুরোধের HTTP হেডার ডেটা দেখতে:

  1. অনুরোধ টেবিলে একটি অনুরোধ ক্লিক করুন.
  2. হেডার ট্যাবটি খুলুন এবং সাধারণ , প্রতিক্রিয়া শিরোনাম বা অনুরোধ শিরোনাম বিভাগে স্ক্রোল করুন।

অনুরোধের টেবিল থেকে নির্বাচিত একটি অনুরোধের শিরোনাম ট্যাব।

সাধারণ বিভাগে, DevTools আপনাকে প্রাপ্ত HTTP স্ট্যাটাস কোডের পাশে মানব-পাঠযোগ্য স্থিতি বার্তা দেখায়।

প্রতিক্রিয়া শিরোনাম বিভাগে, আপনি একটি শিরোনাম মান উপর হভার করতে পারেন এবং ক্লিক করুন সম্পাদনা করুন। স্থানীয়ভাবে প্রতিক্রিয়া শিরোনাম ওভাররাইড করতে সম্পাদনা বোতাম।

HTTP শিরোনাম উৎস দেখুন

ডিফল্টরূপে, হেডার ট্যাব বর্ণানুক্রমিকভাবে হেডারের নাম দেখায়। এইচটিটিপি হেডারের নামগুলি যে ক্রমে প্রাপ্ত হয়েছিল সেগুলি দেখতে:

  1. আপনি যে অনুরোধে আগ্রহী তার জন্য শিরোনাম ট্যাবটি খুলুন। HTTP শিরোনাম দেখুন।
  2. রিকোয়েস্ট হেডার বা রেসপন্স হেডার সেকশনের পাশে সোর্স ভিউ এ ক্লিক করুন।

অস্থায়ী শিরোনাম সতর্কতা

কখনও কখনও হেডার ট্যাব দেখায় যে Provisional headers are shown... সতর্কতা বার্তা। এটি নিম্নলিখিত কারণে হতে পারে:

  • অনুরোধটি নেটওয়ার্কের মাধ্যমে পাঠানো হয়নি তবে একটি স্থানীয় ক্যাশে থেকে পরিবেশিত হয়েছিল, যা মূল অনুরোধের শিরোনাম সংরক্ষণ করে না। এই ক্ষেত্রে, আপনি সম্পূর্ণ অনুরোধ শিরোনাম দেখতে ক্যাশিং অক্ষম করতে পারেন। অস্থায়ী শিরোনাম সতর্কবার্তা বার্তা.

  • নেটওয়ার্ক সংস্থানটি বৈধ নয়৷ উদাহরণস্বরূপ, কনসোলে fetch("https://jec.fish.com/unknown-url/") চালান। অস্থায়ী শিরোনাম সতর্কবার্তা বার্তা.

নিরাপত্তার কারণে DevTools শুধুমাত্র অস্থায়ী শিরোনাম প্রদর্শন করতে পারে।

অনুরোধ পেলোড দেখুন

অনুরোধের পেলোড দেখতে, অর্থাৎ, এর ক্যোয়ারী স্ট্রিং প্যারামিটার এবং ফর্ম ডেটা, অনুরোধ টেবিল থেকে একটি অনুরোধ নির্বাচন করুন এবং পেলোড ট্যাব খুলুন।

পেলোড ট্যাব।

পেলোড উৎস দেখুন

ডিফল্টরূপে, DevTools পেলোডকে মানব-পাঠযোগ্য আকারে দেখায়।

কোয়েরি স্ট্রিং প্যারামিটার এবং ফর্ম ডেটার উত্সগুলি দেখতে, পেলোড ট্যাবে, কোয়েরি স্ট্রিং প্যারামিটার বা ফর্ম ডেটা বিভাগের পাশের উৎস দেখুন ক্লিক করুন৷

ভিউ সোর্স বোতাম।

ক্যোয়ারী স্ট্রিং প্যারামিটারের URL-ডিকোড করা আর্গুমেন্ট দেখুন

আর্গুমেন্টের জন্য ইউআরএল-এনকোডিং টগল করতে, পেলোড ট্যাবে, ডিকোডেড দেখুন বা URL-এনকোডেড দেখুন ক্লিক করুন।

ইউআরএল-এনকোডিং টগল করুন।

কুকিজ দেখুন

অনুরোধের HTTP হেডারে পাঠানো কুকি দেখতে:

  1. অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
  2. কুকিজ ট্যাবে ক্লিক করুন।

কুকিজ ট্যাব।

প্রতিটি কলামের বর্ণনার জন্য, ক্ষেত্রগুলি দেখুন।

কুকি পরিবর্তন করতে, দেখুন , সম্পাদনা করুন এবং কুকি মুছুন দেখুন ।

একটি অনুরোধের টাইমিং ব্রেকডাউন দেখুন

একটি অনুরোধের টাইমিং ব্রেকডাউন দেখতে:

  1. অনুরোধ টেবিলের নাম কলামের অধীনে অনুরোধের URL-এ ক্লিক করুন।
  2. টাইমিং ট্যাবে ক্লিক করুন।

এই ডেটা অ্যাক্সেস করার একটি দ্রুত উপায়ের জন্য একটি টাইমিং ব্রেকডাউনের পূর্বরূপ দেখুন।

টাইমিং ট্যাব।

আপনি টাইমিং ট্যাবে দেখতে পারেন এমন প্রতিটি পর্যায় সম্পর্কে আরও তথ্যের জন্য টাইমিং ব্রেকডাউন পর্যায়গুলি ব্যাখ্যা করা দেখুন।

একটি টাইমিং ব্রেকডাউনের পূর্বরূপ দেখুন

একটি অনুরোধের টাইমিং ব্রেকডাউনের একটি পূর্বরূপ দেখতে, অনুরোধ টেবিলের জলপ্রপাত কলামে অনুরোধের এন্ট্রির উপর হোভার করুন৷

এই ডেটা অ্যাক্সেস করার একটি উপায়ের জন্য অনুরোধের টাইমিং ব্রেকডাউন দেখুন যার জন্য হোভারিংয়ের প্রয়োজন নেই৷

একটি অনুরোধের টাইমিং ব্রেকডাউনের পূর্বরূপ।

টাইমিং ব্রেকডাউন পর্যায়গুলি ব্যাখ্যা করা হয়েছে

টাইমিং ট্যাবে আপনি দেখতে পারেন এমন প্রতিটি ধাপ সম্পর্কে এখানে আরও তথ্য রয়েছে:

  • সারিবদ্ধ ব্রাউজার সংযোগ শুরু হওয়ার আগে এবং কখন অনুরোধগুলি সারিবদ্ধ করে:
    • উচ্চ অগ্রাধিকার অনুরোধ আছে.
    • এই উত্সের জন্য ইতিমধ্যে ছয়টি টিসিপি সংযোগ খোলা আছে, যা সীমা। শুধুমাত্র HTTP/1.0 এবং HTTP/1.1 এ প্রযোজ্য।
    • ব্রাউজারটি সংক্ষিপ্তভাবে ডিস্ক ক্যাশে স্থান বরাদ্দ করছে।
  • স্থবির । কিউয়িং -এ বর্ণিত যেকোনো কারণে সংযোগ শুরু হওয়ার পর অনুরোধটি স্থগিত হতে পারে।
  • DNS লুকআপ । ব্রাউজার অনুরোধের আইপি ঠিকানা সমাধান করছে।
  • প্রাথমিক সংযোগ । ব্রাউজার টিসিপি হ্যান্ডশেক বা পুনঃপ্রচার সহ একটি সংযোগ স্থাপন করছে এবং একটি SSL নিয়ে আলোচনা করছে।
  • প্রক্সি আলোচনা । ব্রাউজারটি একটি প্রক্সি সার্ভারের সাথে অনুরোধটি নিয়ে আলোচনা করছে৷
  • অনুরোধ পাঠানো হল . অনুরোধ পাঠানো হচ্ছে।
  • সার্ভিস ওয়ার্কার প্রস্তুতি । ব্রাউজারটি পরিষেবা কর্মী চালু করছে।
  • সার্ভিস ওয়ার্কারের কাছে অনুরোধ । সেবা কর্মীর কাছে অনুরোধ পাঠানো হচ্ছে।
  • অপেক্ষা (TTFB) । ব্রাউজারটি একটি প্রতিক্রিয়ার প্রথম বাইটের জন্য অপেক্ষা করছে। TTFB মানে টাইম টু ফার্স্ট বাইট। এই টাইমিংয়ে 1 রাউন্ড ট্রিপ অফ লেটেন্সি এবং সার্ভারের প্রতিক্রিয়া প্রস্তুত করতে সময় অন্তর্ভুক্ত রয়েছে।
  • কন্টেন্ট ডাউনলোড । ব্রাউজারটি সরাসরি নেটওয়ার্ক থেকে বা কোনও পরিষেবা কর্মী থেকে প্রতিক্রিয়া গ্রহণ করছে৷ এই মান হল রেসপন্স বডি পড়ার মোট সময়। প্রত্যাশিত মানগুলির চেয়ে বড় একটি ধীর নেটওয়ার্ক নির্দেশ করতে পারে, বা ব্রাউজারটি অন্যান্য কাজ সম্পাদনে ব্যস্ত যা প্রতিক্রিয়া পড়তে দেরি করে।

সূচনাকারী এবং নির্ভরতা দেখুন

একটি অনুরোধের সূচনাকারী এবং নির্ভরতা দেখতে, Shift ধরে রাখুন এবং অনুরোধের টেবিলে অনুরোধের উপরে হোভার করুন। DevTools এর রং ইনিশিয়েটর সবুজ, এবং নির্ভরতা লাল।

একটি অনুরোধের সূচনাকারী এবং নির্ভরতা দেখা।

যখন অনুরোধের সারণীটি কালানুক্রমিকভাবে অর্ডার করা হয়, তখন আপনি যে অনুরোধটি ঘোরাচ্ছেন তার উপরে প্রথম সবুজ অনুরোধটি নির্ভরতার সূচনাকারী। যদি এর উপরে আরেকটি সবুজ অনুরোধ থাকে, তাহলে সেই উচ্চতর অনুরোধটি হল সূচনাকারীর সূচনাকারী। ইত্যাদি।

লোড ইভেন্ট দেখুন

DevTools নেটওয়ার্ক প্যানেলে একাধিক জায়গায় DOMContentLoaded এবং load ইভেন্টের সময় প্রদর্শন করে। DOMContentLoaded ইভেন্টটি নীল রঙের, এবং load ইভেন্টটি লাল।

নেটওয়ার্ক প্যানেলে DOMContentLoaded এবং লোড ইভেন্টের অবস্থান।

অনুরোধের মোট সংখ্যা দেখুন

অনুরোধের মোট সংখ্যা নেটওয়ার্ক প্যানেলের নীচে সারাংশ প্যানে তালিকাভুক্ত করা হয়েছে।

DevTools খোলার পর থেকে মোট অনুরোধের সংখ্যা।

স্থানান্তরিত এবং লোড করা সম্পদের মোট আকার দেখুন

DevTools নেটওয়ার্ক প্যানেলের নীচে, সারাংশ প্যানেলে স্থানান্তরিত এবং লোড করা (অসংকুচিত) সম্পদের মোট আকারের তালিকা করে।

স্থানান্তরিত এবং লোড করা সম্পদের মোট আকার।

ব্রাউজারটি কম্প্রেস করার পরে সংস্থানগুলি কত বড় তা দেখতে একটি সংস্থানের অসংকুচিত আকার দেখুন।

একটি অনুরোধের কারণ স্ট্যাক ট্রেস দেখুন

যখন একটি JavaScript স্টেটমেন্টের কারণে একটি রিসোর্স অনুরোধ করা হয়, তখন অনুরোধের দিকে এগিয়ে যাওয়া স্ট্যাক ট্রেস দেখতে ইনিশিয়েটর কলামের উপর হোভার করুন।

স্ট্যাক ট্রেস একটি রিসোর্স অনুরোধ পর্যন্ত নেতৃস্থানীয়.

একটি সম্পদের অসংকুচিত আকার দেখুন

সেটিংস চেক করুন সেটিংস. > বড় অনুরোধ সারি এবং তারপর সাইজ কলামের নীচের মান দেখুন।

সংকুচিত সম্পদের একটি উদাহরণ।

এই উদাহরণে, নেটওয়ার্কের মাধ্যমে পাঠানো www.google.com নথির সংকুচিত আকার ছিল 43.8 KB , যেখানে অসঙ্কোচিত আকার ছিল 136 KB ৷

রপ্তানি অনুরোধ তথ্য

একটি HAR ফাইলে সমস্ত নেটওয়ার্ক অনুরোধ সংরক্ষণ করুন

HAR (HTTP আর্কাইভ) হল একটি ফাইল ফরম্যাট যা ক্যাপচার করা ডেটা রপ্তানি করতে বিভিন্ন HTTP সেশন টুল দ্বারা ব্যবহৃত হয়। বিন্যাস হল একটি JSON অবজেক্ট যার একটি নির্দিষ্ট ক্ষেত্র রয়েছে।

আপনি দুটি উপায়ে একটি HAR ফাইলে সমস্ত নেটওয়ার্ক অনুরোধ সংরক্ষণ করতে পারেন:

  • অনুরোধ টেবিলের যেকোনো অনুরোধে ডান-ক্লিক করুন এবং সামগ্রী সহ HAR হিসাবে সমস্ত সংরক্ষণ করুন নির্বাচন করুন। বিষয়বস্তু সহ HAR হিসাবে সংরক্ষণ করুন নির্বাচন করুন৷
  • ক্লিক রপ্তানি। নেটওয়ার্ক প্যানেলের শীর্ষে অ্যাকশন বারে HAR রপ্তানি করুন । শীর্ষে অ্যাকশন বারে এক্সপোর্ট HAR বোতাম।

একবার আপনার কাছে একটি HAR ফাইল হয়ে গেলে, আপনি দুটি উপায়ে বিশ্লেষণের জন্য এটিকে আবার DevTools-এ আমদানি করতে পারেন:

  • অনুরোধ টেবিলে HAR ফাইলটি টেনে আনুন।
  • ক্লিক আমদানি। নেটওয়ার্ক প্যানেলের শীর্ষে অ্যাকশন বারে HAR আমদানি করুন ।

ক্লিপবোর্ডে এক বা একাধিক অনুরোধ অনুলিপি করুন

অনুরোধ টেবিলের নাম কলামের অধীনে, একটি অনুরোধে ডান-ক্লিক করুন, অনুলিপিতে হোভার করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি নির্বাচন করুন:

  • URL কপি করুন । অনুরোধের URL টি ক্লিপবোর্ডে অনুলিপি করুন।
  • CURL হিসাবে অনুলিপি করুন । একটি cURL কমান্ড হিসাবে অনুরোধটি অনুলিপি করুন।
  • PowerShell হিসাবে অনুলিপি করুন । একটি পাওয়ারশেল কমান্ড হিসাবে অনুরোধটি অনুলিপি করুন।
  • আনয়ন হিসাবে অনুলিপি . একটি আনা কল হিসাবে অনুরোধ অনুলিপি.

  • Node.js fetch হিসাবে কপি করুন । Node.js ফেচ কল হিসাবে অনুরোধটি অনুলিপি করুন।

  • কপি প্রতিক্রিয়া . ক্লিপবোর্ডে প্রতিক্রিয়া বডি কপি করুন।

  • সমস্ত URL কপি করুন । ক্লিপবোর্ডে সমস্ত অনুরোধের URL কপি করুন।

  • CURL হিসাবে সব কপি করুন । CURL কমান্ডের একটি চেইন হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।

  • PowerShell হিসাবে সব কপি করুন । PowerShell কমান্ডের একটি চেইন হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।

  • আনা হিসাবে সব কপি করুন . ফেচ কলের একটি চেইন হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।

  • Node.js fetch হিসাবে সব কপি করুন । Node.js ফেচ কলের চেইন হিসাবে সমস্ত অনুরোধ কপি করুন।

  • HAR হিসাবে সব কপি করুন । HAR ডেটা হিসাবে সমস্ত অনুরোধ অনুলিপি করুন।

অনুলিপি বিকল্প নির্বাচন করুন.

নেটওয়ার্ক প্যানেলের লেআউট পরিবর্তন করুন

নেটওয়ার্ক প্যানেল UI এর বিভাগগুলিকে প্রসারিত বা সঙ্কুচিত করুন যা আপনার জন্য গুরুত্বপূর্ণ তার উপর ফোকাস করুন৷

ফিল্টার ফলকটি লুকান

ডিফল্টরূপে, DevTools ফিল্টার ফলক দেখায়। ফিল্টার ক্লিক করুন ছাঁকনি. এটা লুকানোর জন্য

ফিল্টার লুকান বোতাম।

বড় অনুরোধ সারি ব্যবহার করুন

আপনি যখন আপনার নেটওয়ার্ক অনুরোধ টেবিলে আরও সাদা স্থান চান তখন বড় সারি ব্যবহার করুন। কিছু কলাম বড় সারি ব্যবহার করার সময় একটু বেশি তথ্য প্রদান করে। উদাহরণস্বরূপ, সাইজ কলামের নীচের মান হল একটি অনুরোধের অসংকোচিত আকার এবং অগ্রাধিকার কলামটি প্রাথমিক (নীচের মান) এবং চূড়ান্ত (শীর্ষ মান) নিয়ে আসা অগ্রাধিকার উভয়ই দেখায়।

ওপেন সেটিংস সেটিংস. এবং বড় সারি দেখতে বড় অনুরোধ সারি ক্লিক করুন.

বড় অনুরোধ সারি চালু.

ওভারভিউ ট্র্যাক লুকান

ডিফল্টরূপে, DevTools ওভারভিউ ট্র্যাক দেখায়। ওপেন সেটিংস সেটিংস. এবং এটি লুকানোর জন্য ওভারভিউ দেখান চেকবক্সটি সাফ করুন।

শো ওভারভিউ চেকবক্স।