এই পরিচিত শোনাচ্ছে? আপনি Chrome DevTools-এ একটি পারফরম্যান্স সমস্যা ডিবাগ করছেন, কিন্তু পারফরম্যান্স প্যানেলে প্রচুর পরিমাণে তথ্য শুধুমাত্র সবচেয়ে প্রাসঙ্গিক এবং কার্যকরী অংশগুলিতে ফোকাস করা কঠিন করে তোলে। টাইমলাইনের দৈর্ঘ্য, ফ্লেম চার্টের গভীরতা এবং ডেটার বিভিন্ন ট্র্যাকের প্রস্থের মধ্যে, এটি নেভিগেট করা একটি চ্যালেঞ্জ হতে পারে। পারফরম্যান্স প্যানেল যতটা অবিশ্বাস্যভাবে শক্তিশালী, তার ব্যবহারযোগ্যতা ব্যবহারযোগ্যতার মূল্যে আসা উচিত নয়!
Chrome-এর পারফরম্যান্স টুলিং উন্নত করার জন্য আমাদের উদ্যোগের অংশ হিসাবে, আমরা সম্প্রতি তিনটি নতুন বৈশিষ্ট্য চালু করেছি যার লক্ষ্য তথ্যের ঘনত্ব হ্রাস করা এবং ডেভেলপারদের তাদের কর্মপ্রবাহ কাস্টমাইজ করতে সহায়তা করা:
এই পোস্টে, আমরা এই বৈশিষ্ট্যগুলির প্রতিটিকে ঘনিষ্ঠভাবে দেখব এবং দেখাব যে আপনি কীভাবে শুধুমাত্র সবচেয়ে গুরুত্বপূর্ণ তথ্যের উপর ফোকাস করতে সেগুলি ব্যবহার করতে পারেন৷
টাইমলাইনের অপ্রাসঙ্গিক অংশ লুকান
ওয়েব পারফরম্যান্স মিলিসেকেন্ডের স্কেলে কাজ করে, তাই আপনার পারফরম্যান্স রেকর্ডিং মাত্র কয়েক সেকেন্ডের হলেও, আপনার জায়গা হারানোর যথেষ্ট সুযোগ রয়েছে।
Chrome 122-এ, আমরা ব্রেডক্রাম্ব তৈরি করার ক্ষমতা যোগ করেছি। এই বৈশিষ্ট্যটি আপনাকে টাইমলাইনের সীমানা ক্ল্যাম্প করতে দেয় যাতে আপনি শুধুমাত্র আপনার দ্বারা সেট করা আগ্রহের এলাকার ভিতরে জুম বা প্যান করতে সক্ষম হবেন। এইভাবে টাইমলাইন সীমাবদ্ধ করা বিশেষভাবে কার্যকর হতে পারে যদি আপনি প্রতিক্রিয়াশীলতার সমস্যাগুলি ডিবাগ করার চেষ্টা করছেন, উদাহরণস্বরূপ, যাতে আপনি একটি একক মিথস্ক্রিয়া বা সমস্যাযুক্ত দীর্ঘ টাস্কে আপনার মনোযোগ কেন্দ্রীভূত করতে পারেন।
পূর্ববর্তী স্ক্রিনশটটি টাইমলাইন ওভারভিউয়ের একটি ক্লোজ-আপ দেখায়, যা স্ক্রিপ্ট এক্সিকিউশন এবং উপস্থাপনা কাজের মতো প্রধান থ্রেড অ্যাক্টিভিটি কল্পনা করে। আপনি যখন এটির উপর পয়েন্টারটি ধরে রাখেন, তখন একটি নতুন বোতাম উপস্থিত হয় যা বর্তমান উইন্ডোতে টাইমলাইনের সীমানা নির্ধারণ করবে। বোতামটি টাইম উইন্ডোর প্রস্থ, মিলিসেকেন্ডে এবং আইকন দ্বারা লেবেলযুক্ত। ব্রেডক্রাম্বগুলি টাইমলাইন ওভারভিউয়ের উপরে অবস্থিত এবং প্রতিটিকে তার টাইম উইন্ডোর আকার দ্বারা লেবেল করা হয়েছে।
এই বৈশিষ্ট্যটি ব্যবহার করতে:
- জুম করুন এবং আগ্রহের এলাকায় টাইমলাইন প্যান করুন।
- টাইমলাইন ক্ল্যাম্প করতে এবং একটি ব্রেডক্রাম্ব সেট করতে টাইমলাইন ওভারভিউতে ম্যাগনিফাইং গ্লাস আইকন ক্লিক করুন।
- আগ্রহের নেস্টেড এলাকায় জুম বাড়াতে প্রয়োজন অনুযায়ী পুনরাবৃত্তি করুন।
- আগের আগ্রহের ক্ষেত্র বা টাইমলাইনের সম্পূর্ণ পরিসরে ফিরে যেতে ব্রেডক্রাম্বগুলিতে ক্লিক করুন।
টাইমলাইন ট্রিম করা নিশ্চিত করতে সাহায্য করে যে আপনি কখনই ভুলবশত সীমার বাইরে টাইমলাইনের অপ্রাসঙ্গিক অংশে স্ক্রোল করবেন না। আপনার যখন প্রয়োজন হবে, আপনি আবার জুম আউট করতে ব্রেডক্রাম্বগুলিতে ক্লিক করতে পারেন। আরেকটি সুবিধা হল যে টাইমলাইন ওভারভিউ নিম্নলিখিত ট্র্যাকগুলির সাথে সারিবদ্ধ থাকবে। এটি জোরপূর্বক রিফ্লোগুলির মতো পারফরম্যান্সের সুযোগগুলি সনাক্ত করা এবং শিখা চার্টে তাদের মূল কারণ সনাক্ত করা অনেক সহজ করে তুলতে পারে।
শিখা চার্টের অপ্রাসঙ্গিক অংশ লুকান
মূল থ্রেড কার্যকলাপ বিশ্লেষণ কোন ছোট কৃতিত্ব. পারফরম্যান্স প্যানেলের এই অংশটি ফ্লেম চার্ট হিসাবে পরিচিত, কারণ কল স্ট্যাকগুলি কত লম্বা এবং স্পাইন্ডলি হতে পারে৷ কিছু চরম ক্ষেত্রে, এই স্ট্যাকগুলি এতটাই অপ্রীতিকর হতে পারে যে পুরো জিনিসটি বোঝানো এবং আপনি যা অপ্টিমাইজ করার চেষ্টা করছেন তার উপর ফোকাস করা কঠিন।
Chrome 124 থেকে শুরু করে, আপনি ফ্লেম চার্টে ঠিক কোন এন্ট্রিগুলি লুকিয়ে রাখতে হবে তা কাস্টমাইজ করতে পারেন, যাতে আপনি সবচেয়ে কার্যকরী তথ্যের উপর ফোকাস করতে পারেন৷
আপনি যখন শিখা চার্টের একটি ফাংশনে ডান-ক্লিক করেন, তখন একটি প্রসঙ্গ মেনু প্রদর্শিত হয় যেখানে এন্ট্রি লুকানোর জন্য বেশ কয়েকটি বিকল্প রয়েছে:
- ফাংশন লুকান : শিখা চার্ট থেকে নির্বাচিত ফাংশনটি সরান। এর বাচ্চারা এর অভিভাবক ফাংশনের সাথে সাথেই উপস্থিত হতে চলে যাবে।
- শিশুদের লুকান : নির্বাচিত ফাংশনে শিখা চার্টটি ছাঁটাই করুন, এর সমস্ত শিশুদের লুকিয়ে রাখুন।
- পুনরাবৃত্তি শিশুদের লুকান : বাকী ফ্লেম চার্ট থেকে নির্বাচিত ফাংশনের সমস্ত দৃষ্টান্ত সরান।
একটি ফাংশন নির্বাচন করা হলে আপনি ব্যবহার করতে পারেন এমন বেশ কয়েকটি সহায়ক কীবোর্ড শর্টকাট রয়েছে:
- H : নির্বাচিত ফাংশন লুকান
- সি : নির্বাচিত ফাংশনের বাচ্চাদের লুকান
- R : পরে স্ট্যাকের মধ্যে নির্বাচিত ফাংশনের উদাহরণ লুকান'
- U : নির্বাচিত ফাংশনের লুকানো শিশুদের দেখান
স্থায়ীভাবে অপ্রাসঙ্গিক স্ক্রিপ্ট লুকান
তালিকা উপেক্ষা করার জন্য স্ক্রিপ্ট যোগ করুন বিকল্পটি শিখা চার্ট থেকে নির্বাচিত ফাংশন লুকিয়ে রাখে, সেইসাথে একই স্ক্রিপ্ট ফাইলের মধ্যে সংজ্ঞায়িত অন্যান্য সমস্ত ফাংশন । স্ক্রিপ্টটি উপেক্ষা তালিকাতেও যোগ করা হয়েছে, যা DevTools ডিবাগার ফাংশনগুলিকে ধাপে ধাপে এবং স্ক্রিপ্ট থেকে উদ্ভূত ব্যতিক্রমগুলিকে উপেক্ষা করতে ব্যবহার করে।
উপেক্ষা তালিকায় যোগ করা স্ক্রিপ্টগুলি স্থির থাকে, তাই সেগুলি নতুন ট্রেসে ফ্লেম চার্ট থেকে লুকানো থাকবে। আপনার নিয়ন্ত্রণের বাইরের স্ক্রিপ্টগুলি উপেক্ষা তালিকার জন্য ভাল প্রার্থী হবে। অন্যদিকে, স্বতন্ত্র ফাংশন লুকানো বর্তমান ট্রেসের জন্য অস্থায়ী এবং আরও পরিস্থিতি-নির্ভর। উদাহরণস্বরূপ, আপনি ট্রেসটির সাথে কাজ করা সহজ করার জন্য পুনরাবৃত্ত ফাংশন কলগুলির একটি কষ্টকর স্ট্যাক লুকিয়ে রাখতে চাইতে পারেন।
ফ্লেম চার্টে উপেক্ষা করার তালিকা বা অন্য কোন লুকানো ফাংশনগুলিকে প্রত্যাবর্তন করতে, আপনি প্রসঙ্গ মেনুটি ব্যবহার করে নির্বাচিত ফাংশনের বাচ্চাদের রিসেট করতে পারেন বা পুরো ট্রেস জুড়ে সমস্ত লুকানো ফাংশন রিসেট করতে পারেন। লুকানো শিশুদের সাথে ফাংশন ▼ আইকন দিয়ে টীকা করা হয়, যা ক্লিক করলে বাচ্চাদের রিসেট করে।
যেকোন অপ্রয়োজনীয় গভীরতা এবং জটিলতা যা আপনি শিখা চার্ট থেকে সরিয়ে নিতে পারেন তা এটিকে আরও বেশি ব্যবহারযোগ্য করে তুলবে। যখন প্রয়োজন হয়, আপনি কোন এন্ট্রিগুলি দেখছেন তা কাস্টমাইজ করার ক্ষমতা থাকা একটি ergonomic উন্নতি যা আপনাকে হাতের কাজের জন্য সবচেয়ে গুরুত্বপূর্ণ তথ্যের উপর আপনার মনোযোগ কেন্দ্রীভূত করতে সহায়তা করে।
অপ্রাসঙ্গিক ট্র্যাক লুকান
প্রধান থ্রেড কার্যকলাপ কর্মক্ষমতা প্যানেলের শুধুমাত্র একটি ট্র্যাক তৈরি করে। পারফরম্যান্স প্যানেলের ট্র্যাকগুলি একটি প্রক্রিয়ার কার্যকলাপকে কল্পনা করে এবং সেগুলি ডিবাগিংয়ে সহায়তা করার জন্য একটি সাধারণ টাইমলাইনের সাথে সংযুক্ত থাকে৷ প্রধান ট্র্যাক ছাড়াও, পৃষ্ঠার দ্বারা ব্যবহৃত অন্যান্য সাবফ্রেম, থ্রেড এবং কর্মীদের জন্য পৃথক ট্র্যাক রয়েছে, সেইসাথে নেটওয়ার্ক , ফ্রেম , অ্যানিমেশন এবং ইন্টারঅ্যাকশন ট্র্যাকগুলি। এমনকি আরও বেশি ট্র্যাক IO, GPU এবং কম্পোজিটরের মতো নিম্ন-স্তরের ক্রোম প্রক্রিয়াগুলির কার্যকলাপকে চিহ্নিত করে৷ এটা অনেক তথ্য! এবং এখনও, বেশিরভাগ কর্মক্ষমতা কর্মপ্রবাহের জন্য, আপনি শুধুমাত্র একবারে কয়েকটি ট্র্যাকের তথ্য নিয়ে উদ্বিগ্ন হবেন।
Chrome 125-এর হিসাবে, একটি নতুন কনফিগারেশন মোড রয়েছে যা আপনাকে অপ্রয়োজনীয় ট্র্যাকগুলি লুকিয়ে রাখতে বা আপনার পছন্দ অনুসারে সেগুলিকে পুনরায় সাজাতে দেয়৷ উদাহরণস্বরূপ, যদি আপনি একটি ধীর মিথস্ক্রিয়া অপ্টিমাইজ করে থাকেন তবে আপনি ইন্টারঅ্যাকশন , প্রধান এবং GPU ট্র্যাকগুলি ছাড়া সবকিছু লুকাতে বেছে নিতে পারেন৷
ট্র্যাকগুলি সম্পাদনা করতে, যে কোনও ট্র্যাকের নামের উপর ডান-ক্লিক করুন এবং ট্র্যাকগুলি কনফিগার করুন… নির্বাচন করুন। এটি কনফিগারেশন মোড খোলে, যেখানে আপনি পৃথক ট্র্যাকগুলি দেখাতে, লুকাতে বা পুনর্বিন্যাস করতে সক্ষম হবেন৷ আপনার পছন্দগুলি সংরক্ষণ করতে ট্র্যাকগুলি কনফিগার করা শেষ করুন বাটনে ক্লিক করুন৷
ট্র্যাক কনফিগার করা আপনাকে কার্যপ্রবাহ প্যানেল যেভাবে গুরুত্বপূর্ণ তথ্য উপস্থাপন করে তার নিয়ন্ত্রণে রাখে। আপনি এই সেটিংস ব্যবহার করতে পারেন সম্পর্কহীন প্রসেস থেকে কার্যকলাপ লুকাতে, এবং ট্র্যাকগুলিকে এমনভাবে সরাতে পারেন যা আপনাকে আপনার প্রয়োজনীয় ডেটাতে সবচেয়ে সহজ অ্যাক্সেস দেয়৷
মোড়ক উম্মচন
এই তিনটি বৈশিষ্ট্য আপনার কর্মক্ষমতা কর্মপ্রবাহ কাস্টমাইজ করার জন্য শক্তিশালী নতুন ergonomic নিয়ন্ত্রণ প্রদান করে। এই বৈশিষ্ট্যগুলি ব্যবহার করে এবং শব্দের পরিমাণ হ্রাস করার মাধ্যমে, আপনি যা খুঁজছেন তা খুঁজে পেতে এবং ডেটার বোধগম্য করতে আপনি নিজেকে আরও ভাল অবস্থানে রাখবেন।
কোনটি ভাল কাজ করছে বা কীভাবে আপনার অভিজ্ঞতা উন্নত করা যেতে পারে তা আমরা শুনতে চাই। আপনার কোনো প্রশ্ন বা সাধারণ প্রতিক্রিয়া থাকলে @ChromeDevTools- এ যোগাযোগ করে আমাদের জানান। যদি কিছু কাজ না করে বা আপনার কাছে নতুন বৈশিষ্ট্যগুলির জন্য একটি পরামর্শ থাকে, এই খোলা সমস্যাটিতে একটি মন্তব্য করুন৷
Chrome-এর পারফরম্যান্স টুলিং উন্নত করার জন্য এটি আমাদের উদ্যোগের মাত্র শুরু এবং পারফরম্যান্স প্যানেল ব্যবহার করা সহজ এবং আগের চেয়ে আরও শক্তিশালী করার জন্য আমাদের রান্না করা বাকি সবকিছু শেয়ার করতে আমরা উত্তেজিত। আমরা আমাদের পরবর্তী পোস্টটি প্রকাশ করব যা পরবর্তী ব্যাচের বৈশিষ্ট্যগুলিকে এখানেই Chrome for Developers ব্লগে প্রদর্শন করব৷ ইতিমধ্যে, DevTools এবং Chrome-এ নতুন সবকিছুর সাথে লুপে থাকার জন্য Chrome-এ নতুন কী আছে তা দেখুন।