কৌণিক অ্যাপগুলি প্রোফাইল করতে Chrome DevTools পারফরম্যান্স প্যানেল ব্যবহার করুন

Andrés Olivares

Pawel Kozlowski

Angular, React, Vue, এবং Svelte-এর মতো ওয়েব ফ্রেমওয়ার্কগুলি স্কেলে জটিল ওয়েব অ্যাপ্লিকেশনগুলি লেখা এবং বজায় রাখা সহজ করে তোলে।

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

উদাহরণস্বরূপ, DevTools-এ পারফরম্যান্স প্যানেলের সাথে একটি কৌণিক অ্যাপ্লিকেশন প্রোফাইল করার সময়, আপনি এটি দেখতে পান:

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

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

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

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

পারফরম্যান্স প্যানেল এক্সটেনসিবিলিটি API কী?

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

• ইউজার টাইমিং এপিআই
• console.timeStamp API

ইউজার টাইমিং এপিআই

আপনি যেমন এন্ট্রি যোগ করতে performance.mark এবং performance.measure ব্যবহার করতে পারেন:

// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();

// ... later in your code

performance.measure("Component rendering", {
  start: renderStart,
  detail: {
    devtools: {
      dataType: "track-entry",
      track: "Components",
      color: "secondary",
      properties: [
        ["Render reason", "Props changed"],
        ["Priority", "low"]
      ],
    }
  }
});

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

এই API আপনাকে পারফরম্যান্স টাইমলাইন বাফারে এন্ট্রিগুলি যোগ করতে দেয়, পাশাপাশি সেগুলি DevTools পারফরম্যান্স প্যানেল UI-তেও প্রদর্শন করে৷

ডক্সে এই API এবং devtools অবজেক্ট সম্পর্কে আরও জানুন।

console.timeStamp API

এই API ব্যবহারকারীর সময় API-এর একটি হালকা বিকল্প। আগের মত একই উদাহরণ ব্যবহার করে, আপনি হতে পারে:

// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();

// ... later in your code

console.timeStamp(
"Component rendering",
/* start time */ renderStart,
/* end time (current time) */ undefined,
/* track name */ "Components",
 /* track group name */ undefined,
 /* color */ "secondary"
);

এই এপিআই ইন্সট্রুমেন্টিং অ্যাপ্লিকেশনের জন্য একটি উচ্চ-পারফরম্যান্স পদ্ধতি প্রদান করে: ইউজার টাইমিং এপিআই বিকল্পের বিপরীতে, এটি বাফার করা ডেটা তৈরি করে না। এই APIটি একচেটিয়াভাবে DevTools-এ **পারফরম্যান্স** প্যানেলে ডেটা যোগ করে, এর মানে হল যে যখন DevTools কোনও ট্রেস রেকর্ড করছে না, তখন API no-ops-এ কলগুলি (তারা কিছু করে না), এটিকে উল্লেখযোগ্যভাবে দ্রুত এবং পারফরম্যান্স সংবেদনশীল হট পাথগুলির জন্য উপযুক্ত করে তোলে৷ সমস্ত কাস্টমাইজেশন পরামিতি সমন্বিত একটি বস্তুর পরিবর্তে অবস্থানগত আর্গুমেন্ট ব্যবহার করার পছন্দটিও API-কে যতটা সম্ভব হালকা রাখার উদ্দেশ্যে কাজ করে।

পারফরম্যান্স প্যানেল প্রসারিত করতে console.timeStamp ব্যবহার করার বিষয়ে আরও জানুন এবং ডক্সে আপনি যে প্যারামিটারগুলি পাস করতে পারেন।

অ্যাঙ্গুলার কীভাবে DevTools এক্সটেনসিবিলিটি API একত্রিত করেছে

Chrome DevTools-এর সাথে সংহত করার জন্য কৌণিক দল কীভাবে এক্সটেনসিবিলিটি API ব্যবহার করেছে তা আমরা দেখব।

console.timestamp সহ ওভারহেড এড়িয়ে চলুন

পারফরম্যান্স প্যানেল এক্সটেনসিবিলিটি API সহ কৌণিকের যন্ত্রটি 20 সংস্করণে উপলব্ধ। DevTools-এ কর্মক্ষমতা ডেটার জন্য গ্রানুলারিটির চাওয়া-পর্যায়ের স্তরের জন্য একটি দ্রুত API প্রয়োজন, তাই পুল অনুরোধ ( 60217 ) যেটি console.timeStamp API ব্যবহার করার জন্য যন্ত্রটিকে যুক্ত করেছে। এটি প্রোফাইলিং API এর সম্ভাব্য ওভারহেড দ্বারা প্রভাবিত হওয়া থেকে অ্যাপ্লিকেশন রানটাইম কর্মক্ষমতা প্রতিরোধ করে।

ইনস্ট্রুমেন্টেড ডেটা

কৌণিক কোডটি কী চলছে এবং কেন এটি প্রথম স্থানে চলছে তার একটি ভাল ছবি প্রদান করার জন্য, স্টার্ট আপ এবং রেন্ডারিং পাইপলাইনের একাধিক অংশ উপকরণ দেওয়া হয়েছে, যার মধ্যে রয়েছে:

• অ্যাপ্লিকেশন এবং উপাদান বুটস্ট্র্যাপিং.
• উপাদান তৈরি এবং আপডেট.
• ইভেন্ট শ্রোতা এবং জীবনচক্র হুক মৃত্যুদন্ড কার্যকর করা.
• অন্য অনেকগুলি (উদাহরণস্বরূপ, গতিশীল উপাদান তৈরি এবং ব্লক রেন্ডারিং স্থগিত করা)।

কালার কোডিং

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

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

মনে রাখবেন যে API-এ পাস করা রঙের আর্গুমেন্টটি একটি CSS রঙের মান নয় বরং একটি শব্দার্থিক টোকেন যা DevTools UI-এর সাথে মেলে এমন একটি রঙে ম্যাপ করা হয়েছে। সম্ভাব্য মানগুলি primary , secondary এবং tertiary, তাদের নিজ নিজ -dark এবং -light রূপের পাশাপাশি একটি error রঙ সহ।

ট্র্যাক

লেখার মুহুর্তে, সমস্ত কৌণিক রানটাইম ডেটা একই ট্র্যাকে যোগ করা হয়েছে ("🅰️ কৌণিক" লেবেলযুক্ত)। যাইহোক, ট্রেসে একাধিক ট্র্যাক যোগ করা এবং এমনকি আপনার ট্র্যাকগুলিকে গোষ্ঠীভুক্ত করা সম্ভব৷ উদাহরণস্বরূপ, console.timeStamp API-তে নিম্নলিখিত কলগুলি দেওয়া হয়েছে:

console.timeStamp("Component 1", componentStart1, componentEnd1, "Components", "Client", "primary");
console.timeStamp("Component 2", componentStart2, componentEnd2, "Components", "Client", "primary");
console.timeStamp("Hook 1", hookStart, hookEnd, "Hooks", "Client", "primary");
console.timeStamp("Fetch data base", fetchStart, fetchEnd, "Server", "primary");

আপনি নিম্নলিখিত উপায়ে ট্র্যাকগুলিতে সংগঠিত ডেটা দেখতে পাবেন:

পৃথক ট্র্যাকগুলি ব্যবহার করা উপকারী হতে পারে উদাহরণস্বরূপ যখন আপনার অ্যাসিঙ্ক্রোনাস অ্যাক্টিভিটি থাকে, সমান্তরালভাবে চলমান একাধিক কাজ বা শুধুমাত্র অ্যাক্টিভিটি গ্রুপগুলি যথেষ্ট আলাদা যে সেগুলি UI এর বিভিন্ন ক্ষেত্রে আলাদা করার যোগ্য।

কেন এটি কৌণিক বিকাশকারীদের জন্য গুরুত্বপূর্ণ

এই সরাসরি ইন্টিগ্রেশনের লক্ষ্য হল আরও স্বজ্ঞাত এবং ব্যাপক কর্মক্ষমতা বিশ্লেষণের অভিজ্ঞতা প্রদান করা। কৌণিকের অভ্যন্তরীণ কর্মক্ষমতা ডেটা সরাসরি **পারফরম্যান্স** প্যানেলের মধ্যে সার্ফেস করার মাধ্যমে, বিকাশকারীরা পাবেন:

• বর্ধিত দৃশ্যমানতা: কৌণিক-নির্দিষ্ট কর্মক্ষমতা ইভেন্ট তৈরি করা যেমন উপাদান রেন্ডারিং, সনাক্তকরণ চক্র পরিবর্তন এবং আরও অনেক কিছু, বিস্তৃত ব্রাউজার টাইমলাইনের মধ্যে দৃশ্যমান।
• উন্নত বোঝাপড়া: কৌণিকের অভ্যন্তরীণ প্রক্রিয়াগুলি সম্পর্কে প্রসঙ্গ-সমৃদ্ধ তথ্য সহ, আপনাকে কার্যক্ষমতার বাধাগুলি আরও কার্যকরভাবে চিহ্নিত করতে সহায়তা করে।

ইন্টিগ্রেশন সক্রিয় করা হচ্ছে

এক্সটেনসিবিলিটি API-এর ব্যবহার আনুষ্ঠানিকভাবে অ্যাঙ্গুলার সংস্করণ 20-এর মতো ডেভেলপমেন্ট বিল্ডগুলিতে উপলব্ধ। এটি সক্ষম করতে আপনাকে আপনার অ্যাপে বা DevTools কনসোলে `ng.enableProfiling()` ব্যবহার করতে হবে। [কৌণিক দস্তাবেজ]( https://angular.dev/best-practices/profiling-with-chrome-devtools ) এ ইন্টিগ্রেশন সম্পর্কে আরও তথ্য দেখুন

অন্যান্য বিবেচনা

কিছু গুরুত্বপূর্ণ বিবেচনা বিবেচনায় নিতে হবে।

উত্স মানচিত্র এবং ছোট কোড:

সোর্স ম্যাপ হল একটি ব্যাপকভাবে গৃহীত টুল যার লক্ষ্য বান্ডিল/মিনিফাইড কোডের মধ্যে ব্যবধান পূরণ করা এবং এটির রচিত কাউন্টারপার্ট, তাই...

সোর্স ম্যাপগুলি কি বান্ডেল করা অ্যাপগুলিতে মিনিফাইড কোডের সমস্যা সমাধান করার কথা নয়?

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

Chrome DevTools এক্সটেনশন:

DevTools API ব্যবহার করে Chrome এক্সটেনশনগুলি devtools প্রসারিত করার জন্য একটি বহুল ব্যবহৃত টুল।

ডেডিকেটেড প্রোফাইলার (উদাহরণস্বরূপ Chrome DevTools এক্সটেনশনগুলি) কি অপ্রয়োজনীয় বা নিরুৎসাহিত করা হয়েছে যে এই APIটি উপলব্ধ?

না, এই APIটি Chrome DevTools এক্সটেনশনের মতো ডেডিকেটেড প্রোফাইলারগুলির বিকাশকে প্রতিস্থাপন বা নিরুৎসাহিত করার উদ্দেশ্যে নয়৷ এগুলি এখনও বিশেষ বৈশিষ্ট্য, ভিজ্যুয়ালাইজেশন এবং নির্দিষ্ট প্রয়োজনের জন্য তৈরি ওয়ার্কফ্লো অফার করতে পারে। পারফরম্যান্স প্যানেল এক্সটেনসিবিলিটি API-এর লক্ষ্য হল পারফরম্যান্স প্যানেলে ব্রাউজার ভিজ্যুয়ালাইজেশনের সাথে কাস্টম ডেটার একটি বিরামহীন ইন্টিগ্রেশন তৈরি করা।

সামনের পথ

এক্সটেনসিবিলিটি API এর সম্ভাবনা।

আরও ফ্রেমওয়ার্ক এবং বিমূর্ততা নিয়ে কাজ করুন

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

উৎপাদন গড়ে তোলে

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