Настройте свои данные о производительности с помощью расширяемого API

Andrés Olivares

Sofia Emelianova

Обзор

Панель «Производительность» поддерживает 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
}

Просматривайте свои данные на временной шкале

Чтобы увидеть свои пользовательские данные на временной шкале, на панели «Производительность» включите параметры «Настройки захвата» > check_box «Данные расширения» .

Попробуйте это на этой демонстрационной странице . Включите данные расширения , начните запись выступления, нажмите «Добавить нового корги» на демонстрационной странице, затем остановите запись. В трассировке вы увидите настраиваемую дорожку, содержащую события с настраиваемыми подсказками и подробностями на вкладке «Сводка» .

Примеры кода

В следующих разделах приведены примеры кода, демонстрирующие, как добавить на временную шкалу производительности следующее:

• Пользовательские треки и записи на временной шкале
• Маркеры на дорожке времени

Пользовательские треки и записи

Создавайте собственные треки и заполняйте их записями, чтобы визуализировать данные о вашей производительности в пользовательском треке. Например:

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
performance.mark("Image Processing Start");

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
  start: "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"
    }
  }
});

В результате на дорожке «Тайминги» появится следующий маркер вместе с его текстом и свойствами всплывающей подсказки: