পারফর্ম্যান্স ফিচার রেফারেন্স

এই পৃষ্ঠায় পারফর্ম্যান্স বিশ্লেষণ করার সাথে সম্পর্কিত Chrome DevTools ফিচারের বিস্তারিত রেফারেন্স দেওয়া আছে।

Chrome DevTools ব্যবহার করে কীভাবে কোনও পৃষ্ঠার পারফর্ম্যান্স বিশ্লেষণ করতে হয় সেই সম্পর্কে নির্দেশিত টিউটোরিয়ালের জন্য রানটাইম পারফর্ম্যান্স বিশ্লেষণ করুন দেখুন।

লাইভ মেট্রিক স্ক্রিন

আপনি প্রথমবার পারফর্ম্যান্স প্যানেল খুললে, আপনাকে লাইভ মেট্রিক্স স্ক্রিন দেখানো হবে যা তিনটি Core Web Vitals ব্যবহার করে বর্তমান পৃষ্ঠার পারফর্ম্যান্সের একটি তাৎক্ষণিক সারসংক্ষেপ প্রদান করে।

আপনি পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করলে এবং নতুন পৃষ্ঠায় নেভিগেট করলে মেট্রিক আপডেট হয়, এর মধ্যে সিঙ্গেল-পেজ অ্যাপ্লিকেশনে ক্লায়েন্ট-সাইড সফট নেভিগেশনও অন্তর্ভুক্ত, যা সফট নেভিগেশন ব্যাজের মাধ্যমে দেখানো হয়। পারফর্ম্যান্স সংক্রান্ত সমস্যা শনাক্ত করার এটি একটি ভাল উপায়—বিশেষ করে INP ও CLS-এর ক্ষেত্রে, যদি সেগুলি শুধুমাত্র নির্দিষ্ট পরিস্থিতিতে দেখা যায়। পারফর্ম্যান্স সংক্রান্ত সমস্যা বারবার দেখা দিলে, আপনি ট্রেস রেকর্ড করতে পারবেন যাতে অন্তর্নিহিত সমস্যা ডিবাগ করার জন্য আরও বিবরণ পাওয়া যায়।

লাইভ মেট্রিক্স স্ক্রিনের ফিচার

লাইভ মেট্রিক স্ক্রিনে মেট্রিক ছাড়াও নিম্নলিখিত ফিচারগুলি রয়েছে:

• ফিল্ড মেট্রিক প্যানেলে চালু করা থাকলে CrUX থেকে ফিল্ড মেট্রিক।
• স্থানীয় ও ফিল্ড মেট্রিকের মধ্যে উল্লেখযোগ্য পার্থক্যের সারসংক্ষেপ।
• LCP এলিমেন্ট, যেটিতে মাউস নিয়ে গেলে পৃষ্ঠায় এটি হাইলাইট করা যায়।
• CLS ক্লাস্টার ও INP ধরনের বিবরণ
• মেট্রিকের উপর মাউস নিয়ে গেলে আরও বিবরণ (যেমন LCP ও INP সাবপার্ট এবং ফিল্ড হিস্টোগ্রাম)
• ইন্ট্যার‍্যাকশন এবং লেআউট শিফট প্যানেল, ইতিহাস বা ইন্ট্যার‍্যাকশন এবং লেআউট শিফট রেকর্ড করছে।
• একটি ফিল্ড মেট্রিক্স প্যানেল যেখানে CrUX ডেটা চালু করা যেতে পারে, সেই ডেটার সময়কালের বিবরণ, অরিজিন এবং URL ডেটার মধ্যে (যেখানে উপলভ্য) এবং ডেস্কটপ ও মোবাইল ডেটার মধ্যে পরিবর্তন করার ক্ষমতা।
• CrUX ডেটার উপর ভিত্তি করে কোন ডিভাইস, CPU এবং নেটওয়ার্ক থ্রটলিং ব্যবহার করতে হবে সেই সংক্রান্ত নির্দেশিকা সহ একটি এনভায়রনমেন্ট সেটিংস প্যানেল।

আরও বিবরণের জন্য DevTools-এ আপনার লোকাল ও আসল ব্যবহারকারীর Core Web Vitals পারফর্ম্যান্স মনিটর করুন ব্লগ পোস্ট দেখুন।

পারফর্ম্যান্স রেকর্ড করুন

আপনি স্ক্রিনের উপরের বাঁদিকে বা ডানদিকে থাকা বোতাম ব্যবহার করে রানটাইম বা লোড পারফর্ম্যান্স রেকর্ড করতে পারবেন:

রানটাইম পারফর্ম্যান্স রেকর্ড করুন

কোনও পৃষ্ঠা লোড হওয়ার পরিবর্তে সেটি রান করার সময় পারফর্ম্যান্স বিশ্লেষণ করতে চাইলে, রানটাইম পারফর্ম্যান্স রেকর্ড করুন।

1. আপনি যে পৃষ্ঠা বিশ্লেষণ করতে চান সেখানে যান।
2. DevTools-এ পারফর্ম্যান্স ট্যাবে ক্লিক করুন।
3. রেকর্ড করুন বিকল্পে ক্লিক করুন।
4. পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করুন। আপনার ইন্টার‍্যাকশনের ফলে হওয়া সব পৃষ্ঠা অ্যাক্টিভিটি DevTools রেকর্ড করে।
5. রেকর্ডিং বন্ধ করতে, আবার রেকর্ড করুন বিকল্পে ক্লিক করুন অথবা বন্ধ করুন বিকল্পে ক্লিক করুন।

রেকর্ড লোড পারফর্ম্যান্স

কোনও পৃষ্ঠা লোড হওয়ার সময় তার পারফর্ম্যান্স বিশ্লেষণ করতে চাইলে, রান করার সময় নয়, লোড পারফর্ম্যান্স রেকর্ড করুন।

1. আপনি যে পৃষ্ঠা বিশ্লেষণ করতে চান সেখানে যান।
2. DevTools-এর পারফর্ম্যান্স প্যানেল খুলুন।
3. রেকর্ড ও আবার লোড করুন বিকল্পে ক্লিক করুন। DevTools প্রথমে about:blank-এ নেভিগেট করে যাতে বাকি থাকা স্ক্রিনশট ও ট্রেস মুছে ফেলা যায়। তারপরে, DevTools পেজ রিলোড হওয়ার সময় পারফর্ম্যান্স মেট্রিক রেকর্ড করে এবং লোড হওয়ার কয়েক সেকেন্ড পরে রেকর্ডিং অটোমেটিক বন্ধ করে দেয়।

DevTools রেকর্ডিংয়ের সেই অংশটি অটোমেটিক জুম ইন করে যেখানে বেশিরভাগ অ্যাক্টিভিটি ঘটেছে।

এই উদাহরণে, পারফর্ম্যান্স প্যানেলটি পৃষ্ঠা লোড করার সময় অ্যাক্টিভিটি দেখায়।

রেকর্ডিংয়ের সময় স্ক্রিনশট ক্যাপচার করুন

রেকর্ডিংয়ের সময় প্রতিটি ফ্রেমের স্ক্রিনশট ক্যাপচার করতে স্ক্রিনশট চেকবক্স চালু করুন।

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

স্ক্রিনশটের সাথে কীভাবে ইন্টার‍্যাক্ট করতে হয় তা জানতে স্ক্রিনশট দেখুন বিকল্পে যান।

রেকর্ডিংয়ের সময় গার্বেজ সংগ্রহ করতে বাধ্য করে

আপনি কোনও পৃষ্ঠা রেকর্ড করার সময়, জোর করে গার্বেজ সংগ্রহ করতে গার্বেজ সংগ্রহ করুন mop বিকল্পে ক্লিক করুন।

রেকর্ডিং সেটিংস দেখুন

DevTools কীভাবে পারফর্ম্যান্স রেকর্ডিং ক্যাপচার করে সেই সম্পর্কিত আরও সেটিংস দেখতে ক্যাপচার সেটিংস বিকল্পে ক্লিক করুন।

জাভাস্ক্রিপ্ট স্যাম্পেল বন্ধ করুন

সাধারণত, রেকর্ডিংয়ের মূল ট্র্যাক, রেকর্ডিং চলাকালীন কল করা জাভাস্ক্রিপ্ট ফাংশনের বিস্তারিত কল স্ট্যাক দেখায়। এইসব কল স্ট্যাক বন্ধ করতে:

1. ক্যাপচার সেটিংস মেনু খুলুন। রেকর্ডিং সেটিংস দেখুন বিকল্প দেখুন।
2. জাভাস্ক্রিপ্ট স্যাম্পেল বন্ধ করুন চেকবক্স চালু করুন।
3. পৃষ্ঠার একটি রেকর্ডিং নিন।

নিচের স্ক্রিনশট থেকে জাভাস্ক্রিপ্ট স্যাম্পেল বন্ধ ও চালু করার মধ্যে পার্থক্য বুঝতে পারবেন। স্যাম্পেলিং বন্ধ করা থাকলে রেকর্ডিংয়ের মূল ট্র্যাক অনেক ছোট হয়, কারণ এটি সব জাভাস্ক্রিপ্ট কল স্ট্যাক বাদ দেয়।

এই উদাহরণে বন্ধ করা JS স্যাম্পেল সহ রেকর্ডিং দেখানো হয়েছে।

এই উদাহরণে JS স্যাম্পেল চালু করা আছে এমন একটি রেকর্ডিং দেখানো হয়েছে।

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

রেকর্ডিং করার সময় নেটওয়ার্ক থ্রটল করতে:

1. ক্যাপচার সেটিংস মেনু খুলুন। রেকর্ডিং সেটিংস দেখুন বিকল্প দেখুন।
2. থ্রটলিংয়ের বেছে নেওয়া লেভেলে নেটওয়ার্ক সেট করুন।

ড্রপ-ডাউন মেনুতে, পারফর্ম্যান্স প্যানেল ডিফল্ট থ্রটলিং প্রিসেট বা এমন প্রিসেট সাজেস্ট করতে পারে যা ফিল্ড ডেটা-এর উপর ভিত্তি করে আপনার ব্যবহারকারীদের অভিজ্ঞতার কাছাকাছি হয়।

রেকর্ডিংয়ের সময় সিপিইউ থ্রটল করুন

রেকর্ডিংয়ের সময় সিপিইউ থ্রটল করতে:

1. ক্যাপচার সেটিংস মেনু খুলুন। রেকর্ডিং সেটিংস দেখুন বিকল্প দেখুন।
2. CPU-কে থ্রটলিংয়ের বেছে নেওয়া লেভেলে সেট করুন।

থ্রটলিং আপনার কম্পিউটারের ক্ষমতার সাথে সম্পর্কিত। যেমন, ২x স্লোডাউন বিকল্প আপনার সিপিইউকে তার স্বাভাবিক ক্ষমতার চেয়ে ২ গুণ ধীরে কাজ করায়। DevTools মোবাইল ডিভাইসের সিপিইউকে সত্যিই সিমুলেট করতে পারে না, কারণ মোবাইল ডিভাইসের আর্কিটেকচার ডেস্কটপ এবং ল্যাপটপের থেকে খুবই আলাদা।

ড্রপ-ডাউন মেনুতে, পারফর্ম্যান্স প্যানেল ডিফল্ট থ্রটলিং প্রিসেট বা এমন একটি প্রিসেট সাজেস্ট করতে পারে যা ফিল্ড ডেটা-এর উপর ভিত্তি করে আপনার ব্যবহারকারীদের অভিজ্ঞতার কাছাকাছি হয়।

CSS সিলেক্টর পরিসংখ্যান চালু করুন

দীর্ঘ সময় ধরে চলা স্টাইল আবার গণনা করুন ইভেন্টের সময় আপনার CSS রুল সিলেক্টরের পরিসংখ্যান দেখতে:

1. ক্যাপচার সেটিংস মেনু খুলুন। রেকর্ডিং সেটিংস দেখুন বিকল্পে যান।
2. CSS বাছাইকারী পরিসংখ্যান চালু করুন চেকবক্সটি চেক করুন।

আরও বিবরণের জন্য, কীভাবে স্টাইল ইভেন্ট রিক্যালকুলেট করার সময় CSS সিলেক্টর পারফর্ম্যান্স বিশ্লেষণ করবেন তা দেখুন।

উন্নত পেইন্ট ইন্সট্রুমেন্টেশন চালু করুন

বিস্তারিত পেইন্ট ইন্সট্রুমেন্টেশন দেখতে:

1. ক্যাপচার সেটিংস মেনু খুলুন। রেকর্ডিং সেটিংস দেখুন বিকল্পে যান।
2. উন্নত পেইন্ট ইন্সট্রুমেন্টেশন চালু করুন চেকবক্সে টিকচিহ্ন দিন।

পেন্ট সংক্রান্ত তথ্যের সাথে কীভাবে ইন্টার‍্যাক্ট করতে হয় তা জানতে, লেয়ার দেখুন এবং পেন্ট প্রোফাইলার দেখুন বিকল্পে যান।

কাস্টম ট্র্যাক দেখুন

ট্রেস সামারিতে কাস্টম ট্র্যাক ও কাস্টম ট্র্যাক গ্রুপ সামারি চালু করে, যা DevTools Extensibility API ব্যবহার করে কাস্টমাইজ করা যায়।

আগের রেকর্ডিং মুছে দিন

রেকর্ডিং করার পরে, পারফর্ম্যান্স প্যানেল থেকে সেই রেকর্ডিং সরাতে, রেকর্ডিং সরান বিকল্পে প্রেস করুন।

পারফর্ম্যান্স রেকর্ডিং বিশ্লেষণ করা

আপনি রানটাইম পারফর্ম্যান্স রেকর্ড বা লোড পারফর্ম্যান্স রেকর্ড করার পরে, পারফর্ম্যান্স প্যানেল, যা ঘটেছে তার পারফর্ম্যান্স বিশ্লেষণ করার জন্য প্রচুর ডেটা প্রদান করে।

রেকর্ডিং অ্যানোটেট করে শেয়ার করা

আপনার পারফর্ম্যান্স সংক্রান্ত ফলাফল অ্যানোটেট ও শেয়ার করুন দেখুন।

অ্যাকশন নেওয়া যায় এমন ইনসাইট পান

পারফর্ম্যান্স প্যানেলে পারফর্ম্যান্স ইনসাইট অন্তর্ভুক্ত থাকে যা Lighthouse রিপোর্টেও দেখানো হয়। এইসব ইনসাইট পারফর্ম্যান্স উন্নত করার উপায় সাজেস্ট করতে পারে এবং LCP ও INP সাবপার্ট, LCP অনুরোধ সংক্রান্ত সমস্যা, থার্ড-পার্টি, লিগ্যাসি ও ডুপ্লিকেট JavaScript রিসোর্সের মতো পারফর্ম্যান্স সংক্রান্ত সমস্যার ব্যাপারে নির্দেশিত বিশ্লেষণ প্রদান করতে পারে। সম্পূর্ণ তালিকা দেখতে পারফর্ম্যান্স ইনসাইট ডকুমেন্টেশন দেখুন।

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

ইনসাইট ব্যবহার করতে:

1. পারফর্ম্যান্স রেকর্ডিং করা।
2. পারফর্ম্যান্স প্যানেলের বাঁদিকের সাইডবারে, ইনসাইট ট্যাব খুলুন, বিভিন্ন বিভাগ বড় করুন এবং আইটেমের উপর মাউস নিয়ে গিয়ে ক্লিক করুন। পারফর্ম্যান্স প্যানেল ট্রেসে সংশ্লিষ্ট ইভেন্ট হাইলাইট করবে।

রেকর্ডিং নেভিগেট করা

আপনাকে নেভিগেট করতে সাহায্য করার জন্য, আপনি পারফর্ম্যান্স ট্রেসের উপর মাউস নিয়ে গেলে, পারফর্ম্যান্স প্যানেল নিম্নলিখিত কাজগুলি করে:

• আপনি টাইমলাইন ওভারভিউ-এর উপর মাউস নিয়ে গেলে, একটি উল্লম্ব মার্কার দেখতে পাবেন যা সম্পূর্ণ পারফর্ম্যান্স ট্রেস জুড়ে থাকে।
• প্রধান ট্র্যাকের আইটেমের উপর মাউস নিয়ে গেলে টাইমলাইন ওভারভিউতে একটি রেঞ্জ হাইলাইট করে।

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

নেভিগেট করার জন্য কীবোর্ড শর্টকাট ব্যবহার করুন

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

প্যানেলের উপরে ডানদিকের কোণে, সহায়তা শর্টকাট দেখুন বিকল্পে ক্লিক করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন:

• ক্লাসিক: মাউস হুইল (টাচপ্যাড উপরে বা নিচে) দিয়ে জুম করুন এবং Shift + মাউস হুইল দিয়ে ভার্টিক্যাল স্ক্রল করুন।
• আধুনিক: মাউস হুইল দিয়ে উল্লম্বভাবে স্ক্রল করুন, Shift + মাউস হুইল দিয়ে অনুভূমিকভাবে স্ক্রল করুন এবং Command/Control + মাউস হুইল দিয়ে জুম করুন।

এছাড়াও, শর্টকাট ডায়লগ আপনাকে উপলভ্য শর্টকাটের একটি চিটশিট প্রদান করে।

রেকর্ডিংয়ের একটি অংশ বেছে নিন

পারফর্ম্যান্স প্যানেলের অ্যাকশন বারের নিচে এবং রেকর্ডিংয়ের উপরে, আপনি CPU এবং NET চার্ট সহ টাইমলাইন ওভারভিউ বিভাগ দেখতে পাবেন।

রেকর্ডিংয়ের কোনও অংশ বেছে নিতে, ক্লিক করে ধরে রাখুন, তারপর টাইমলাইন ওভারভিউ জুড়ে বাঁদিকে বা ডানদিকে টেনে আনুন।

কীবোর্ড ব্যবহার করে কোনও অংশ বেছে নিতে:

1. প্রধান ট্র্যাক বা এর কোনও প্রতিবেশী ট্র্যাকের উপর ফোকাস করুন।
2. জুম ইন, বাঁদিকে সরানো, জুম আউট ও ডানদিকে সরানোর জন্য যথাক্রমে W, A, S, D কী ব্যবহার করুন।

ট্র্যাকপ্যাড ব্যবহার করে কোনও অংশ বেছে নিতে:

1. টাইমলাইন ওভারভিউ বিভাগ বা যেকোনও ট্র্যাকের (মূল ও এর প্রতিবেশী) উপরে মাউস নিয়ে যান।
2. দুটি আঙুল ব্যবহার করে, জুম আউট করতে উপরের দিকে সোয়াইপ করুন, বাঁদিকে সরানোর জন্য বাঁদিকে সোয়াইপ করুন, জুম ইন করতে নিচের দিকে সোয়াইপ করুন এবং ডানদিকে সরানোর জন্য ডানদিকে সোয়াইপ করুন।

ব্রেডক্রাম্ব তৈরি করা এবং জুম লেভেলের মধ্যে জাম্প করা

টাইমলাইন ওভারভিউ আপনাকে পরপর একাধিক নেস্টেড ব্রেডক্রাম তৈরি করতে, জুম লেভেল বাড়াতে এবং তারপরে জুম লেভেলের মধ্যে অবাধে জাম্প করতে দেয়।

ব্রেডক্রাম্ব তৈরি ও ব্যবহার করতে:

1. টাইমলাইন ওভারভিউ থেকে, রেকর্ডিংয়ের একটি অংশ বেছে নিন।
2. বেছে নেওয়া অংশের উপরে মাউস নিয়ে গিয়ে N ms zoom_in বোতামে ক্লিক করুন। টাইমলাইন ওভারভিউ পূরণ করার জন্য বেছে নেওয়া অংশটি বড় করা হয়। টাইমলাইন ওভারভিউ-এর উপরে ব্রেডক্রাম্বের একটি চেইন তৈরি হতে শুরু করে।
3. আরেকটি নেস্টেড ব্রেডক্রাম্ব তৈরি করতে আগের দুটি ধাপ আবার করুন। বেছে নেওয়ার রেঞ্জ ৫ মিলিসেকেন্ডের বেশি হলে আপনি ব্রেডক্রাম্ব নেস্ট করা চালিয়ে যেতে পারবেন।
4. বেছে নেওয়া জুম লেভেলে যেতে, টাইমলাইন ওভারভিউ-এর উপরে চেনে সংশ্লিষ্ট ব্রেডক্রাম্বে ক্লিক করুন।

কোনও ব্রেডক্রাম্বের চাইল্ড সরাতে, পেরেন্ট ব্রেডক্রাম্বের উপর ডানদিকের মাউস বোতামে ক্লিক করুন এবং চাইল্ড ব্রেডক্রাম্ব সরান বিকল্প বেছে নিন।

দীর্ঘ ফ্লেম চার্ট স্ক্রল করা

প্রধান ট্র্যাক বা এর কোনও প্রতিবেশী ট্র্যাকের মধ্যে একটি দীর্ঘ ফ্লেম চার্ট স্ক্রল করতে, ক্লিক করে ধরে রাখুন, তারপরে আপনি যা খুঁজছেন তা দৃশ্যমান না হওয়া পর্যন্ত যেকোনও দিকে ড্র্যাগ করুন।

ফ্লেম চার্টে অপ্রাসঙ্গিক স্ক্রিপ্ট এড়িয়ে যান

আপনার কোডে আরও ভালোভাবে ফোকাস করতে, আপনি ইগনোর লিস্টে অপ্রাসঙ্গিক স্ক্রিপ্ট যোগ করতে পারেন।

স্ক্রিপ্ট উপেক্ষা করতে, নিম্নলিখিতগুলির মধ্যে একটি করুন:

• সবচেয়ে উপরে অ্যাকশন বারে কমপ্রেস করুন ইগনোর লিস্ট সেটিংস ডায়ালগ দেখুন বিকল্পে ক্লিক করুন এবং ইনপুট ফিল্ডে রেগুলার এক্সপ্রেশন টাইপ করুন। আপনি টাইপ করার সাথে সাথে ফ্লেম চার্ট নতুন নিয়ম প্রয়োগ করবে।
• স্ক্রিপ্টে ডানদিকের বোতামে ক্লিক করে ইগনোর লিস্টে স্ক্রিপ্ট যোগ করুন বিকল্প বেছে নিন। পারফর্ম্যান্স প্যানেল এই স্ক্রিপ্টকে compress ইগনোর লিস্ট সংক্রান্ত সেটিং ডায়ালগ দেখুন-এর তালিকায় যোগ করে।

প্যানেলটি এই ধরনের স্ক্রিপ্টের জন্য অতিরিক্ত নেস্টিং অটোমেটিক আড়াল করবে এবং সেগুলিকে On ignore list (REGULAR_EXPRESSION) হিসেবে চিহ্নিত করবে।

compress ইগনোর লিস্ট সংক্রান্ত সেটিং ডায়ালগ দেখুন বিকল্পে, আপনি ইগনোর লিস্ট সংক্রান্ত নিয়ম চালু ও বন্ধ করতে পারবেন।

ইগনোর লিস্ট থেকে কোনও স্ক্রিপ্ট সরাতে, ফ্লেম চার্টে সেটির উপরে মাউসের ডানদিকের বোতামে ক্লিক করে ইগনোর লিস্ট থেকে স্ক্রিপ্ট সরান বিকল্প বেছে নিন অথবা কমপ্রেস করুন ইগনোর লিস্ট সেটিংস ডায়ালগ দেখুন বিকল্পের উপরে মাউস নিয়ে গিয়ে মুছে দিন সরিয়ে দিন বিকল্পে ক্লিক করুন।

DevTools, সেটিংস সেটিংস > এড়িয়ে যাওয়ার তালিকা বিকল্পে আপনার যোগ করা এড়িয়ে যাওয়ার তালিকা সংক্রান্ত নিয়ম সেভ করে।

এছাড়াও, শুধুমাত্র ফার্স্ট-পার্টি স্ক্রিপ্টে ফোকাস করতে, check_box থার্ড-পার্টি ডিম করুন বিকল্পে টিকচিহ্ন দিন। পারফর্ম্যান্স প্যানেল থার্ড-পার্টি স্ক্রিপ্ট ধূসর করে দেবে।

অ্যাক্টিভিটি সার্চ করুন

আপনি প্রধান ট্র্যাকের অ্যাক্টিভিটি ও নেটওয়ার্ক ট্র্যাকের অনুরোধ সার্চ করতে পারবেন।

পারফর্ম্যান্স প্যানেলের নিচে সার্চ বক্স খুলতে, প্রেস করুন:

• macOS: Command+F
• Windows, Linux: Control+F

এই উদাহরণে নিচে সার্চ বক্সে একটি রেগুলার এক্সপ্রেশন দেখানো হয়েছে যা E দিয়ে শুরু হওয়া যেকোনও অ্যাক্টিভিটি খুঁজে বের করে।

আপনার কোয়েরির সাথে মেলে এমন অ্যাক্টিভিটি ঘুরে দেখতে:

• expand_less আগের বা expand_more পরবর্তী বোতামে ক্লিক করুন।
• আগেরটি বেছে নিতে Shift+Enter প্রেস করুন অথবা পরেরটি বেছে নিতে Enter প্রেস করুন।

পারফর্ম্যান্স প্যানেল, সার্চ বক্সে বেছে নেওয়া অ্যাক্টিভিটির উপরে একটি টুলটিপ দেখায়।

কোয়েরি সেটিংস পরিবর্তন করতে:

• কোয়েরিকে কেস-সেনসিটিভ করতে match_case কেস ম্যাচ করুন বিকল্পে ক্লিক করুন।
• আপনার কোয়েরিতে রেগুলার এক্সপ্রেশন ব্যবহার করতে regular_expression রেগুলার এক্সপ্রেশন বিকল্পে ক্লিক করুন।

সার্চ বক্স লুকাতে, বাতিল করুন বিকল্পে ক্লিক করুন।

ট্র্যাকের ক্রম পরিবর্তন করুন ও সেগুলি লুকান

পারফর্ম্যান্স ট্রেসকে আরও পরিষ্কার করতে, আপনি ট্র্যাকের ক্রম পরিবর্তন করতে এবং ট্র্যাক কনফিগারেশন মোডে অপ্রাসঙ্গিক ট্র্যাকগুলি লুকাতে পারেন।

ট্র্যাক সরাতে ও লুকাতে:

1. কনফিগারেশন মোডে প্রবেশ করতে, ট্র্যাকের নামে ডানদিকের বোতামে ক্লিক করুন এবং ট্র্যাক কনফিগার করুন বিকল্প বেছে নিন।
2. কোনও ট্র্যাক উপরে বা নিচে সরাতে arrow_upward উপরে বা arrow_downward নিচে ক্লিক করুন। এটি লুকাতে visibility_off আইকনে ক্লিক করুন।
3. হয়ে গেলে, কনফিগারেশন মোড থেকে বেরিয়ে আসতে, নিচে ট্র্যাক কনফিগার করা সম্পূর্ণ করুন বিকল্পে ক্লিক করুন।

এই ওয়ার্কফ্লো কীভাবে কাজ করে তা ভিডিওতে দেখুন।

পারফর্ম্যান্স প্যানেল নতুন ট্রেসের জন্য ট্র্যাক কনফিগারেশন সেভ করে, তবে পরবর্তী DevTools সেশনে নয়।

মূল থ্রেড অ্যাক্টিভিটি দেখুন

পেজের মূল থ্রেডে হওয়া অ্যাক্টিভিটি দেখতে মূল ট্র্যাক ব্যবহার করুন।

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

পারফর্ম্যান্স প্যানেল, বেছে নেওয়া ইভেন্টকে নীল রঙে আউটলাইন করে।

এই উদাহরণে সারাংশ ট্যাবে get ফাংশন কল ইভেন্ট সম্পর্কে আরও তথ্য দেখানো হয়েছে।

ফার্স্ট-পার্টি ও থার্ড-পার্টি ইভেন্টের মধ্যে পার্থক্য করা

থার্ড-পার্টি কোডের উপর অতিরিক্ত নির্ভরতা লোড পারফর্ম্যান্সের উপর নেতিবাচক প্রভাব ফেলতে পারে। পারফর্ম্যান্স প্যানেল আপনাকে ট্রেসে ফার্স্ট-পার্টি ও থার্ড-পার্টি ইভেন্টের মধ্যে ভিজ্যুয়াল পার্থক্য করতে সাহায্য করতে পারে, যাতে আপনি নিজের পৃষ্ঠার কন্টেন্টকে অগ্রাধিকার দিতে থার্ড-পার্টি কোড লোড হওয়া কমানো বা স্লো করার ব্যাপারে আরও তথ্যপূর্ণ সিদ্ধান্ত নিতে পারেন।

শুধুমাত্র ফার্স্ট-পার্টি কোডের পারফর্ম্যান্সের উপর ফোকাস করতে:

1. পারফর্ম্যান্স ট্রেস বা ইনসাইট ট্যাবে কিছু বেছে নেওয়া হয়নি তা নিশ্চিত করুন। এটি করতে, ট্রেসের কোনও খালি জায়গায় ক্লিক করুন।
2. উপরে অ্যাকশন বারে check_box থার্ড-পার্টি আবছা করুন বিকল্পে টিকচিহ্ন দিন। পারফর্ম্যান্স প্যানেল পারফর্ম্যান্স ট্রেস থেকে থার্ড-পার্টি সম্পর্কিত ইভেন্টগুলিকে ধূসর করে দেয় এবং শুধুমাত্র ফার্স্ট-পার্টি হাইলাইট করে।

'ফার্স্ট / থার্ড-পার্টি' টেবিলের মাধ্যমে ইভেন্ট হাইলাইট করুন

বেছে নেওয়া রেঞ্জের মধ্যে টাইমলাইন ওভারভিউ এবং কোনও ইভেন্ট বেছে নেওয়া না থাকলে, সারসংক্ষেপ ট্যাবে ১ম / ৩য় পার্টি টেবিল দেখানো হয়, যেখানে নিম্নলিখিত বিষয়গুলির সংশ্লিষ্ট ট্রান্সফার সাইজ ও মূল থ্রেড টাইম তালিকাভুক্ত করা থাকে:

• ফার্স্ট-পার্টি এন্টিটি 1st party ব্যাজ দিয়ে চিহ্নিত করা হয়।
• বেছে নেওয়া রেঞ্জে শনাক্ত করা সব থার্ড-পার্টি এন্টিটি, আনমার্ক করা হয়েছে।
• Extension ব্যাজ দিয়ে চিহ্নিত করা এক্সটেনশন।
• অন্যান্য [unattributed]টি এন্টিটি।

ট্রেসে হাইলাইট করা সম্পর্কিত ইভেন্ট এবং বাকিগুলি ধূসর রঙে দেখতে, টেবিলে এন্টিটির উপর মাউস নিয়ে যান। কোনও এন্টিটির ইভেন্ট হাইলাইট করে রাখতে, সারণিতে সেটি বেছে নিন। হাইলাইট করা সরাতে, ট্রেসের যেকোনও খালি জায়গায় ক্লিক করুন।

বটম-আপ ট্যাবে এই এন্টিটি দ্বারা গ্রুপ করা অ্যাক্টিভিটি খুলতে, টেবিলের এন্টিটির উপর মাউস নিয়ে যান এবং এর পাশে থাকা account_tree বটম-আপ বিকল্পে ক্লিক করুন।

ফ্লেম চার্ট পড়া

পারফর্ম্যান্স প্যানেলটি একটি ফ্লেম চার্টে মূল থ্রেড অ্যাক্টিভিটি দেখায়। x-অক্ষ সময়ের সাথে সাথে রেকর্ডিংকে দেখায়। y-অক্ষ কল স্ট্যাককে দেখায়। উপরে দেখানো ইভেন্টের কারণে নিচে দেখানো ইভেন্টগুলি ঘটে।

এই উদাহরণে Main ট্র্যাকে ফ্লেম চার্ট দেখানো হয়েছে। click ইভেন্টের কারণে একটি পরিচয় গোপন করা ফাংশন কল করা হয়েছে। এই ফাংশনটি, পরিবর্তে, onEndpointClick_-কে কল করেছে, যা handleClick_-কে কল করেছে এবং আরও অনেক কিছু।

পারফর্ম্যান্স প্যানেল, ফ্লেম চার্টকে আলাদা আলাদা করে দেখাতে এবং আরও বেশি পাঠযোগ্য করে তুলতে স্ক্রিপ্টকে র‍্যান্ডম রঙ অ্যাসাইন করে। আগের উদাহরণে, একটি স্ক্রিপ্ট থেকে ফাংশন কল হালকা নীল রঙে দেখানো হয়েছে। অন্য স্ক্রিপ্ট থেকে কল করা হলে হালকা গোলাপি রঙে দেখানো হয়। গাঢ় হলুদ রঙ স্ক্রিপ্টিং অ্যাক্টিভিটি এবং বেগুনি রঙ রেন্ডারিং অ্যাক্টিভিটি বোঝায়। এই গাঢ় হলুদ ও বেগুনি রঙের ইভেন্ট সব রেকর্ডিং জুড়ে সামঞ্জস্যপূর্ণ।

বড় টাস্কও হাইলাইট করা হয়, লাল ত্রিভুজ দিয়ে এবং ৫০ মিলিসেকেন্ডের বেশি সময় নেওয়া অংশ লাল শেড দিয়ে:

এই উদাহরণে, টাস্কটি সম্পূর্ণ হতে ৪০০ মিলিসেকেন্ডের বেশি সময় লেগেছে, তাই শেষ ৩৫০ মিলিসেকেন্ডের অংশটি লাল রঙে শেড করা হয়েছে, তবে প্রথম ৫০ মিলিসেকেন্ডের অংশটি নয়।

এছাড়াও, Main ট্র্যাক profile() এবং profileEnd() কনসোল ফাংশনের মাধ্যমে শুরু ও বন্ধ করা CPU প্রোফাইলের তথ্য দেখায়। আপনার কোডে বা কনসোলে console.profileEnd() কল করলে, অটোমেটিক পারফর্ম্যান্স প্যানেল খুলে যায় এবং রেকর্ড করা ট্রেস দেখায়।

জাভাস্ক্রিপ্ট কলের বিস্তারিত ফ্লেম চার্ট লুকাতে, জাভাস্ক্রিপ্ট স্যাম্পেল বন্ধ করুন দেখুন। JS স্যাম্পেল বন্ধ করা থাকলে, আপনি শুধু Event (click) ও Function Call-এর মতো হাই-লেভেল ইভেন্ট দেখতে পাবেন।

ইভেন্ট ইনিশিয়েটর ট্র্যাক করা

প্রধান ট্র্যাক এমন তীরচিহ্ন দেখাতে পারে যা নিম্নলিখিত ইনিশিয়েটর ও তাদের কারণে হওয়া ইভেন্টকে কানেক্ট করে:

• স্টাইল বা লেআউট ইনভ্যালিডেশন -> স্টাইল আবার গণনা করুন বা লেআউট
• অ্যানিমেশন ফ্রেমের অনুরোধ করুন -> অ্যানিমেশন ফ্রেম চালু করা হয়েছে
• অ্যাক্টিভ না থাকা কলব্যাকের অনুরোধ করুন -> অ্যাক্টিভ না থাকা কলব্যাক চালু করুন
• টাইমার ইনস্টল করুন -> টাইমার চালু করা হয়েছে
• WebSocket তৈরি করুন -> পাঠান... এবং WebSocket হ্যান্ডশেক পান অথবা WebSocket বাতিল করুন
• postTask শিডিউল করুন -> postTask চালান অথবা postTask বাতিল করুন

তীরচিহ্ন দেখতে, ফ্লেম চার্টে কোনও ইনিশিয়েটর বা এর কারণে হওয়া ইভেন্ট খুঁজে নিয়ে সেটি বেছে নিন।

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

ফ্লেম চার্টে ফাংশন ও তার চাইল্ড এন্ট্রি লুকান

মূল থ্রেডে ফ্লেম চার্টকে আরও পরিষ্কার করতে, আপনি বেছে নেওয়া ফাংশন বা তাদের চাইল্ড ফাংশন লুকাতে পারেন:

1. মূল ট্র্যাকের মধ্যে, কোনও ফাংশনে ডানদিকের বোতামে ক্লিক করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন অথবা সংশ্লিষ্ট শর্টকাট প্রেস করুন:

   • ফাংশন লুকান (H)
   • বাচ্চাদের লুকান (C)
   • রিপিটিং চাইল্ড এন্ট্রি লুকান (R)
   • চিল্ড্রেন আইটেম রিসেট করুন (U)
   • ট্রেস রিসেট করুন (T)
   • ইগনোর লিস্টে স্ক্রিপ্ট যোগ করুন (I)

   

   লুকানো চাইল্ড সহ ফাংশনের নামের পাশে একটি arrow_drop_down ড্রপ-ডাউন বোতাম দেখা যায়।

2. লুকানো বাচ্চাদের সংখ্যা দেখতে, arrow_drop_down ড্রপ-ডাউন বোতামের উপর মাউস নিয়ে যান।

   

3. লুকানো চাইল্ড সহ কোনও ফাংশন বা সম্পূর্ণ ফ্লেম চার্ট রিসেট করতে, ফাংশনটি বেছে নিন এবং U টিপুন অথবা যেকোনও ফাংশনে ডানদিকের বোতামে ক্লিক করে যথাক্রমে ট্রেস রিসেট করুন বিকল্প বেছে নিন।

ফ্লেম চার্টে স্ক্রিপ্ট এড়িয়ে যান

ইগনোর লিস্টে স্ক্রিপ্ট যোগ করতে, চার্টে কোনও স্ক্রিপ্টে ডানদিকের বোতামে ক্লিক করে ইগনোর লিস্টে স্ক্রিপ্ট যোগ করুন বিকল্প বেছে নিন।

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

টেবিলে অ্যাক্টিভিটি দেখুন

কোনও পৃষ্ঠা রেকর্ড করার পরে, অ্যাক্টিভিটি বিশ্লেষণ করার জন্য আপনাকে শুধুমাত্র প্রধান ট্র্যাকের উপর নির্ভর করতে হবে না। এছাড়াও, DevTools অ্যাক্টিভিটি বিশ্লেষণ করার জন্য তিনটি সারণী ভিউ প্রদান করে। প্রতিটি ভিউ আপনাকে অ্যাক্টিভিটির উপর আলাদা দৃষ্টিভঙ্গি দেয়:

• সবচেয়ে বেশি কাজ করে এমন রুট অ্যাক্টিভিটি দেখতে চাইলে, কল ট্রি ট্যাব ব্যবহার করুন।
• আপনি যখন সেইসব অ্যাক্টিভিটি দেখতে চান যেখানে সবচেয়ে বেশি সময় সরাসরি ব্যয় করা হয়েছে, তখন নিচ থেকে উপরে ট্যাব ব্যবহার করুন।
• রেকর্ডিংয়ের সময় যে ক্রমে অ্যাক্টিভিটি ঘটেছে সেই ক্রমে দেখতে চাইলে, ইভেন্ট লগ ট্যাব ব্যবহার করুন।

আপনি তিনটি টেবিলের যেকোনও একটিতে (এবং সারাংশ ট্যাবের ১ম / ৩য় পক্ষের টেবিলে) কোনও আইটেমে ক্লিক করতে পারেন যাতে আপনি পারফর্ম্যান্স ট্রেস ব্রাউজ করার সময় ট্রেসে সংশ্লিষ্ট ইভেন্ট হাইলাইট করা থাকে এবং বাকিগুলি আবছা হয়ে যায়।

আপনি যা খুঁজছেন তা আরও দ্রুত খুঁজে পেতে সাহায্য করার জন্য, তিনটি ট্যাবেই ফিল্টার বারের পাশে উন্নত ফিল্টারিংয়ের জন্য বোতাম রয়েছে:

• match_case কেস ম্যাচ করুন।
• regular_expression রেগুলার এক্সপ্রেশন।
• match_word হুবহু একই শব্দ সার্চ করুন।

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

সোর্স প্যানেলে সোর্স ফাইল খুলতে কোনও লিঙ্কে ক্লিক করুন।

রুট অ্যাক্টিভিটি

কল ট্রি ট্যাব, নিচ থেকে উপরে ট্যাব এবং ইভেন্ট লগ বিভাগে উল্লেখ করা রুট অ্যাক্টিভিটি ধারণার ব্যাখ্যা এখানে দেওয়া হল।

রুট অ্যাক্টিভিটি হল সেইসব অ্যাক্টিভিটি যার জন্য ব্রাউজারকে কিছু কাজ করতে হয়। যেমন, আপনি কোনও পৃষ্ঠায় ক্লিক করলে, ব্রাউজার রুট অ্যাক্টিভিটি হিসেবে Event অ্যাক্টিভিটি ফায়ার করে। তারপরে সেই Event একটি হ্যান্ডলার এক্সিকিউট করতে পারে।

প্রধান ট্র্যাকের ফ্লেম চার্টে, মূল অ্যাক্টিভিটি চার্টের সবচেয়ে উপরে থাকে। কল ট্রি এবং ইভেন্ট লগ ট্যাবে, রুট অ্যাক্টিভিটি হল টপ-লেভেল আইটেম।

রুট অ্যাক্টিভিটির উদাহরণের জন্য কল ট্রি ট্যাব দেখুন।

কল ট্রি ট্যাব

কোন মূল অ্যাক্টিভিটি সবচেয়ে বেশি কাজের কারণ তা দেখতে কল ট্রি ট্যাব ব্যবহার করুন।

কল ট্রি ট্যাবে রেকর্ডিংয়ের বেছে নেওয়া অংশ চলাকালীন অ্যাক্টিভিটিই শুধু দেখানো হয়। কীভাবে রেকর্ডিংয়ের অংশ বেছে নিতে হয় তা জানতে রেকর্ডিংয়ের অংশ বেছে নিন দেখুন।

এই উদাহরণে, অ্যাক্টিভিটি কলামের আইটেমের টপ-লেভেল, যেমন Event, Paint এবং Composite Layers হল রুট অ্যাক্টিভিটি। নেস্টিং কল স্ট্যাককে দেখায়। এই উদাহরণে, Event-এর কারণে Function Call, Function Call-এর কারণে button.addEventListener, button.addEventListener-এর কারণে b, এবং আরও অনেক কিছু হয়েছে।

সেল্ফ টাইম বলতে সেই অ্যাক্টিভিটিতে সরাসরি ব্যয় করা সময়কে বোঝায়। মোট সময় বলতে সেই অ্যাক্টিভিটি বা তার কোনও চাইল্ড অ্যাক্টিভিটিতে ব্যয় করা সময়কে বোঝায়।

সেই কলাম অনুযায়ী টেবিল সাজাতে সেল্ফ টাইম, মোট সময় বা অ্যাক্টিভিটি বিকল্পে ক্লিক করুন।

অ্যাক্টিভিটির নাম অনুযায়ী ইভেন্ট ফিল্টার করতে ফিল্টার বক্স ব্যবহার করুন।

সাধারণত, গ্রুপিং মেনু কোনও গ্রুপিং নেই হিসেবে সেট করা থাকে। বিভিন্ন মাপকাঠির ভিত্তিতে অ্যাক্টিভিটি টেবিল সাজাতে গ্রুপিং মেনু ব্যবহার করুন।

বটম-আপ ট্যাব

কোন অ্যাক্টিভিটি সামগ্রিকভাবে সবচেয়ে বেশি সময় নিয়েছে তা দেখতে নিচ থেকে উপরে ট্যাব ব্যবহার করুন।

নিচ থেকে উপরে ট্যাবে রেকর্ডিংয়ের বেছে নেওয়া অংশের অ্যাক্টিভিটিই শুধু দেখা যায়। কীভাবে রেকর্ডিংয়ের অংশ বেছে নিতে হয় তা জানতে রেকর্ডিংয়ের অংশ বেছে নিন দেখুন।

এই উদাহরণের প্রধান ট্র্যাক ফ্লেম চার্টে, আপনি দেখতে পাবেন যে প্রায় সব সময় wait()-এ তিনটি কল এক্সিকিউট করতে ব্যয় করা হয়েছে। সেই অনুযায়ী, বটম-আপ ট্যাবে সবচেয়ে বেশি অ্যাক্টিভিটি হল wait। ফ্লেম চার্টে, wait-এ করা কলের নিচে থাকা হলুদ অংশটি আসলে হাজার হাজার Minor GC কল। সেই অনুযায়ী, আপনি দেখতে পাবেন যে বটম-আপ ট্যাবে, পরবর্তী সবচেয়ে ব্যয়বহুল অ্যাক্টিভিটি হল Minor GC।

সেল্ফ টাইম কলামটি সেই অ্যাক্টিভিটিতে সরাসরি ব্যয় করা মোট সময়কে প্রতিনিধিত্ব করে, এর সমস্ত ঘটনা জুড়ে।

মোট সময় কলামে সেই অ্যাক্টিভিটি বা তার কোনও চাইল্ড অ্যাক্টিভিটিতে কাটানো মোট সময় দেখানো হয়।

সবচেয়ে ভারি স্ট্যাক টেবিল

কল ট্রি বা নিচ থেকে উপরে ট্যাবের ডানদিকে, সবচেয়ে ভারি স্ট্যাক টেবিল দেখতে right_panel_open সবচেয়ে ভারি স্ট্যাক দেখুন বিকল্পে ক্লিক করুন।

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

এইভাবে, পারফর্ম্যান্স ট্রেসে কল স্ট্যাক থেকে নেস্টেড অ্যাক্টিভিটিগুলি আপনি ভিজ্যুয়ালি খুঁজে পেতে পারবেন যেগুলি সবচেয়ে বেশি সময় নেয়।

ইভেন্ট লগ ট্যাব

রেকর্ডিংয়ের সময় যে ক্রমে অ্যাক্টিভিটি ঘটেছে সেই ক্রমে তা দেখতে ইভেন্ট লগ ট্যাব ব্যবহার করুন।

ইভেন্ট লগ ট্যাবে রেকর্ডিংয়ের বেছে নেওয়া অংশের অ্যাক্টিভিটিই শুধু দেখা যায়। কীভাবে রেকর্ডিংয়ের অংশ বেছে নিতে হয় তা জানতে রেকর্ডিংয়ের অংশ বেছে নিন দেখুন।

শুরুর সময় কলামটি রেকর্ডিং শুরু হওয়ার সাপেক্ষে সেই অ্যাক্টিভিটি শুরু হওয়ার সময়কে দেখায়। এই উদাহরণে বেছে নেওয়া আইটেমের জন্য 1573.0 ms-এর শুরুর সময় এর অর্থ হল, রেকর্ডিং শুরু হওয়ার ১৫৭৩ মিলিসেকেন্ড পরে অ্যাক্টিভিটি শুরু হয়েছে।

সেল্ফ টাইম কলামে সেই অ্যাক্টিভিটিতে সরাসরি ব্যয় করা সময় দেখানো হয়।

মোট সময় কলামটি সেই অ্যাক্টিভিটি বা এর কোনও সাব-অ্যাক্টিভিটিতে সরাসরি ব্যয় করা সময়কে দেখায়।

সেই কলাম অনুযায়ী সারণি সাজাতে, শুরুর সময়, সেল্ফ টাইম বা মোট সময় বিকল্পে ক্লিক করুন।

নাম অনুযায়ী অ্যাক্টিভিটি ফিল্টার করতে ফিল্টার বক্স ব্যবহার করুন।

১ মিলি সেকেন্ড বা ১৫ মিলি সেকেন্ডের কম সময় লেগেছে এমন অ্যাক্টিভিটি ফিল্টার করতে সময়সীমা মেনু ব্যবহার করুন। ডিফল্ট হিসেবে সময়সীমা মেনু সব বিকল্পে সেট করা থাকে, অর্থাৎ সব অ্যাক্টিভিটি দেখানো হয়।

সেইসব বিভাগ থেকে সব অ্যাক্টিভিটি ফিল্টার করতে, লোডিং, স্ক্রিপ্টিং, রেন্ডারিং বা পেন্টিং চেকবক্স বন্ধ করুন।

পারফর্ম্যান্স মার্কার দেখুন

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

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded ইভেন্ট (DCL)
• অনলোড ইভেন্ট (L)

ট্রেসের নিচে মার্কারের নামের উপর মাউস নিয়ে গিয়ে সেটির টাইমস্ট্যাম্প দেখুন।

কাস্টম সময় দেখুন

টাইমিং ট্র্যাকে, আপনার কাস্টম পারফর্ম্যান্স মার্কার দেখুন, যেমন:

• performance.mark()টি কল। ৮১৩.৪৪ মিলিসেকেন্ডে টুলটিপ সহ একটি স্বতন্ত্র চিহ্ন নিচে দেখানো হয়েছে, যার লেবেল জাভাস্ক্রিপ্ট রান করা শুরু হচ্ছে।
• performance.measure()টি কল। নিচে একটি হলুদ স্প্যান দেখানো হয়েছে, যার লেবেল হল ধীর ইন্টার‍্যাকশন।

সারাংশ ট্যাবে আরও বিবরণ দেখতে একটি মার্কার বেছে নিন, যার মধ্যে রয়েছে এর টাইমস্ট্যাম্প, মোট সময়, সেল্ফ টাইম এবং detail অবজেক্ট। performance.mark() এবং performance.measure() কলের জন্য, ট্যাবে স্ট্যাক ট্রেসও দেখানো হয়।

ইন্টার‍্যাকশন দেখা

সম্ভাব্য রেসপন্সিভনেস সংক্রান্ত সমস্যা ট্র্যাক করতে ইন্টার‍্যাকশন ট্র্যাকে ব্যবহারকারীর ইন্টার‍্যাকশন দেখুন।

ইন্টার‍্যাকশন দেখতে:

1. DevTools খুলুন, যেমন, এই ডেমো পৃষ্ঠায়।
2. পারফর্ম্যান্স প্যানেল খুলে রেকর্ডিং শুরু করুন।
3. কোনও এলিমেন্টে (কফি) ক্লিক করে রেকর্ডিং বন্ধ করুন।
4. টাইমলাইনে ইন্টার‍্যাকশন ট্র্যাক খুঁজুন।

এই উদাহরণে, ইন্টার‍্যাকশন ট্র্যাক পয়েন্টার ইন্টার‍্যাকশন দেখায়। ইন্টার‍্যাকশনে হুইস্কার থাকে যা প্রসেসিংয়ের সময়সীমার মধ্যে ইনপুট ও প্রেজেন্টেশন সংক্রান্ত বিলম্বের ব্যাপারে ইঙ্গিত দেয়। ইনপুট ডিলে, প্রসেসিং টাইম ও প্রেজেন্টেশন ডিলে সহ টুলটিপ দেখতে ইন্ট্যার‍্যাকশনের উপর মাউস নিয়ে যান।

ইন্টার‍্যাকশন ট্র্যাক, সারাংশ ট্যাবে এবং হোভার করার সময় টুলটিপে ২০০ মিলিসেকেন্ডের বেশি সময় ধরে চলা ইন্টার‍্যাকশনের জন্য ইন্টার‍্যাকশন থেকে পরবর্তী পেইন্ট (INP) সংক্রান্ত সতর্কতাও দেখায়:

ইন্টার‍্যাকশন ট্র্যাক ২০০ মিলিসেকেন্ডের বেশি ইন্টার‍্যাকশনকে উপরের ডানদিকের কোণে লাল ত্রিভুজ দিয়ে চিহ্নিত করে।

লেআউট শিফ্ট দেখা

লেআউট শিফ্ট ট্র্যাকে লেআউট শিফ্ট দেখুন। শিফ্টগুলি বেগুনি রঙের ডায়মন্ড হিসেবে দেখানো হয় এবং টাইমলাইনে তাদের প্রক্সিমিটির উপর ভিত্তি করে ক্লাস্টার (বেগুনি রঙের লাইন) হিসেবে গ্রুপ করা হয়।

ভিউ পোর্টে লেআউট শিফটের কারণ হওয়া কোনও এলিমেন্ট হাইলাইট করতে, সংশ্লিষ্ট ডায়মন্ডের উপর মাউস নিয়ে যান।

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

আরও তথ্যের জন্য, Cumulative Layout Shift (CLS) দেখুন।

অ্যানিমেশন দেখুন

অ্যানিমেশন ট্র্যাকে অ্যানিমেশন দেখুন। অ্যানিমেশনের নাম সংশ্লিষ্ট CSS প্রপার্টি বা এলিমেন্ট অনুযায়ী রাখা হয়, যেমন transform বা my-element। নন-কম্পোজিটিং অ্যানিমেশনগুলি উপরের ডানদিকের কোণায় লাল ত্রিভুজ দিয়ে চিহ্নিত করা হয়েছে।

সারাংশ ট্যাবে আরও বিবরণ দেখতে একটি অ্যানিমেশন বেছে নিন, যার মধ্যে কম্পোজিটিং ব্যর্থতার কারণও অন্তর্ভুক্ত।

GPU অ্যাক্টিভিটি দেখুন

GPU বিভাগে GPU অ্যাক্টিভিটি দেখুন।

রাস্টার অ্যাক্টিভিটি দেখুন

থ্রেড পুল বিভাগে রাস্টার অ্যাক্টিভিটি দেখুন।

ফ্রেম প্রতি সেকেন্ড (FPS) বিশ্লেষণ করুন

DevTools প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করার জন্য অসংখ্য উপায় প্রদান করে:

• কোনও নির্দিষ্ট ফ্রেম তৈরি করতে কত সময় লেগেছে তা দেখতে ফ্রেম বিভাগ ব্যবহার করুন।
• পৃষ্ঠা চলাকালীন FPS-এর রিয়েল-টাইম অনুমান পেতে FPS মিটার ব্যবহার করুন। FPS মিটারের সাহায্যে রিয়েল-টাইমে ফ্রেম পার সেকেন্ড দেখুন।

ফ্রেম বিভাগ

ফ্রেম বিভাগ থেকে আপনি জানতে পারবেন যে কোনও নির্দিষ্ট ফ্রেম তৈরি করতে ঠিক কত সময় লেগেছে।

কোনও ফ্রেমের উপরে মাউস নিয়ে গেলে, সেটির ব্যাপারে আরও তথ্য সহ একটি টুলটিপ দেখতে পাবেন।

এই উদাহরণে দেখানো হয়েছে যে কোনও ফ্রেমের উপর মাউস নিয়ে গেলে কীভাবে টুলটিপ দেখানো হয়।

ফ্রেম বিভাগে চার ধরনের ফ্রেম দেখানো হতে পারে:

1. অ্যাক্টিভ না থাকা ফ্রেম (সাদা)। কোন পরিবর্তন নেই৷
2. ফ্রেম (সবুজ)। প্রত্যাশিতভাবে এবং সময়মতো রেন্ডার করা হয়েছে।
3. আংশিকভাবে দেখানো হয়েছে এমন ফ্রেম (হলুদ রঙের, যার মধ্যে ফাঁকা ফাঁকা করে চওড়া ড্যাশ-লাইন প্যাটার্ন আছে)। Chrome যথাসময়ে অন্তত কিছু ভিজ্যুয়াল আপডেট রেন্ডার করার জন্য যথাসাধ্য চেষ্টা করেছে। যেমন, রেন্ডারার প্রসেসের (ক্যানভাস অ্যানিমেশন) মূল থ্রেডের কাজ দেরিতে হলেও কম্পোজিটর থ্রেড (স্ক্রলিং) সময়মতো হয়।
4. ড্রপ করা ফ্রেম (ঘন সলিড-লাইন প্যাটার্ন সহ লাল)। Chrome যুক্তিসঙ্গত সময়ের মধ্যে ফ্রেম রেন্ডার করতে পারছে না।

এই উদাহরণে আংশিকভাবে দেখানো ফ্রেমের উপর মাউস নিয়ে গেলে টুলটিপ দেখানো হয়।

সারসংক্ষেপ ট্যাবে ফ্রেম সম্পর্কে আরও তথ্য দেখতে, কোনও ফ্রেমে ক্লিক করুন। DevTools বেছে নেওয়া ফ্রেমটি নীল রঙে আউটলাইন করে।

নেটওয়ার্ক রিকোয়েস্ট দেখা

পারফর্ম্যান্স রেকর্ড করার সময় হওয়া নেটওয়ার্ক অনুরোধের ওয়াটারফল দেখতে নেটওয়ার্ক বিভাগটি বড় করে দেখুন।

নেটওয়ার্ক ট্র্যাক নামের পাশে, কালার-কোডেড অনুরোধের ধরন সহ একটি লেজেন্ড আছে।

রেন্ডার-ব্লকিং অনুরোধগুলি উপরের ডানদিকের কোণে লাল ত্রিভুজ দিয়ে চিহ্নিত করা হয়।

অনুরোধের উপরে মাউস নিয়ে গিয়ে টুলটিপ দেখুন, যেখানে এইসব তথ্য থাকে:

• অনুরোধের URL এবং এটি এক্সিকিউট করতে মোট কত সময় লেগেছে।
• অগ্রাধিকার বা অগ্রাধিকারের পরিবর্তন, যেমন, Medium -> High।
• অনুরোধটি Render-blocking কিনা।
• অনুরোধের সময়সীমার ব্রেকডাউন, যা পরে বর্ণনা করা হয়েছে।

আপনি কোনও অনুরোধে ক্লিক করলে, নেটওয়ার্ক ট্র্যাক, এটির ইনিশিয়েটর থেকে অনুরোধ পর্যন্ত একটি তীরচিহ্ন আঁকে।

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

এছাড়াও, সারসংক্ষেপ ট্যাবে অনুরোধের টাইমিংয়ের ব্রেকডাউন দেখানো হয়।

এই উদাহরণে, www.google.com-এর অনুরোধটি বাঁদিকে একটি লাইন (|–), মাঝখানে একটি ডার্ক ও একটি লাইট অংশ সহ বার এবং ডানদিকে একটি লাইন (–|) দিয়ে দেখানো হয়েছে।

উপস্থিত থাকলে, সংক্ষিপ্তসার ট্যাবটি সার্ভার-সাইড রেন্ডারিং প্রযুক্তি প্রয়োগ করে এমন নেটওয়ার্ক অনুরোধের জন্য সার্ভার টাইমিংয়ের একটি ব্রেকডাউনও দেখায়। এইসব অনুরোধের জন্য, পারফর্ম্যান্স প্যানেল Server-Timing রেসপন্স হেডার থেকে ডেটা নেয়।

আপনি নেটওয়ার্ক ট্যাবে অন্য টাইমিং ব্রেকডাউন দেখতে পাবেন। নেটওয়ার্ক ট্র্যাকে অনুরোধের উপর বা সারাংশ ট্যাবে এর URL-এর উপর মাউস নিয়ে গিয়ে ডানদিকের বোতামে ক্লিক করুন এবং নেটওয়ার্ক প্যানেলে দেখুন বিকল্পে ক্লিক করুন। DevTools আপনাকে নেটওয়ার্ক প্যানেলে নিয়ে যায় এবং সংশ্লিষ্ট অনুরোধ বেছে নেয়। এর টাইমিং ট্যাব খুলুন।

এই দুটি ব্রেকডাউন কীভাবে একে অপরের সাথে ম্যাপ করে তা এখানে দেওয়া হল:

• বাঁদিকের লাইন (|–) হল Connection start ইভেন্টের গ্রুপ পর্যন্ত সবকিছু, অন্তর্ভুক্ত। অন্যভাবে বলতে গেলে, এটি Request Sent-এর আগের সবকিছু।
• বারের হালকা অংশটি হল Request sent ও Waiting for server response।
• বারের গাঢ় অংশটি হল Content download।
• ডানদিকের লাইন (–|) হল মূল থ্রেডের জন্য অপেক্ষা করার সময়। নেটওয়ার্ক > টাইমিং ট্যাবে এটি দেখা যায় না।

মেমরি মেট্রিক দেখা

শেষ রেকর্ডিং থেকে মেমরি মেট্রিক্স দেখতে মেমরি চেকবক্স চালু করুন।

DevTools, Summary ট্যাবের উপরে, একটি নতুন মেমরি চার্ট দেখায়। এছাড়াও, NET চার্টের নিচে একটি নতুন চার্ট আছে, যার নাম HEAP। HEAP চার্টটি মেমরি চার্টে JS Heap লাইনের মতো একই তথ্য প্রদান করে।

এই উদাহরণে সারসংক্ষেপ ট্যাবের উপরে মেমরি মেট্রিক দেখানো হয়েছে।

চার্টের রঙিন লাইনগুলি চার্টের উপরে রঙিন চেকবক্সের সাথে ম্যাপ করা হয়। চার্ট থেকে সেই বিভাগ লুকাতে চেকবক্স বন্ধ করুন।

চার্টে শুধুমাত্র রেকর্ডিংয়ের বেছে নেওয়া অঞ্চলটিই দেখা যায়। আগের উদাহরণে, মেমরি চার্টে শুধুমাত্র রেকর্ডিংয়ের শুরুর মেমরি ব্যবহার দেখানো হয়েছে, যা প্রায় ১০০০ms মার্ক পর্যন্ত।

রেকর্ডিংয়ের কোনও অংশের সময়সীমা দেখা

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

এই উদাহরণে, বেছে নেওয়া অংশের নিচে 488.53ms টাইমস্ট্যাম্প থেকে বোঝা যাচ্ছে যে ওই অংশটি কতক্ষণ ধরে চলেছে।

স্ক্রিনশট দেখুন

স্ক্রিনশট কীভাবে চালু করবেন তা জানতে রেকর্ড করার সময় স্ক্রিনশট ক্যাপচার করা দেখুন।

রেকর্ডিংয়ের সময় পৃষ্ঠাটি কেমন দেখাচ্ছিল তার স্ক্রিনশট দেখতে টাইমলাইন ওভারভিউ বিকল্পের উপরে মাউস নিয়ে যান। টাইমলাইন ওভারভিউ হল সেই বিভাগ যেখানে CPU, FPS এবং NET চার্ট থাকে।

এছাড়াও, ফ্রেম বিভাগে কোনও ফ্রেমে ক্লিক করে আপনি স্ক্রিনশট দেখতে পারবেন। DevTools, সংক্ষিপ্তসার ট্যাবে স্ক্রিনশটের একটি ছোট ভার্সন দেখায়।

এই উদাহরণে ফ্রেম বিভাগে 195.5ms ফ্রেমে ক্লিক করলে সারসংক্ষেপ ট্যাবে সেটির স্ক্রিনশট দেখানো হয়েছে।

স্ক্রিনশট জুম-ইন করে দেখতে সারসংক্ষেপ ট্যাবে থাম্বনেলে ক্লিক করুন।

এই উদাহরণে, সারসংক্ষেপ ট্যাবে থাম্বনেলে ক্লিক করার পরে জুম-ইন করা স্ক্রিনশট দেখানো হয়েছে।

লেয়ারের তথ্য দেখুন

কোনও ফ্রেমের উন্নত লেয়ার সংক্রান্ত তথ্য দেখতে:

1. উন্নত পেইন্ট ইন্সট্রুমেন্টেশন চালু করুন।
2. ফ্রেম বিভাগে একটি ফ্রেম বেছে নিন। DevTools, ইভেন্ট লগ ট্যাবের পাশে নতুন লেয়ার ট্যাবে এর লেয়ার সম্পর্কে তথ্য দেখায়।

ডায়াগ্রামে কোনও লেয়ার হাইলাইট করতে তার উপর মাউস নিয়ে যান।

এই উদাহরণে দেখানো হয়েছে যে আপনি লেয়ার #৩৯-এর উপর মাউস নিয়ে গেলে সেটি হাইলাইট করা হয়।

ডায়াগ্রাম সরাতে:

• X ও Y অ্যাক্সিস বরাবর সরানোর জন্য প্যান মোড বিকল্পে ক্লিক করুন।
• Z অক্ষ বরাবর ঘোরাতে ঘোরানোর মোড বিকল্পে ক্লিক করুন।
• ডায়াগ্রামকে তার আসল পজিশনে রিসেট করতে, ট্রান্সফর্ম রিসেট করুন বিকল্পে ক্লিক করুন।

লেয়ার বিশ্লেষণ কীভাবে কাজ করে তা দেখুন:

পেন্ট প্রোফাইলার দেখুন

পেইন্ট ইভেন্ট সম্পর্কে উন্নত তথ্য দেখতে:

1. উন্নত পেইন্ট ইনস্ট্রুমেন্টেশন চালু করুন।
2. মূল ট্র্যাক থেকে পেইন্ট ইভেন্ট বেছে নিন।

রেন্ডারিং ট্যাবের সাহায্যে রেন্ডারিং পারফর্ম্যান্স বিশ্লেষণ করা

আপনার পৃষ্ঠার রেন্ডারিং পারফর্ম্যান্স ভিজ্যুয়ালাইজ করতে রেন্ডারিং ট্যাবের ফিচার ব্যবহার করুন।

রেন্ডারিং ট্যাব খুলুন।

FPS মিটার ব্যবহার করে রিয়েল-টাইমে ফ্রেম পার সেকেন্ড দেখুন

ফ্রেম রেন্ডারিং স্ট্যাট হল একটি ওভারলে যা আপনার ভিউপোর্টের উপরে ডানদিকের কোণে দেখা যায়। পৃষ্ঠাটি চলার সাথে সাথে এটি FPS-এর রিয়েল টাইম অনুমান প্রদান করে।

ফ্রেম রেন্ডারিংয়ের পরিসংখ্যান দেখুন।

পেইন্ট ফ্ল্যাশিংয়ের মাধ্যমে রিয়েল টাইমে পেইন্টিং ইভেন্ট দেখুন

পৃষ্ঠার সব পেইন্ট ইভেন্টের রিয়েল-টাইম ভিউ পেতে পেইন্ট ফ্ল্যাশিং ব্যবহার করুন।

পেইন্ট ফ্ল্যাশিং দেখুন।

লেয়ার বর্ডার সহ লেয়ারের ওভারলে দেখুন

পৃষ্ঠার উপরে লেয়ার বর্ডার ও টাইলসের ওভারলে দেখতে লেয়ার বর্ডার ব্যবহার করুন।

লেয়ারের বর্ডার দেখুন।

রিয়েল টাইমে স্ক্রল পারফর্ম্যান্স সংক্রান্ত সমস্যা খুঁজে বের করুন

পৃষ্ঠার পারফর্ম্যান্সের ক্ষতি করতে পারে এমন স্ক্রল করার সাথে সম্পর্কিত ইভেন্ট লিসেনার আছে এমন পৃষ্ঠার এলিমেন্ট শনাক্ত করতে স্ক্রলিং পারফর্ম্যান্স সংক্রান্ত সমস্যা ব্যবহার করুন। DevTools, টিল রঙে সম্ভাব্য সমস্যাযুক্ত এলিমেন্ট আউটলাইন করে।

স্ক্রল করার পারফর্ম্যান্স সংক্রান্ত সমস্যা দেখুন।