از پانل عملکرد Chrome DevTools برای نمایه کردن برنامه های Angular استفاده کنید

Andrés Olivares

Pawel Kozlowski

چارچوب های وب مانند Angular، React، Vue، و Svelte نوشتن و نگهداری برنامه های کاربردی وب پیچیده را در مقیاس آسان تر می کنند.

با این حال، این چارچوب ها لایه ای از انتزاع را در بالای مدل برنامه مرورگر معرفی می کنند. در واقع، کد نوشته شده توسط توسعه دهندگان با استفاده از این انتزاع ها معمولاً به کدهای ناخوانا، کوچک شده و همراه تبدیل می شود. در نتیجه، استفاده کامل از قدرت DevTools برای اشکال زدایی و مشخصات این برنامه ها می تواند برای توسعه دهندگان چالش برانگیز باشد.

به عنوان مثال، هنگام پروفایل کردن یک برنامه Angular با پنل عملکرد در DevTools، این چیزی است که مشاهده می کنید:

با اطلاعات ارائه شده از این طریق، تشخیص اینکه چه گلوگاه های عملکردی در پایگاه کد شما وجود دارد، می تواند دشوار باشد. از این گذشته، متن ساختارهای چارچوب را از دست داده است و بخش خوبی از اطلاعات نشان داده شده از نظر کد کوچک شده است. همچنین تمایز بین فعالیتی که مستقیماً با کدی که نوشته‌اید، ساختارهای داخلی چارچوب و سایر کدهای شخص ثالثی که ممکن است در همان صفحه در حال اجرا هستند، تشخیص دهید.

یک انگیزه مشترک برای نویسندگان چارچوب و انتزاع، پیاده‌سازی پسوندهای DevTools خود است که داده‌های نمایه را بر اساس مفاهیم چارچوب ارائه می‌کند. این ابزارها هنگام اشکال زدایی و پروفایل سازی برنامه های ساخته شده با یک چارچوب خاص بسیار مفید هستند. با این حال، اغلب نیاز دارید که داده‌های فریم‌ورک را در نمایه‌ساز فریمورک خود با اطلاعات زمان اجرا مرورگر در پنل عملکرد DevTools مرتبط کنید. ارائه این دو منبع داده به طور جداگانه در ابزارهای مستقل، شناسایی و رفع تنگناها را دشوار می کند، به خصوص که برنامه پیچیده تر می شود. در اینجا نمونه ای از تجسم نمایه در Angular DevTools Profiler آورده شده است:

در یک دنیای ایده‌آل، توسعه‌دهندگان دیدگاهی خواهند داشت که در آن دو منبع داده با هم در یک زمینه و در یک جدول زمانی یکسان نشان داده می‌شوند.

به همین دلیل، ما با تیم Angular همکاری کردیم تا داده‌های زمان اجرای Angular را با استفاده از API توسعه‌پذیری پنل عملکرد مستقیماً به پنل عملکرد بیاوریم. در این پست، بررسی خواهیم کرد که API چه کاری می تواند انجام دهد و چگونه از آن در چارچوب Angular برای دستیابی به این هدف استفاده شده است. این پیاده‌سازی می‌تواند به عنوان نمونه‌ای برای چارچوب‌ها و انتزاعی‌هایی باشد که به دنبال بهبود تجربه توسعه‌دهنده‌شان با ابزارسازی ابزارهای خودشان و کمک به توسعه‌دهندگان با استفاده از ابزار توسعه‌دهنده Chrome هستند.

API توسعه پذیری پنل عملکرد چیست؟

API به شما امکان می دهد ورودی های زمان بندی خود را به ردیابی پنل عملکرد ، در همان جدول زمانی باقی داده های مرورگر اضافه کنید. دو مکانیسم وجود دارد که به شما امکان می دهد این کار را انجام دهید:

• User Timing API
• API console.timeStamp

User Timing 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"]
      ],
    }
  }
});

این باعث می شود که مسیر Components با اندازه گیری به جدول زمانی شما اضافه شود:

این API به شما امکان می دهد ورودی ها را به بافر جدول زمانی عملکرد اضافه کنید، در حالی که آنها را در رابط کاربری پنل DevTools Performance نمایش می دهد.

درباره این API و شیء devtools در اسناد بیشتر بیاموزید.

API console.timeStamp

این API یک جایگزین سبک وزن برای User Timing 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 روشی با کارایی بالا برای برنامه‌های کاربردی فراهم می‌کند: برخلاف گزینه User Timeming API، داده‌های بافر ایجاد نمی‌کند. این API به طور انحصاری داده‌ها را به پنل **Performance** در DevTools اضافه می‌کند، به این معنی که وقتی DevTools ردیابی را ضبط نمی‌کند، تماس‌های API no-ops می‌شود (آنها هیچ کاری انجام نمی‌دهند) و آن را به طور قابل توجهی سریع‌تر و برای مسیرهای داغ حساس به عملکرد مناسب‌تر می‌کند. انتخاب استفاده از آرگومان‌های موقعیتی به‌جای شیئی که تمام پارامترهای سفارشی‌سازی را شامل می‌شود، همچنین به هدف سبک‌تر نگه داشتن API تا حد امکان عمل می‌کند.

درباره استفاده از console.timeStamp برای گسترش پانل Performance و پارامترهایی که می‌توانید در اسناد ارسال کنید، بیشتر بیاموزید.

چگونه Angular API توسعه‌پذیری DevTools را یکپارچه کرده است

ما نگاهی به نحوه استفاده تیم Angular از API توسعه پذیری برای ادغام با Chrome DevTools خواهیم داشت.

از هزینه های اضافی با console.timestamp اجتناب کنید

ابزار دقیق Angular با API توسعه‌پذیری پانل عملکرد از نسخه 20 در دسترس است. سطح مورد نظر از جزئیات برای داده‌های عملکرد در DevTools به یک API سریع نیاز دارد، بنابراین درخواست کشش ( 60217 ) که ابزار دقیق را اضافه کرد، استفاده از console.timeStamp API را انتخاب کرد. این مانع از تحت تأثیر قرار گرفتن عملکرد زمان اجرای برنامه توسط سربار بالقوه API پروفایل می شود.

داده های ابزاری

برای ارائه یک تصویر خوب از کد Angular و همچنین چرایی اجرای آن در وهله اول، بخش‌های مختلفی از خطوط لوله راه‌اندازی و رندر ابزارسازی شده‌اند، از جمله:

• راه‌اندازی برنامه و کامپوننت
• ایجاد اجزا و به روز رسانی.
• شنوندگان رویداد و اجرای قلاب چرخه حیات.
• بسیاری دیگر (به عنوان مثال، ایجاد مؤلفه پویا و به تعویق انداختن رندر بلوک).

کدگذاری رنگ

از کدگذاری رنگی برای اطلاع رسانی به توسعه دهنده در مورد دسته ای که یک ورودی اندازه گیری خاص در آن قرار می گیرد، استفاده می شود. به عنوان مثال، رنگ‌های مورد استفاده برای ورودی‌هایی که اجرای کد TypeScript توسط توسعه‌دهنده را علامت‌گذاری می‌کنند، از رنگ‌های مورد استفاده برای کد تولید شده توسط کامپایلر Angular متمایز هستند.

در اسکرین شات زیر، می‌توانید ببینید که چگونه این منجر به نقاط ورودی (مانند تشخیص تغییر و پردازش مولفه) به رنگ آبی، کد تولید شده به رنگ بنفش و کد TypeScript (مانند شنوندگان رویداد و هوک) به رنگ سبز می‌شود.

توجه داشته باشید که آرگومان رنگ ارسال شده به API یک مقدار رنگ CSS نیست، بلکه یک نشانه معنایی است که به رنگی نگاشت می‌شود که با DevTools UI مطابقت دارد. مقادیر ممکن primary ، secondary و tertiary, با انواع -dark و -light مربوطه و همچنین رنگ error هستند.

آهنگ ها

در لحظه نوشتن، تمام داده‌های زمان اجرا Angular به همان آهنگ اضافه می‌شوند (با برچسب "🅰️ Angular"). با این حال، این امکان وجود دارد که چندین آهنگ را به ردیابی اضافه کنید و حتی آهنگ های خود را گروه بندی کنید. برای مثال، با توجه به تماس‌های زیر با 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 را داشته باشند.

چرا این موضوع برای توسعه دهندگان Angular اهمیت دارد

هدف از این ادغام مستقیم، ارائه یک تجربه تجزیه و تحلیل عملکرد بصری تر و جامع تر است. با قرار دادن داده‌های عملکرد داخلی Angular مستقیماً در پنل **Performance**، توسعه‌دهندگان دریافت خواهند کرد:

• دید پیشرفته: ایجاد رویدادهای عملکرد خاص Angular مانند رندر مؤلفه، چرخه‌های تشخیص تغییر و موارد دیگر که در جدول زمانی مرورگر گسترده‌تر قابل مشاهده هستند.
• درک بهبود یافته: با اطلاعات غنی از زمینه در مورد فرآیندهای داخلی Angular، به شما کمک می کند تا به طور موثرتر گلوگاه های عملکرد را مشخص کنید.

فعال کردن ادغام

استفاده از API توسعه‌پذیری در نسخه‌های Angular نسخه 20 رسماً در ساخت‌های توسعه موجود است. برای فعال کردن آن، باید «ng.enableProfiling()» را در برنامه خود یا در کنسول DevTools اجرا کنید. اطلاعات بیشتر درباره ادغام را در [Angular Docs] ببینید ( https://angular.dev/best-practices/profiling-with-chrome-devtools )

ملاحظات دیگر

برخی از ملاحظات مهم باید در نظر گرفته شود.

نقشه های منبع و کد کوچک شده:

نقشه‌های منبع ابزاری هستند که به طور گسترده مورد استفاده قرار می‌گیرند و با هدف پر کردن شکاف بین کدهای همراه / کوچک‌شده و همتای تألیفی آن، به کار می‌روند.

آیا نقشه های منبع قرار نیست مشکل کوچک شدن کد در برنامه های همراه را حل کنند؟

اگرچه نقشه‌های منبع واقعاً مفید هستند، اما چالش‌های موجود در هنگام نمایه‌سازی برنامه‌های پیچیده وب کوچک‌شده را کاملاً از بین نمی‌برند. نقشه‌های منبع به DevTools اجازه می‌دهند تا کد کوچک‌سازی شده را به کد منبع اصلی شما برگرداند و اشکال‌زدایی را آسان‌تر کند. با این حال، تنها تکیه بر نقشه های منبع برای تجزیه و تحلیل عملکرد می تواند محدودیت هایی را ایجاد کند. به عنوان مثال، انتخاب روشی که در آن داخلی های چارچوب و کد نوشته شده به صورت بصری از هم جدا می شوند، تنها با نقشه های منبع پیچیده است. از سوی دیگر، API توسعه‌پذیری انعطاف‌پذیری را برای دستیابی به این تمایز و ارائه آن به روشی که توسعه‌دهنده راحت‌تر می‌داند، فراهم می‌کند.

برنامه‌های افزودنی Chrome DevTools:

افزونه‌های کروم با استفاده از DevTools API ابزاری پرکاربرد برای گسترش ابزارهای توسعه‌دهنده هستند.

آیا اکنون که این API در دسترس است، نمایه‌سازهای اختصاصی (برای مثال افزونه‌های Chrome DevTools) غیرضروری هستند یا دلسرد می‌شوند؟

نه، این API برای جایگزینی یا جلوگیری از توسعه نمایه‌سازهای اختصاصی مانند برنامه‌های افزودنی Chrome DevTools در نظر گرفته نشده است. اینها هنوز هم می‌توانند ویژگی‌های تخصصی، تجسم‌ها و گردش‌های کاری متناسب با نیازهای خاص را ارائه دهند. هدف برنامه توسعه‌پذیری پنل عملکرد ، ایجاد یکپارچگی یکپارچه از داده‌های سفارشی با تجسم‌های مرورگر در پانل عملکرد است.

مسیر رو به جلو

چشم انداز API توسعه پذیری.

با چارچوب ها و انتزاعات بیشتری کار کنید

ما در مورد سایر چارچوب‌ها و انتزاع‌هایی که API را برای بهبود تجربه نمایه‌سازی توسعه‌دهندگان خود اتخاذ می‌کنند، هیجان‌زده هستیم. برای مثال React یک پذیرش آزمایشی از API را برای چارچوب خود پیاده سازی کرده است. این ابزار دقیق رندر مؤلفه های سرویس گیرنده و سرور و همچنین داده های APIهای زمانبندی React را ارائه می کند. در مورد آن و نحوه فعال کردن آن در صفحه React اطلاعات بیشتری کسب کنید .

تولید می سازد

یکی از اهداف این API کار با چارچوب ها و ارائه دهندگان انتزاعی به طور کلی برای اتخاذ و فعال کردن ابزار دقیق در ساخت های تولیدی است. این می‌تواند تأثیر زیادی بر عملکرد برنامه‌های توسعه‌یافته با این انتزاع‌ها داشته باشد، زیرا توسعه‌دهندگان می‌توانند برنامه را همانطور که کاربرانشان آن را تجربه می‌کنند، نمایه کنند. ما معتقدیم که console.timeStamp API با توجه به سرعت و سربار کم، امکان دستیابی به این امر را فراهم می کند. با این حال، در حال حاضر، فریم‌ورک‌ها هنوز در حال آزمایش با API هستند و بررسی می‌کنند که چه نوع ابزار دقیق‌تری برای توسعه‌دهندگان مقیاس‌پذیر و مفید هستند.