نمای کلی
پانل Performance از API توسعه پذیری عملکرد پشتیبانی می کند که به شما امکان می دهد داده های سفارشی خود را به جدول زمانی عملکرد اضافه کنید.
این API از User Timings API موجود استفاده می کند و به شما امکان می دهد اندازه گیری ها و رویدادهای خود را مستقیماً در جدول زمانی عملکرد به عنوان یک آهنگ سفارشی یا در مسیر Timeings تزریق کنید. این ممکن است برای توسعه دهندگان چارچوب ها، کتابخانه ها و برنامه های پیچیده با ابزار دقیق سفارشی مفید باشد تا درک جامع تری از عملکرد به دست آورند.
ویژگی های کلیدی
- آهنگ های سفارشی : آهنگ های اختصاصی ایجاد کنید تا داده های مبتنی بر زمان خود را تجسم کنید.
- ورودی‌ها : آهنگ‌ها را با ورودی‌هایی که رویدادها یا اندازه‌گیری‌ها را نشان می‌دهند پر کنید.
- نکات و جزئیات ابزار : زمینه ای غنی برای ورودی ها با نکات ابزار قابل تنظیم و نماهای دقیق فراهم کنید.
- نشانگرها : لحظات خاصی را در جدول زمانی با نشانگرهای بصری برجسته کنید.
داده های خود را با User Timings API تزریق کنید
برای تزریق داده های سفارشی، شیء devtools را در ویژگی detail متدهای performance.mark و performance.measure قرار دهید. ساختار این شیء devtools نحوه نمایش داده های شما در پنل Performance را تعیین می کند.
از
performance.markبرای ثبت یک رویداد فوری یا مهر زمانی در جدول زمانی استفاده کنید. می توانید شروع یا پایان یک عملیات خاص یا هر نقطه مورد علاقه ای را که مدت زمان ندارد علامت گذاری کنید. هنگامی که یک شیdevtoolsرا در ویژگیdetailقرار می دهید، پانل Performance یک نشانگر سفارشی را در جدول زمانی نشان می دهد.از
performance.measureبرای اندازه گیری مدت زمان یک کار یا فرآیند استفاده کنید. هنگامی که یک شیdevtoolsرا در ویژگیdetailقرار می‌دهید، پانل Performance ورودی‌های اندازه‌گیری سفارشی را در جدول زمانی نشان می‌دهد. اگر ازperformance.markبه عنوان نقطه مرجع برای ایجادperformance.measureاستفاده می‌کنید، نیازی نیست شیdevtoolsرا در فراخوانیperformance.markقرار دهید.
ابزار devtools
این انواع ساختار شیء devtools را برای ویژگی های برنامه افزودنی مختلف تعریف می کنند:
type DevToolsColor =
"primary" | "primary-light" | "primary-dark" |
"secondary" | "secondary-light" | "secondary-dark" |
"tertiary" | "tertiary-light" | "tertiary-dark" |
"error";
interface ExtensionTrackEntryPayload {
dataType?: "track-entry"; // Defaults to "track-entry"
color?: DevToolsColor; // Defaults to "primary"
track: string; // Required: Name of the custom track
trackGroup?: string; // Optional: Group for organizing tracks
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
interface ExtensionMarkerPayload {
dataType: "marker"; // Required: Identifies as a marker
color?: DevToolsColor; // Defaults to "primary"
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
داده های خود را در جدول زمانی مشاهده کنید
برای دیدن داده های سفارشی خود در خط زمانی، در پانل عملکرد ، تنظیمات تنظیمات ضبط > چک_باکس داده های برنامه افزودنی را روشن کنید.
آن را در این صفحه نمایشی امتحان کنید. داده های برنامه افزودنی را روشن کنید، ضبط عملکرد را شروع کنید، روی Add new Corgi در صفحه نمایشی کلیک کنید، سپس ضبط را متوقف کنید. یک مسیر سفارشی را در ردیابی خواهید دید که حاوی رویدادهایی با نکات ابزار و جزئیات سفارشی در تب Summary است.
نمونه های کد
در بخش‌های بعدی، نمونه‌هایی از کدها را ببینید که نحوه افزودن موارد زیر را به جدول زمانی عملکرد نشان می‌دهد:
آهنگ ها و ورودی های سفارشی
آهنگ های سفارشی ایجاد کنید و آنها را با ورودی ها پر کنید تا داده های عملکرد خود را در یک آهنگ سفارشی تجسم کنید. به عنوان مثال:
// Mark used to represent the start of an image processing task
performance.mark("Image Processing Start");
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "Image Processing Start", {
detail: {
devtools: {
dataType: "track-entry",
track: "Image Processing Tasks",
trackGroup: "My Tracks", // Group related tracks together
color: "tertiary-dark",
properties: [
["Filter Type", "Gaussian Blur"],
["Resize Dimensions", "500x300"]
],
tooltipText: "Image processed successfully"
}
}
});
این منجر به ورود آهنگ سفارشی زیر در جدول زمانی عملکرد، همراه با متن راهنمای ابزار و ویژگی‌های آن می‌شود:
نشانگرها
نقاط خاص مورد علاقه در جدول زمانی را با نشانگرهای سفارشی که در همه مسیرها قرار دارند، به صورت بصری برجسته کنید. به عنوان مثال:
// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
detail: {
devtools: {
dataType: "marker",
color: "secondary",
properties: [
["Image Size", "2.5MB"],
["Upload Destination", "Cloud Storage"]
],
tooltipText: "Processed image uploaded"
}
}
});
این منجر به نشانگر زیر در مسیر Timeings به همراه متن راهنمای ابزار و ویژگی های آن می شود:
