DevTools পারফরম্যান্স প্যানেলে উন্নত নেভিগেশন এবং ফিল্টারিং

ব্রেন্ডন কেনি
Brendan Kenny

প্রকাশিত: মার্চ 19, 2025

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

উন্নত নেভিগেশন

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

অধীনে একটি নতুন বিকল্প বিদ্যমান "ক্লাসিক" স্ক্রলিং এবং নতুন "আধুনিক" পদ্ধতির মধ্যে স্যুইচ করার অনুমতি দেয়।

শর্টকাট বিকল্প মেনু, আধুনিক এবং ক্লাসিক স্ক্রোলিং এর মধ্যে একটি রেডিও বোতাম নির্বাচন রয়েছে

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

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

কীবোর্ড শর্টকাটগুলি (যেমন ট্রেস নেভিগেট করতে WASD ব্যবহার করা) অপরিবর্তিতভাবে কাজ করতে থাকবে।

দ্বিমুখী ওভারভিউ

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

DevTools পারফরম্যান্স প্যানেলের শীর্ষে, একাধিক রঙে CPU কার্যকলাপকে ভিজ্যুয়ালাইজ করে

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

যাইহোক, প্রাথমিকভাবে ট্রেসটি দেখার সময় মিনিম্যাপে আপনার সঠিক স্থান হারানো সহজ হতে পারে—এবং তদ্বিপরীত—তাই আমরা নতুন বৈশিষ্ট্যগুলি চালু করেছি যা ওভারভিউকে জুম-ইন ভিউতে বাঁধতে সাহায্য করে৷ এখন, যখন আপনি ওভারভিউয়ের উপর হোভার করেন, তখন ফ্লেমচার্টে একই বিন্দু চিহ্নিত করে ফ্লেমচার্টে একটি সংশ্লিষ্ট উল্লম্ব রেখা প্রদর্শিত হয়:

একইভাবে, ফ্লেমচার্টের এন্ট্রিগুলির উপর হোভার করা এখন CPU চার্টের সংশ্লিষ্ট অংশটিকে হাইলাইট করবে। ঠিক কোন কাজগুলি সেই CPU স্পাইকগুলি ঘটাচ্ছে তা দেখার জন্য এটি দুর্দান্ত।

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

ডিবাগিং পারফরম্যান্সের সমস্যায় সাধারণত প্রচুর পরিমাণে ডেটা sifting জড়িত। আপনাকে সবচেয়ে প্রাসঙ্গিক তথ্যের উপর ফোকাস করতে সাহায্য করার জন্য, আমরা শব্দ ফিল্টার করার ক্ষমতা উন্নত করেছি।

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

আপনি ফ্লেমচার্টে একটি এন্ট্রিতে ডান-ক্লিক করতে পারেন এবং তালিকাকে উপেক্ষা করার জন্য স্ক্রিপ্ট যোগ করুন নির্বাচন করতে পারেন, যা DevTools উপেক্ষা তালিকায় স্ক্রিপ্ট যোগ করে এবং ফ্লেমচার্টে এটি থেকে যেকোনো এন্ট্রি ভেঙে দেয়।

পারফরম্যান্স প্যানেলে একটি এন্ট্রিতে ডান-ক্লিক মেনুতে, 'তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন' বিকল্পটি হাইলাইট করা হয়েছে

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

এইভাবে আপনি কোন ফাইলগুলিকে উপেক্ষা করবেন তার উপর সূক্ষ্ম নিয়ন্ত্রণ পাবেন এবং আপনি কাজ করার সাথে সাথে নিয়মগুলি সক্ষম এবং অক্ষম করার জন্য একটি সহজ জায়গা পাবেন।

ম্লান 3য়-পক্ষের স্ক্রিপ্ট

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

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

উপসংহার

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