Обзор
Панель «Производительность» поддерживает API расширения производительности, который позволяет добавлять собственные данные на временную шкалу производительности.
Этот API использует существующий API User Timings и позволяет вставлять измерения и события непосредственно на временную шкалу производительности в виде пользовательской дорожки или дорожки Timings . Это может быть полезно разработчикам платформ, библиотек и сложных приложений со специальными инструментами, чтобы получить более полное представление о производительности.
Ключевые особенности
- Пользовательские треки : создавайте специальные треки для визуализации собственных данных, основанных на времени.
- Записи : заполнение треков записями, представляющими события или измерения.
- Подсказки и подробные сведения . Обеспечьте богатый контекст для записей с помощью настраиваемых подсказок и подробных представлений.
- Маркеры : выделите определенные моменты на временной шкале с помощью визуальных маркеров.
Внедряйте свои данные с помощью API User Timings.
Чтобы внедрить пользовательские данные, включите объект devtools
в свойство detail
методов performance.mark
и performance.measure
. Структура этого объекта devtools
определяет, как ваши данные отображаются на панели «Производительность» .
Используйте
performance.mark
для записи мгновенного события или отметки времени на временной шкале. Вы можете отметить начало или конец определенной операции или любой достопримечательности, не имеющей продолжительности. Когда вы включаете объектdevtools
в свойствоdetail
, на панели «Производительность» отображается настраиваемый маркер на временной шкале.Используйте
performance.measure
для измерения продолжительности задачи или процесса. Когда вы включаете объектdevtools
в свойствоdetail
, на панели «Производительность» отображаются записи пользовательских измерений на временной шкале. Если вы используете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
}
Просматривайте свои данные на временной шкале
Чтобы увидеть свои пользовательские данные на временной шкале, на панели «Производительность» включите
Настройки захвата» > Данные расширения» .Попробуйте это на этой демонстрационной странице . Включите данные расширения , начните запись выступления, нажмите «Добавить нового корги» на демонстрационной странице, затем остановите запись. В трассировке вы увидите настраиваемую дорожку, содержащую события с настраиваемыми подсказками и подробностями на вкладке «Сводка» .
Примеры кода
В следующих разделах приведены примеры кода, демонстрирующие, как добавить на временную шкалу производительности следующее:
Пользовательские треки и записи
Создавайте собственные треки и заполняйте их записями, чтобы визуализировать данные о своей производительности в пользовательском треке. Например:
// 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"
}
}
});
В результате на дорожке «Тайминги» появится следующий маркер вместе с его текстом и свойствами всплывающей подсказки: