এই পৃষ্ঠাটি কার্যক্ষমতা বিশ্লেষণের সাথে সম্পর্কিত Chrome DevTools বৈশিষ্ট্যগুলির একটি ব্যাপক রেফারেন্স।
Chrome DevTools ব্যবহার করে কিভাবে একটি পৃষ্ঠার কর্মক্ষমতা বিশ্লেষণ করতে হয় তার নির্দেশিত টিউটোরিয়ালের জন্য রানটাইম কর্মক্ষমতা বিশ্লেষণ দেখুন।
রেকর্ড কর্মক্ষমতা
আপনি রানটাইম বা লোড কর্মক্ষমতা রেকর্ড করতে পারেন.
রেকর্ড রানটাইম কর্মক্ষমতা
রানটাইম পারফরম্যান্স রেকর্ড করুন যখন আপনি একটি পৃষ্ঠার কার্যক্ষমতা বিশ্লেষণ করতে চান কারণ এটি চলছে, লোড করার বিপরীতে।
- আপনি যে পৃষ্ঠাটি বিশ্লেষণ করতে চান সেখানে যান।
- DevTools-এ পারফরম্যান্স ট্যাবে ক্লিক করুন।
রেকর্ড ক্লিক করুন
. 
পৃষ্ঠার সাথে যোগাযোগ করুন। DevTools আপনার ইন্টারঅ্যাকশনের ফলে ঘটে যাওয়া সমস্ত পৃষ্ঠা কার্যকলাপ রেকর্ড করে।
রেকর্ডিং বন্ধ করতে আবার রেকর্ড ক্লিক করুন বা থামাতে ক্লিক করুন।
রেকর্ড লোড কর্মক্ষমতা
লোড কর্মক্ষমতা রেকর্ড করুন যখন আপনি একটি পৃষ্ঠার কর্মক্ষমতা বিশ্লেষণ করতে চান যখন এটি লোড হচ্ছে, যেমন চলমান।
- আপনি যে পৃষ্ঠাটি বিশ্লেষণ করতে চান সেখানে যান।
- DevTools-এর পারফরম্যান্স প্যানেল খুলুন।
প্রোফাইলিং শুরু করুন এবং পৃষ্ঠা পুনরায় লোড করুন ক্লিক করুন
. DevTools প্রথমে কোন অবশিষ্ট স্ক্রিনশট এবং ট্রেস মুছে ফেলার জন্য about:blankনেভিগেট করে। তারপর DevTools পৃষ্ঠাটি পুনরায় লোড হওয়ার সময় পারফরম্যান্স মেট্রিক্স রেকর্ড করে এবং লোড শেষ হওয়ার কয়েক সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রেকর্ডিং বন্ধ করে দেয়।
DevTools স্বয়ংক্রিয়ভাবে রেকর্ডিংয়ের অংশে জুম ইন করে যেখানে বেশিরভাগ কার্যকলাপ ঘটেছে।
এই উদাহরণে, পারফরম্যান্স প্যানেল একটি পৃষ্ঠা লোডের সময় কার্যকলাপ দেখায়।
রেকর্ড করার সময় স্ক্রিনশট ক্যাপচার করুন
রেকর্ডিংয়ের সময় প্রতিটি ফ্রেমের একটি স্ক্রিনশট ক্যাপচার করতে স্ক্রিনশট চেকবক্স সক্রিয় করুন।
স্ক্রিনশটগুলির সাথে কীভাবে ইন্টারঅ্যাক্ট করতে হয় তা শিখতে একটি স্ক্রিনশট দেখুন দেখুন৷
রেকর্ড করার সময় জোর করে আবর্জনা সংগ্রহ করুন
আপনি যখন একটি পৃষ্ঠা রেকর্ড করছেন, তখন জোর করে আবর্জনা সংগ্রহ করতে গারবেজ সংগ্রহ করুন ক্লিক করুন।
রেকর্ডিং সেটিংস দেখান
ক্যাপচার সেটিংস ক্লিক করুন 
DevTools কীভাবে পারফরম্যান্স রেকর্ডিং ক্যাপচার করে তার সাথে সম্পর্কিত আরও সেটিংস প্রকাশ করতে।
জাভাস্ক্রিপ্ট নমুনা নিষ্ক্রিয়
ডিফল্টরূপে, একটি রেকর্ডিংয়ের প্রধান ট্র্যাক জাভাস্ক্রিপ্ট ফাংশনের বিস্তারিত কল স্ট্যাক প্রদর্শন করে যা রেকর্ডিংয়ের সময় কল করা হয়েছিল। এই কল স্ট্যাকগুলি নিষ্ক্রিয় করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - অক্ষম জাভাস্ক্রিপ্ট নমুনা চেকবক্স সক্রিয় করুন.
- পৃষ্ঠাটির একটি রেকর্ডিং নিন।
নিম্নলিখিত স্ক্রিনশটগুলি জাভাস্ক্রিপ্ট নমুনাগুলি নিষ্ক্রিয় এবং সক্রিয় করার মধ্যে পার্থক্য দেখায়৷ নমুনা নিষ্ক্রিয় করার সময় রেকর্ডিংয়ের প্রধান ট্র্যাকটি অনেক ছোট হয়, কারণ এটি জাভাস্ক্রিপ্টের সমস্ত কল স্ট্যাক বাদ দেয়।
এই উদাহরণটি অক্ষম JS নমুনা সহ একটি রেকর্ডিং দেখায়।
এই উদাহরণটি সক্ষম জেএস নমুনা সহ একটি রেকর্ডিং দেখায়।
রেকর্ড করার সময় নেটওয়ার্ক থ্রোটল করুন
রেকর্ড করার সময় নেটওয়ার্ক থ্রোটল করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - থ্রটলিং এর নির্বাচিত স্তরে নেটওয়ার্ক সেট করুন।
রেকর্ডিং করার সময় সিপিইউ থ্রোটল করুন
রেকর্ড করার সময় CPU থ্রোটল করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - থ্রোটলিং এর নির্বাচিত স্তরে CPU সেট করুন।
থ্রটলিং আপনার কম্পিউটারের ক্ষমতার সাথে আপেক্ষিক। উদাহরণস্বরূপ, 2x স্লোডাউন বিকল্পটি আপনার CPU কে তার স্বাভাবিক ক্ষমতার চেয়ে 2 গুণ ধীর গতিতে কাজ করে। DevTools সত্যিকার অর্থে মোবাইল ডিভাইসের CPU গুলিকে অনুকরণ করতে পারে না, কারণ মোবাইল ডিভাইসের আর্কিটেকচার ডেস্কটপ এবং ল্যাপটপের থেকে অনেক আলাদা।
CSS নির্বাচক পরিসংখ্যান সক্ষম করুন
দীর্ঘদিন ধরে চলা রিক্যালকুলেট স্টাইল ইভেন্টের সময় আপনার CSS নিয়ম নির্বাচকদের পরিসংখ্যান দেখতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - CSS নির্বাচক পরিসংখ্যান সক্ষম করুন চেকবক্স চেক করুন।
আরও বিশদ বিবরণের জন্য, স্টাইল ইভেন্টগুলি পুনরায় গণনা করার সময় কীভাবে CSS নির্বাচকের কার্যকারিতা বিশ্লেষণ করবেন তা দেখুন।
উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন
বিস্তারিত পেইন্ট ইনস্ট্রুমেন্টেশন দেখতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস দেখান দেখুন।
- উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন চেকবক্স চেক করুন।
পেইন্টের তথ্যের সাথে কীভাবে ইন্টারঅ্যাক্ট করতে হয় তা শিখতে, স্তরগুলি দেখুন এবং পেইন্ট প্রোফাইলার দেখুন ।
হার্ডওয়্যার কনকারেন্সি অনুকরণ করুন
বিভিন্ন সংখ্যক প্রসেসর কোরের সাথে অ্যাপ্লিকেশন কার্যকারিতা পরীক্ষা করতে, আপনি navigator.hardwareConcurrency বৈশিষ্ট্য দ্বারা রিপোর্ট করা মান কনফিগার করতে পারেন। কিছু অ্যাপ্লিকেশন তাদের অ্যাপ্লিকেশনের সমান্তরালতার মাত্রা নিয়ন্ত্রণ করতে এই বৈশিষ্ট্যটি ব্যবহার করে, উদাহরণস্বরূপ, Emscripten pthread পুলের আকার নিয়ন্ত্রণ করতে।
হার্ডওয়্যার কনকারেন্সি অনুকরণ করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - হার্ডওয়্যার কনকারেন্সি চেক করুন এবং ইনপুট বাক্সে কোরের সংখ্যা সেট করুন।
DevTools একটি সতর্কতা আইকন প্রদর্শন করে 
পারফরম্যান্স ট্যাবের পাশে আপনাকে মনে করিয়ে দিতে যে হার্ডওয়্যার কনকারেন্সি ইমুলেশন সক্রিয় করা হয়েছে।
10 এর ডিফল্ট মানে প্রত্যাবর্তন করতে, প্রত্যাবর্তন ক্লিক করুন 
বোতাম
একটি রেকর্ডিং সংরক্ষণ করুন
একটি রেকর্ডিং সংরক্ষণ করতে, ডান-ক্লিক করুন এবং প্রোফাইল সংরক্ষণ করুন নির্বাচন করুন।
একটি রেকর্ডিং লোড করুন
একটি রেকর্ডিং লোড করতে, ডান-ক্লিক করুন এবং লোড প্রোফাইল নির্বাচন করুন।
আগের রেকর্ডিং সাফ করুন
রেকর্ডিং করার পরে, রেকর্ডিং সাফ টিপুন 
পারফরম্যান্স প্যানেল থেকে রেকর্ডিং সাফ করতে।
একটি কর্মক্ষমতা রেকর্ডিং বিশ্লেষণ
আপনি রানটাইম পারফরম্যান্স রেকর্ড করার পরে বা লোড পারফরম্যান্স রেকর্ড করার পরে, পারফরম্যান্স প্যানেল এইমাত্র যা ঘটেছে তার কার্যক্ষমতা বিশ্লেষণ করার জন্য প্রচুর ডেটা সরবরাহ করে।
রেকর্ডিং নেভিগেট করুন
আপনার পারফরম্যান্স রেকর্ডিং ঘনিষ্ঠভাবে পরিদর্শন করতে, আপনি একটি রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে পারেন, একটি দীর্ঘ শিখা চার্ট স্ক্রোল করতে পারেন, জুম ইন এবং আউট করতে পারেন এবং জুম স্তরগুলির মধ্যে লাফ দিতে ব্রেডক্রাম্ব ব্যবহার করতে পারেন৷
রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন
পারফরম্যান্স প্যানেলের অ্যাকশন বারের অধীনে এবং রেকর্ডিংয়ের শীর্ষে, আপনি CPU এবং NET চার্ট সহ টাইমলাইন ওভারভিউ বিভাগটি দেখতে পারেন।
একটি রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে, ক্লিক করুন এবং ধরে রাখুন, তারপর টাইমলাইন ওভারভিউ জুড়ে বাম বা ডানে টেনে আনুন।
কীবোর্ড ব্যবহার করে একটি অংশ নির্বাচন করতে:
- প্রধান ট্র্যাক বা তার প্রতিবেশী কোনো ফোকাস.
- যথাক্রমে জুম ইন, বামে সরাতে, জুম আউট এবং ডানদিকে সরাতে W , A , S , D কীগুলি ব্যবহার করুন৷
একটি ট্র্যাকপ্যাড ব্যবহার করে একটি অংশ নির্বাচন করতে:
- টাইমলাইন ওভারভিউ বিভাগ বা যেকোনও ট্র্যাক ( প্রধান এবং এর প্রতিবেশী) উপর হোভার করুন।
- দুটি আঙুল ব্যবহার করে, জুম আউট করতে উপরে সোয়াইপ করুন, বামে সরাতে বাম দিকে সোয়াইপ করুন, জুম ইন করতে নিচে সোয়াইপ করুন এবং ডানদিকে সরাতে ডানদিকে সোয়াইপ করুন।
ব্রেডক্রাম্ব তৈরি করুন এবং জুম লেভেলের মধ্যে লাফ দিন
টাইমলাইন ওভারভিউ আপনাকে পর পর একাধিক নেস্টেড ব্রেডক্রাম্ব তৈরি করতে দেয়, জুম লেভেল বাড়াতে এবং তারপর জুম লেভেলের মধ্যে অবাধে লাফ দিতে দেয়।
ব্রেডক্রাম্ব তৈরি এবং ব্যবহার করতে:
- টাইমলাইন ওভারভিউতে , রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন ।
- নির্বাচনের উপর হোভার করুন এবং N ms বোতামে ক্লিক করুন। টাইমলাইন ওভারভিউ পূরণ করতে নির্বাচনটি প্রসারিত হয়। টাইমলাইন ওভারভিউয়ের শীর্ষে ব্রেডক্রাম্বের একটি চেইন তৈরি করা শুরু হয়।
- আরেকটি নেস্টেড ব্রেডক্রাম্ব তৈরি করতে আগের দুটি ধাপ পুনরাবৃত্তি করুন। আপনি ব্রেডক্রাম্ব নেস্ট করা চালিয়ে যেতে পারেন যতক্ষণ না নির্বাচনের পরিসর 5 মিলিসেকেন্ডের বেশি হয়।
- একটি নির্বাচিত জুম স্তরে যেতে, টাইমলাইন ওভারভিউ- এর উপরে চেইনের সংশ্লিষ্ট ব্রেডক্রাম্বে ক্লিক করুন।
ব্রেডক্রাম্বের বাচ্চাদের অপসারণ করতে, প্যারেন্ট ব্রেডক্রাম্বে ডান-ক্লিক করুন এবং চাইল্ড ব্রেডক্রাম্বগুলি সরান নির্বাচন করুন।
একটি দীর্ঘ শিখা চার্ট স্ক্রোল করুন
প্রধান ট্র্যাক বা তার প্রতিবেশীদের মধ্যে একটি দীর্ঘ শিখা চার্ট স্ক্রোল করতে, ক্লিক করুন এবং ধরে রাখুন, তারপরে আপনি যা খুঁজছেন তা দৃশ্যে না আসা পর্যন্ত যে কোনও দিকে টেনে আনুন।
অনুসন্ধান কার্যক্রম
আপনি প্রধান ট্র্যাকের সমস্ত কার্যকলাপ এবং নেটওয়ার্ক ট্র্যাকের অনুরোধগুলি অনুসন্ধান করতে পারেন৷
পারফরম্যান্স প্যানেলের নীচে একটি অনুসন্ধান বাক্স খুলতে, টিপুন:
- macOS: কমান্ড + এফ
- উইন্ডোজ, লিনাক্স: কন্ট্রোল + এফ
এই উদাহরণটি নীচে অনুসন্ধান বাক্সে একটি নিয়মিত অভিব্যক্তি দেখায় যা E দিয়ে শুরু হওয়া যেকোনো কার্যকলাপ খুঁজে পায়।
আপনার প্রশ্নের সাথে মেলে এমন কার্যকলাপের মাধ্যমে চক্র করতে:
- Previous বা পরবর্তী বোতামে ক্লিক করুন।
- পূর্ববর্তী নির্বাচন করতে Shift + Enter টিপুন বা পরবর্তী নির্বাচন করতে Enter টিপুন।
পারফরম্যান্স প্যানেল অনুসন্ধান বাক্সে নির্বাচিত কার্যকলাপের উপর একটি টুলটিপ দেখায়।
ক্যোয়ারী সেটিংস পরিবর্তন করতে:
- ক্যোয়ারী কেস সংবেদনশীল করতে ম্যাচ কেস ক্লিক করুন।
- আপনার ক্যোয়ারীতে রেগুলার এক্সপ্রেশন ব্যবহার করতে এক্সপ্রেশনে ক্লিক করুন।
অনুসন্ধান বাক্সটি লুকানোর জন্য, বাতিল ক্লিক করুন।
ট্র্যাকগুলির ক্রম পরিবর্তন করুন এবং তাদের লুকান৷
পারফরম্যান্স ট্রেস ডিক্লাটার করতে, আপনি ট্র্যাকের ক্রম পরিবর্তন করতে পারেন এবং ট্র্যাক কনফিগারেশন মোডে অপ্রাসঙ্গিকগুলি লুকিয়ে রাখতে পারেন৷
ট্র্যাকগুলি সরাতে এবং লুকাতে:
- কনফিগারেশন মোডে প্রবেশ করতে, একটি ট্র্যাকের নামের উপর ডান-ক্লিক করুন এবং ট্র্যাকগুলি কনফিগার করুন নির্বাচন করুন।
- একটি ট্র্যাক উপরে বা নীচে সরাতে বা দিকে ক্লিক করুন। এটি লুকাতে ক্লিক করুন।
- সমাপ্ত হলে, কনফিগারেশন মোড থেকে প্রস্থান করতে নীচের অংশে কনফিগার করা ট্র্যাক সমাপ্ত করুন ক্লিক করুন।
এই কর্মপ্রবাহটি কার্যকরভাবে দেখতে ভিডিওটি দেখুন।
পারফরম্যান্স প্যানেল নতুন ট্রেসের জন্য ট্র্যাক কনফিগারেশন সংরক্ষণ করে কিন্তু পরবর্তী DevTools সেশনে নয়।
প্রধান থ্রেড কার্যকলাপ দেখুন
পৃষ্ঠার প্রধান থ্রেডে ঘটে যাওয়া কার্যকলাপ দেখতে প্রধান ট্র্যাকটি ব্যবহার করুন।
সারাংশ ট্যাবে এটি সম্পর্কে আরও তথ্য দেখতে একটি ইভেন্টে ক্লিক করুন। পারফরম্যান্স প্যানেল নীল রঙে নির্বাচিত ইভেন্টের রূপরেখা দেয়।
এই উদাহরণটি সারাংশ ট্যাবে get ফাংশন কল ইভেন্ট সম্পর্কে আরও তথ্য দেখায়।
শিখা চার্ট পড়ুন
পারফরম্যান্স প্যানেল একটি শিখা চার্টে প্রধান থ্রেড কার্যকলাপ প্রতিনিধিত্ব করে। এক্স-অক্ষ সময়ের সাথে রেকর্ডিং প্রতিনিধিত্ব করে। y-অক্ষ কল স্ট্যাকের প্রতিনিধিত্ব করে। উপরের ঘটনাগুলো নিচের ঘটনা ঘটায়।
এই উদাহরণটি প্রধান ট্র্যাকের একটি শিখা চার্ট দেখায়। একটি click ইভেন্ট একটি বেনামী ফাংশন কল সৃষ্টি করেছে। এই ফাংশনটি, ঘুরে, onEndpointClick_ , যাকে বলা হয় handleClick_ , ইত্যাদি।
পারফরম্যান্স প্যানেল ফ্লেম চার্ট ভাঙতে এবং এটিকে আরও পঠনযোগ্য করে তুলতে স্ক্রিপ্টগুলিকে এলোমেলো রঙগুলি বরাদ্দ করে৷ আগের উদাহরণে, একটি স্ক্রিপ্ট থেকে ফাংশন কলগুলি হালকা নীল রঙের হয়। অন্য স্ক্রিপ্ট থেকে কল রঙিন হালকা গোলাপী হয়. গাঢ় হলুদ স্ক্রিপ্টিং কার্যকলাপ প্রতিনিধিত্ব করে, এবং বেগুনি ইভেন্ট রেন্ডারিং কার্যকলাপ প্রতিনিধিত্ব করে। এই গাঢ় হলুদ এবং বেগুনি ইভেন্টগুলি সমস্ত রেকর্ডিং জুড়ে সামঞ্জস্যপূর্ণ।
লম্বা টাস্কগুলিও একটি লাল ত্রিভুজ দিয়ে হাইলাইট করা হয় এবং 50 মিলিসেকেন্ডের বেশি অংশের সাথে লাল রঙে ছায়া দেওয়া হয়:
এই উদাহরণে, টাস্কটি 400 মিলিসেকেন্ডের বেশি সময় নিয়েছে, তাই শেষ 350 মিলিসেকেন্ডের প্রতিনিধিত্বকারী অংশটি লাল রঙে শেড করা হয়েছে, যখন প্রাথমিক 50 মিলিসেকেন্ড নয়।
অতিরিক্তভাবে, প্রধান ট্র্যাক profile() এবং profileEnd() কনসোল ফাংশনগুলির সাথে শুরু হওয়া এবং বন্ধ হওয়া CPU প্রোফাইলগুলির তথ্য দেখায়।
JavaScript কলের বিস্তারিত ফ্লেম চার্ট লুকানোর জন্য, JavaScript নমুনা নিষ্ক্রিয় করুন দেখুন। যখন JS নমুনাগুলি অক্ষম করা হয়, আপনি শুধুমাত্র উচ্চ-স্তরের ইভেন্টগুলি দেখতে পান যেমন Event (click) এবং Function Call ৷
ট্র্যাক ইভেন্ট initiators
প্রধান ট্র্যাক তীরগুলি দেখাতে পারে যা নিম্নলিখিত সূচনাকারীদের এবং তাদের দ্বারা সৃষ্ট ঘটনাগুলিকে সংযুক্ত করে:
- শৈলী বা বিন্যাস অবৈধকরণ -> শৈলী বা বিন্যাস পুনরায় গণনা করুন
- অ্যানিমেশন ফ্রেম অনুরোধ -> অ্যানিমেশন ফ্রেম ফায়ার করা হয়েছে
- নিষ্ক্রিয় কলব্যাকের অনুরোধ করুন -> ফায়ার আইডল কলব্যাক
- টাইমার ইনস্টল করুন -> টাইমার ফায়ারড
- ওয়েবসকেট তৈরি করুন -> পাঠান... এবং ওয়েবসকেট হ্যান্ডশেক গ্রহণ করুন বা ওয়েবসকেট ধ্বংস করুন
তীরগুলি দেখতে, শিখা চার্টে একটি সূচনাকারী বা এটি যে ঘটনাটি ঘটিয়েছে তা সন্ধান করুন এবং এটি নির্বাচন করুন৷
নির্বাচিত হলে, সারাংশ ট্যাব ইনিশিয়েটরদের লিঙ্কের জন্য ইনিশিয়েটর দেখায় এবং তাদের দ্বারা সৃষ্ট ইভেন্টগুলির জন্য লিঙ্ক দ্বারা শুরু করা হয় । সংশ্লিষ্ট ইভেন্টগুলির মধ্যে লাফ দিতে তাদের ক্লিক করুন।
শিখা চার্টে ফাংশন এবং তাদের সন্তানদের লুকান
প্রধান থ্রেডে শিখা চার্টটি ডিক্লাটার করতে, আপনি নির্বাচিত ফাংশন বা তাদের বাচ্চাদের লুকিয়ে রাখতে পারেন:
প্রধান ট্র্যাকে, একটি ফাংশনে ডান-ক্লিক করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন বা সংশ্লিষ্ট শর্টকাট টিপুন:
- লুকান ফাংশন (
H) - শিশুদের লুকান (
C) - পুনরাবৃত্তি শিশুদের লুকান (
R) - বাচ্চাদের রিসেট করুন (
U) - ট্রেস রিসেট করুন (
T) - তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন (
I)
একটি ড্রপ-ডাউন বোতাম লুকানো শিশুদের সাথে ফাংশন নামের পাশে প্রদর্শিত হবে।
- লুকান ফাংশন (
লুকানো শিশুদের সংখ্যা দেখতে, ড্রপ-ডাউন বোতামের উপর হোভার করুন।
লুকানো শিশুদের বা পুরো ফ্লেম চার্টের সাথে একটি ফাংশন রিসেট করতে, ফাংশনটি নির্বাচন করুন এবং
Uটিপুন বা যেকোনো ফাংশনে ডান-ক্লিক করুন এবং যথাক্রমে রিসেট ট্রেস নির্বাচন করুন।
শিখা চার্টে স্ক্রিপ্ট উপেক্ষা করুন
উপেক্ষা তালিকায় একটি স্ক্রিপ্ট যোগ করতে, চার্টে একটি স্ক্রিপ্টে ডান-ক্লিক করুন এবং তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।
চার্ট উপেক্ষা করা স্ক্রিপ্টগুলিকে ভেঙে দেয়, সেগুলিকে উপেক্ষার তালিকায় চিহ্নিত করে এবং সেটিংস > উপেক্ষা তালিকাতে কাস্টম বর্জন নিয়মগুলিতে যোগ করে। উপেক্ষা করা স্ক্রিপ্টগুলি সংরক্ষণ করা হয় যতক্ষণ না আপনি সেগুলিকে ট্রেস থেকে বা কাস্টম বর্জনের নিয়ম থেকে সরিয়ে না দেন৷
একটি টেবিলে কার্যকলাপ দেখুন
একটি পৃষ্ঠা রেকর্ড করার পরে, কার্যকলাপ বিশ্লেষণ করার জন্য আপনাকে শুধুমাত্র প্রধান ট্র্যাকের উপর নির্ভর করতে হবে না। DevTools কার্যক্রম বিশ্লেষণের জন্য তিনটি সারণী ভিউ প্রদান করে। প্রতিটি দৃশ্য আপনাকে ক্রিয়াকলাপের উপর একটি ভিন্ন দৃষ্টিকোণ দেয়:
- আপনি যখন সবচেয়ে বেশি কাজ করে এমন রুট ক্রিয়াকলাপগুলি দেখতে চান, কল ট্রি ট্যাবটি ব্যবহার করুন৷
- আপনি যখন ক্রিয়াকলাপগুলি দেখতে চান যেখানে সবচেয়ে বেশি সময় সরাসরি ব্যয় হয়েছে, নীচের-উপর ট্যাবটি ব্যবহার করুন৷
- রেকর্ডিংয়ের সময় যে ক্রমানুসারে ক্রিয়াকলাপগুলি ঘটেছে আপনি সেগুলি দেখতে চাইলে ইভেন্ট লগ ট্যাবটি ব্যবহার করুন৷
আপনি যা খুঁজছেন তা দ্রুত খুঁজে পেতে সাহায্য করার জন্য, তিনটি ট্যাবেই ফিল্টার বারের পাশে উন্নত ফিল্টারিংয়ের জন্য বোতাম রয়েছে:
- ম্যাচ কেস ।
- রেগুলার এক্সপ্রেশন ।
- পুরো শব্দ মেলে ।
পারফরম্যান্স প্যানেলের প্রতিটি ট্যাবুলার ভিউ ফাংশন কলের মতো কার্যকলাপের লিঙ্ক দেখায়। আপনাকে ডিবাগ করতে সাহায্য করতে, DevTools সোর্স ফাইলগুলিতে সংশ্লিষ্ট ফাংশন ঘোষণাগুলি খুঁজে পায়। অতিরিক্তভাবে, যদি উপযুক্ত উৎস মানচিত্র উপস্থিত থাকে এবং সক্রিয় থাকে, তাহলে DevTools স্বয়ংক্রিয়ভাবে আসল ফাইলগুলি খুঁজে পায়।
উত্স প্যানেলে একটি উত্স ফাইল খুলতে একটি লিঙ্কে ক্লিক করুন৷
রুট কার্যক্রম
কল ট্রি ট্যাব, বটম-আপ ট্যাব এবং ইভেন্ট লগ বিভাগে উল্লেখ করা রুট অ্যাক্টিভিটি ধারণার একটি ব্যাখ্যা এখানে।
রুট অ্যাক্টিভিটিগুলি হল যা ব্রাউজারকে কিছু কাজ করতে দেয়। উদাহরণস্বরূপ, আপনি যখন একটি পৃষ্ঠায় ক্লিক করেন, তখন ব্রাউজার একটি Event কার্যকলাপকে রুট কার্যকলাপ হিসাবে গুলি করে। সেই Event তখন একটি হ্যান্ডলারকে কার্যকর করতে পারে।
প্রধান ট্র্যাকের শিখা চার্টে, রুট কার্যকলাপ চার্টের শীর্ষে থাকে। কল ট্রি এবং ইভেন্ট লগ ট্যাবে, রুট কার্যকলাপ হল শীর্ষ-স্তরের আইটেম।
রুট কার্যকলাপের উদাহরণের জন্য কল ট্রি ট্যাব দেখুন।
কল ট্রি ট্যাব
কোন রুট ক্রিয়াকলাপগুলি সবচেয়ে বেশি কাজ করে তা দেখতে কল ট্রি ট্যাবটি ব্যবহার করুন৷
কল ট্রি ট্যাব শুধুমাত্র রেকর্ডিংয়ের নির্বাচিত অংশের সময় কার্যকলাপ প্রদর্শন করে। কীভাবে অংশ নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
এই উদাহরণে, অ্যাক্টিভিটি কলামের আইটেমগুলির শীর্ষ-স্তর, যেমন Event , Paint এবং Composite Layers হল রুট অ্যাক্টিভিটি৷ নেস্টিং কল স্ট্যাকের প্রতিনিধিত্ব করে। এই উদাহরণে, Event Function Call কারণ হয়েছে, যার কারণে button.addEventListener হয়েছে, যার কারণে b , ইত্যাদি।
সেল্ফ টাইম সরাসরি সেই ক্রিয়াকলাপে ব্যয় করা সময়কে প্রতিনিধিত্ব করে। টোটাল টাইম সেই ক্রিয়াকলাপে বা তার সন্তানদের মধ্যে কাটানো সময়ের প্রতিনিধিত্ব করে।
সেই কলাম অনুসারে টেবিলটি সাজানোর জন্য সেল্ফ টাইম , মোট সময় বা কার্যকলাপে ক্লিক করুন।
কার্যকলাপের নাম অনুসারে ইভেন্টগুলি ফিল্টার করতে ফিল্টার বক্সটি ব্যবহার করুন৷
ডিফল্টরূপে গ্রুপিং মেনু নো গ্রুপিং এ সেট করা আছে। বিভিন্ন মানদণ্ডের উপর ভিত্তি করে কার্যকলাপ টেবিল সাজানোর জন্য গ্রুপিং মেনু ব্যবহার করুন।
সবচেয়ে ভারী স্ট্যাক দেখান ক্লিক করুন 
অ্যাক্টিভিটি টেবিলের ডানদিকে আরেকটি টেবিল প্রকাশ করতে। সবচেয়ে ভারী স্ট্যাক টেবিলটি পূরণ করতে একটি কার্যকলাপে ক্লিক করুন। সবচেয়ে ভারী স্ট্যাক টেবিলটি আপনাকে দেখায় যে নির্বাচিত ক্রিয়াকলাপের কোন শিশুরা কার্যকর করতে সবচেয়ে বেশি সময় নিয়েছে।
বটম-আপ ট্যাব
কোন ক্রিয়াকলাপগুলি সরাসরি সামগ্রিকভাবে সবচেয়ে বেশি সময় নিয়েছে তা দেখতে নীচে-উপর ট্যাবটি ব্যবহার করুন৷
বটম-আপ ট্যাব শুধুমাত্র রেকর্ডিংয়ের নির্বাচিত অংশের সময় কার্যকলাপ প্রদর্শন করে। কীভাবে অংশ নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
এই উদাহরণের প্রধান ট্র্যাক ফ্লেম চার্টে, আপনি দেখতে পাচ্ছেন যে wait() তদনুসারে, বটম-আপ ট্যাবে শীর্ষ কার্যকলাপ হল wait । ফ্লেম চার্টে, wait জন্য কলের নীচে হলুদটি আসলে হাজার হাজার Minor GC কল। তদনুসারে, আপনি দেখতে পারেন যে নীচের-আপ ট্যাবে, পরবর্তী সবচেয়ে ব্যয়বহুল কার্যকলাপটি হল Minor GC ।
সেলফ টাইম কলামটি তার সমস্ত ঘটনা জুড়ে সরাসরি সেই কার্যকলাপে ব্যয় করা সমষ্টিগত সময়ের প্রতিনিধিত্ব করে।
টোটাল টাইম কলাম সেই ক্রিয়াকলাপে ব্যয় করা সমষ্টিগত সময়ের প্রতিনিধিত্ব করে বা এর যে কোনো শিশু।
ইভেন্ট লগ ট্যাব
রেকর্ডিংয়ের সময় যে ক্রমে ক্রিয়াকলাপগুলি ঘটেছে তা দেখতে ইভেন্ট লগ ট্যাবটি ব্যবহার করুন৷
ইভেন্ট লগ ট্যাব শুধুমাত্র রেকর্ডিংয়ের নির্বাচিত অংশের সময় কার্যকলাপ প্রদর্শন করে। কীভাবে অংশ নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
স্টার্ট টাইম কলামটি সেই বিন্দুকে উপস্থাপন করে যেখানে সেই কার্যকলাপটি শুরু হয়েছিল, রেকর্ডিং শুরুর সাথে সম্পর্কিত। এই উদাহরণে নির্বাচিত আইটেমের জন্য 1573.0 ms শুরুর সময় মানে রেকর্ডিং শুরু হওয়ার পরে 1573 ms কার্যকলাপ শুরু হয়েছে৷
সেল্ফ টাইম কলাম সেই ক্রিয়াকলাপে সরাসরি ব্যয় করা সময়কে প্রতিনিধিত্ব করে।
টোটাল টাইম কলামগুলি সেই ক্রিয়াকলাপে বা এর যে কোনও শিশুর মধ্যে সরাসরি ব্যয় করা সময়কে উপস্থাপন করে।
স্টার্ট টাইম , সেল্ফ টাইম , বা টোটাল টাইম ক্লিক করুন সেই কলাম অনুসারে টেবিল সাজানোর জন্য।
নাম অনুসারে কার্যকলাপ ফিল্টার করতে ফিল্টার বক্স ব্যবহার করুন।
1 ms বা 15 ms-এর কম সময় নেয় এমন যেকোনো ক্রিয়াকলাপ ফিল্টার করতে সময়কাল মেনু ব্যবহার করুন৷ ডিফল্টরূপে সময়কাল মেনুটি সকলে সেট করা থাকে, যার অর্থ সমস্ত কার্যকলাপ দেখানো হয়।
এই বিভাগগুলি থেকে সমস্ত ক্রিয়াকলাপ ফিল্টার করতে লোডিং , স্ক্রিপ্টিং , রেন্ডারিং বা পেইন্টিং চেকবক্সগুলি অক্ষম করুন৷
সময় দেখুন
টাইমিং ট্র্যাকে, গুরুত্বপূর্ণ মার্কারগুলি দেখুন যেমন:
- প্রথম পেইন্ট (FP)
- ফার্স্ট কনটেন্টফুল পেইন্ট (FCP)
- সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)
- DOMContentLoaded Event (DCL)
- অনলোড ইভেন্ট (L)
- আপনার কাস্টম
performance.mark()কল। টুলটিপ সহ একটি স্বতন্ত্র চিহ্ন নীচে 813.44 ms এ দেখানো হয়েছে, যা JavaScript চালানো শুরু করতে লেবেলযুক্ত। - আপনার কাস্টম
performance.measure()কল। একটি হলুদ স্প্যান নীচে দেখানো হয়েছে, স্লো ইন্টারঅ্যাকশন লেবেলযুক্ত।
সারাংশ ট্যাবে আরও বিশদ দেখতে একটি মার্কার নির্বাচন করুন, এর টাইমস্ট্যাম্প, মোট সময়, স্ব-সময় এবং detail বস্তু সহ। performance.mark() এবং performance.measure() কলের জন্য, ট্যাবটি স্ট্যাক ট্রেসও দেখায়।
মিথস্ক্রিয়া দেখুন
সম্ভাব্য প্রতিক্রিয়াশীলতার সমস্যাগুলি ট্র্যাক করতে ইন্টারঅ্যাকশন ট্র্যাকে ব্যবহারকারীর মিথস্ক্রিয়া দেখুন৷
মিথস্ক্রিয়া দেখতে:
- DevTools খুলুন , উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ।
- পারফরম্যান্স প্যানেল খুলুন এবং একটি রেকর্ডিং শুরু করুন ।
- একটি উপাদান (কফি) ক্লিক করুন এবং রেকর্ডিং বন্ধ করুন.
- টাইমলাইনে ইন্টারঅ্যাকশন ট্র্যাক খুঁজুন।
এই উদাহরণে, ইন্টারঅ্যাকশন ট্র্যাক পয়েন্টার ইন্টারঅ্যাকশন দেখায়। ইন্টারঅ্যাকশনে কাঁকড়া থাকে যা প্রক্রিয়াকরণের সময়সীমাতে ইনপুট এবং উপস্থাপনা বিলম্ব নির্দেশ করে। ইনপুট বিলম্ব, প্রক্রিয়াকরণের সময় এবং উপস্থাপনা বিলম্ব সহ একটি টুলটিপ দেখতে ইন্টারঅ্যাকশনের উপর হোভার করুন।
ইন্টারঅ্যাকশন ট্র্যাকটি সারাংশ ট্যাবে এবং হোভারের একটি টুলটিপে 200 মিলিসেকেন্ডের বেশি ইন্টারঅ্যাকশনের জন্য ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) সতর্কতাও দেখায়:
ইন্টারঅ্যাকশন ট্র্যাক উপরের ডান কোণায় একটি লাল ত্রিভুজ সহ 200 মিলিসেকেন্ডের বেশি ইন্টারঅ্যাকশন চিহ্নিত করে।
GPU কার্যকলাপ দেখুন
GPU বিভাগে GPU কার্যকলাপ দেখুন।
রাস্টার কার্যকলাপ দেখুন
থ্রেড পুল বিভাগে রাস্টার কার্যকলাপ দেখুন।
প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করুন (FPS)
DevTools প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করার অনেক উপায় প্রদান করে:
- একটি নির্দিষ্ট ফ্রেম কত সময় নেয় তা দেখতে ফ্রেম বিভাগটি ব্যবহার করুন।
- পৃষ্ঠাটি চলার সাথে সাথে FPS এর একটি বাস্তব সময়ের অনুমানের জন্য FPS মিটার ব্যবহার করুন৷ FPS মিটার দিয়ে রিয়েল টাইমে প্রতি সেকেন্ডে ফ্রেম দেখুন ।
ফ্রেম বিভাগ
ফ্রেম বিভাগ আপনাকে বলে যে একটি নির্দিষ্ট ফ্রেমে ঠিক কত সময় লেগেছে।
এটি সম্পর্কে আরও তথ্য সহ একটি টুলটিপ দেখতে একটি ফ্রেমের উপর হোভার করুন৷
এই উদাহরণটি একটি টুলটিপ দেখায় যখন আপনি একটি ফ্রেমের উপর ঘোরান।
ফ্রেম বিভাগ চার ধরনের ফ্রেম দেখাতে পারে:
- নিষ্ক্রিয় ফ্রেম (সাদা) । কোনো পরিবর্তন নেই।
- ফ্রেম (সবুজ) । প্রত্যাশিত এবং সময়ে রেন্ডার করা হয়েছে।
- আংশিকভাবে উপস্থাপিত ফ্রেম (একটি বিরল প্রশস্ত ড্যাশ-লাইন প্যাটার্ন সহ হলুদ)। Chrome সময়মতো অন্তত কিছু ভিজ্যুয়াল আপডেট রেন্ডার করার জন্য যথাসাধ্য চেষ্টা করেছে। উদাহরণস্বরূপ, যদি রেন্ডারার প্রক্রিয়ার মূল থ্রেডের কাজ (ক্যানভাস অ্যানিমেশন) দেরিতে হয় তবে কম্পোজিটর থ্রেড (স্ক্রলিং) সময় মতো হয়।
- ড্রপড ফ্রেম (একটি ঘন সলিড লাইন প্যাটার্ন সহ লাল)। Chrome যুক্তিসঙ্গত সময়ে ফ্রেম রেন্ডার করতে পারে না।
এই উদাহরণটি একটি টুলটিপ দেখায় যখন আপনি একটি আংশিকভাবে উপস্থাপিত ফ্রেমের উপর হোভার করেন।
সারাংশ ট্যাবে ফ্রেম সম্পর্কে আরও তথ্য দেখতে একটি ফ্রেমে ক্লিক করুন। DevTools নির্বাচিত ফ্রেমটিকে নীল রঙে রূপরেখা দেয়।
নেটওয়ার্ক অনুরোধ দেখুন
পারফরম্যান্স রেকর্ডিংয়ের সময় নেটওয়ার্ক অনুরোধগুলির একটি জলপ্রপাত দেখতে নেটওয়ার্ক বিভাগটি প্রসারিত করুন।
নেটওয়ার্ক ট্র্যাক নামের পাশে, রঙ-কোডেড অনুরোধের ধরন সহ একটি কিংবদন্তি রয়েছে।
রেন্ডার ব্লক করার অনুরোধগুলি উপরের ডানদিকে একটি লাল ত্রিভুজ দিয়ে চিহ্নিত করা হয়েছে।
এর সাথে একটি টুলটিপ দেখতে একটি অনুরোধের উপর হোভার করুন:
- অনুরোধের URL এবং এটি কার্যকর করতে মোট সময় লেগেছে৷
- অগ্রাধিকার বা অগ্রাধিকারের পরিবর্তন, উদাহরণস্বরূপ,
Medium -> High। - অনুরোধ
Render blockingকিনা। - অনুরোধের সময়গুলির একটি ভাঙ্গন, পরে বর্ণিত হয়েছে৷
যখন আপনি একটি অনুরোধে ক্লিক করেন, নেটওয়ার্ক ট্র্যাক তার সূচনাকারী থেকে অনুরোধে একটি তীর আঁকে।
অতিরিক্তভাবে, পারফরম্যান্স প্যানেল আপনাকে অনুরোধ সম্পর্কে আরও তথ্য সহ সারাংশ ট্যাব দেখায়, যার মধ্যে প্রাথমিক অগ্রাধিকার এবং (চূড়ান্ত) অগ্রাধিকার ক্ষেত্রগুলি সহ কিন্তু সীমাবদ্ধ নয়। তাদের মান ভিন্ন হলে, রেকর্ডিংয়ের সময় অনুরোধের আনার অগ্রাধিকার পরিবর্তিত হয়েছে। আরও তথ্যের জন্য, ফেচ অগ্রাধিকার API এর সাথে সম্পদ লোডিং অপ্টিমাইজ করা দেখুন।
সারাংশ ট্যাবটি অনুরোধের সময়গুলির একটি ভাঙ্গনও দেখায়।
www.google.com এর অনুরোধটি বাম দিকে একটি লাইন ( |– ), মাঝখানে একটি অন্ধকার অংশ এবং একটি হালকা অংশ সহ একটি বার এবং ডানদিকে একটি লাইন ( –| ) দ্বারা প্রতিনিধিত্ব করা হয়৷
আপনি নেটওয়ার্ক ট্যাবে অন্য টাইমিং ব্রেকডাউন খুঁজে পেতে পারেন। নেটওয়ার্ক ট্র্যাকের অনুরোধে ডান-ক্লিক করুন বা সারাংশ ট্যাবে এর URL এবং নেটওয়ার্ক প্যানেলে প্রকাশ করুন-এ ক্লিক করুন। DevTools আপনাকে নেটওয়ার্ক প্যানেলে নিয়ে যায় এবং সংশ্লিষ্ট অনুরোধটি নির্বাচন করে। এর টাইমিং ট্যাব খুলুন।
এই দুটি ব্রেকডাউন একে অপরের সাথে কীভাবে ম্যাপ করে তা এখানে:
- বাম লাইন (
|–) ইভেন্টেরConnection startগ্রুপ পর্যন্ত সবকিছু, অন্তর্ভুক্ত। অন্য কথায়,Request Sentআগে এটি সবকিছু। - বারের হালকা অংশটি
Request sentএবংWaiting for server response। - বারের অন্ধকার অংশ হল
Content download। - সঠিক লাইন (
–|) হল মূল থ্রেডের জন্য অপেক্ষা করা সময়। নেটওয়ার্ক > টাইমিং ট্যাব এটি দেখায় না।
মেমরি মেট্রিক্স দেখুন
শেষ রেকর্ডিং থেকে মেমরি মেট্রিক্স দেখতে মেমরি চেকবক্স সক্রিয় করুন।
DevTools সারাংশ ট্যাবের উপরে একটি নতুন মেমরি চার্ট প্রদর্শন করে। NET চার্টের নীচে একটি নতুন চার্টও রয়েছে, যার নাম HEAP । HEAP চার্ট মেমরি চার্টে JS হিপ লাইনের মতো একই তথ্য প্রদান করে।
এই উদাহরণটি সারাংশ ট্যাবের উপরে মেমরি মেট্রিক্স দেখায়।
চার্ট মানচিত্রের রঙিন রেখাগুলি চার্টের উপরে রঙিন চেকবক্সগুলিতে। চার্ট থেকে সেই বিভাগটি লুকানোর জন্য একটি চেকবক্স অক্ষম করুন৷
চার্ট শুধুমাত্র নির্বাচিত রেকর্ডিং এর অঞ্চল প্রদর্শন করে। আগের উদাহরণে, মেমরি চার্টটি রেকর্ডিং শুরু করার জন্য শুধুমাত্র মেমরি ব্যবহার দেখায়, প্রায় 1000ms চিহ্ন পর্যন্ত।
রেকর্ডিংয়ের একটি অংশের সময়কাল দেখুন
নেটওয়ার্ক বা প্রধানের মতো একটি বিভাগ বিশ্লেষণ করার সময়, কখনও কখনও আপনার নির্দিষ্ট ইভেন্টে কত সময় লেগেছিল তার আরও সুনির্দিষ্ট অনুমান প্রয়োজন। শিফট ধরে রাখুন, ক্লিক করুন এবং ধরে রাখুন এবং রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে বাম বা ডানে টেনে আনুন। আপনার নির্বাচনের নীচে, DevTools সেই অংশটি কত সময় নিয়েছে তা দেখায়।
এই উদাহরণে, নির্বাচিত অংশের নীচে 488.53ms টাইমস্ট্যাম্পটি নির্দেশ করে যে অংশটি কত সময় নিয়েছে৷
একটি স্ক্রিনশট দেখুন
কিভাবে স্ক্রিনশট সক্ষম করতে হয় তা শিখতে রেকর্ডিং করার সময় ক্যাপচার স্ক্রিনশট দেখুন।
রেকর্ডিংয়ের সেই মুহুর্তে পৃষ্ঠাটি কেমন ছিল তার একটি স্ক্রিনশট দেখতে টাইমলাইন ওভারভিউয়ের উপর হোভার করুন। টাইমলাইন ওভারভিউ হল সেই বিভাগ যাতে CPU , FPS , এবং NET চার্ট থাকে।
এছাড়াও আপনি ফ্রেম বিভাগে একটি ফ্রেমে ক্লিক করে স্ক্রিনশট দেখতে পারেন। DevTools সারাংশ ট্যাবে স্ক্রিনশটের একটি ছোট সংস্করণ প্রদর্শন করে।
এই উদাহরণটি সারাংশ ট্যাবে 195.5ms ফ্রেমের স্ক্রিনশট দেখায় যখন আপনি এটিকে ফ্রেম বিভাগে ক্লিক করেন।
স্ক্রিনশটে জুম বাড়াতে সারাংশ ট্যাবে থাম্বনেইলে ক্লিক করুন।
আপনি সারাংশ ট্যাবে এটির থাম্বনেইল ক্লিক করার পরে এই উদাহরণটি একটি জুম-ইন স্ক্রিনশট দেখায়।
স্তর তথ্য দেখুন
একটি ফ্রেম সম্পর্কে উন্নত স্তর তথ্য দেখতে:
- উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন ৷
- ফ্রেম বিভাগে একটি ফ্রেম নির্বাচন করুন। DevTools ইভেন্ট লগ ট্যাবের পাশে, নতুন লেয়ার ট্যাবে তার স্তর সম্পর্কে তথ্য প্রদর্শন করে।
ডায়াগ্রামে এটি হাইলাইট করতে একটি স্তরের উপর হভার করুন।
এই উদাহরণটি দেখায় যে স্তরটি #39 হাইলাইট করা হয়েছে যখন আপনি এটির উপর ঘোরান।
চিত্রটি সরাতে:
- প্যান মোডে ক্লিক করুন
X এবং Y অক্ষ বরাবর অগ্রসর হতে। - Rotate Mode এ ক্লিক করুন
Z অক্ষ বরাবর ঘোরানো। - রিসেট ট্রান্সফর্ম ক্লিক করুন
ডায়াগ্রামটিকে তার আসল অবস্থানে রিসেট করতে।
কর্মে স্তর বিশ্লেষণ দেখুন:
পেইন্ট প্রোফাইলার দেখুন
একটি পেইন্ট ইভেন্ট সম্পর্কে উন্নত তথ্য দেখতে:
- উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন ৷
- প্রধান ট্র্যাকে একটি পেইন্ট ইভেন্ট নির্বাচন করুন।
রেন্ডারিং ট্যাব দিয়ে রেন্ডারিং কর্মক্ষমতা বিশ্লেষণ করুন
আপনার পৃষ্ঠার রেন্ডারিং কর্মক্ষমতা কল্পনা করতে সাহায্য করার জন্য রেন্ডারিং ট্যাবের বৈশিষ্ট্যগুলি ব্যবহার করুন৷
FPS মিটার দিয়ে রিয়েল টাইমে প্রতি সেকেন্ডে ফ্রেম দেখুন
ফ্রেম রেন্ডারিং পরিসংখ্যান হল একটি ওভারলে যা আপনার ভিউপোর্টের উপরের-ডানদিকে প্রদর্শিত হয়। পৃষ্ঠাটি চলার সাথে সাথে এটি FPS এর একটি বাস্তব সময়ের অনুমান প্রদান করে।
ফ্রেম রেন্ডারিং পরিসংখ্যান দেখুন।
পেইন্ট ফ্ল্যাশিংয়ের সাথে রিয়েল টাইমে পেইন্টিং ইভেন্টগুলি দেখুন
পৃষ্ঠায় সমস্ত পেইন্ট ইভেন্টের একটি রিয়েল টাইম ভিউ পেতে পেইন্ট ফ্ল্যাশিং ব্যবহার করুন।
পেইন্ট ফ্ল্যাশিং দেখুন।
লেয়ার বর্ডার সহ স্তরগুলির একটি ওভারলে দেখুন৷
পৃষ্ঠার উপরে স্তরের সীমানা এবং টাইলগুলির একটি ওভারলে দেখতে লেয়ার বর্ডার ব্যবহার করুন।
লেয়ার সীমানা দেখুন।
রিয়েল টাইমে স্ক্রোল কর্মক্ষমতা সমস্যা খুঁজুন
পৃষ্ঠার এমন উপাদানগুলি সনাক্ত করতে স্ক্রলিং পারফরম্যান্স ইস্যুগুলি ব্যবহার করুন যেখানে স্ক্রলিং সম্পর্কিত ইভেন্ট শ্রোতা রয়েছে যা পৃষ্ঠার কার্যক্ষমতার ক্ষতি করতে পারে৷ DevTools টিলের মধ্যে সম্ভাব্য-সমস্যামূলক উপাদানগুলির রূপরেখা দেয়।
স্ক্রলিং কর্মক্ষমতা সমস্যা দেখুন.