Menyesuaikan data performa dengan Extensibility API

Andrés Olivares

Sofia Emelianova

Ringkasan

Panel Performa mendukung API ekstensi performa yang memungkinkan Anda menambahkan data kustom Anda sendiri ke linimasa performa.

API ini memanfaatkan User Timings API yang ada dan memungkinkan Anda memasukkan pengukuran dan peristiwa langsung ke linimasa performa sebagai jalur kustom atau di jalur Waktu. Hal ini mungkin berguna bagi developer framework, library, dan aplikasi kompleks dengan instrumentasi kustom untuk mendapatkan pemahaman yang lebih komprehensif tentang performa.

Fitur utama

• Jalur kustom: Membuat jalur khusus untuk memvisualisasikan data berbasis waktu Anda sendiri.
• Entri: Isi jalur dengan entri yang mewakili peristiwa atau pengukuran.
• Tooltip dan detail: Berikan konteks yang kaya untuk entri dengan tooltip yang dapat disesuaikan dan tampilan mendetail.
• Penanda: Menandai momen tertentu dalam linimasa dengan penanda visual.

Memasukkan data Anda dengan User Timings API

Untuk memasukkan data kustom, sertakan objek devtools dalam properti detail dari metode performance.mark dan performance.measure. Struktur objek devtools ini menentukan bagaimana data Anda ditampilkan di panel Performance.

• Gunakan performance.mark untuk merekam peristiwa instan atau stempel waktu di linimasa. Anda dapat menandai awal atau akhir operasi tertentu atau lokasi menarik yang tidak memiliki durasi. Saat Anda menyertakan objek devtools dalam properti detail, panel Performa akan menampilkan penanda kustom di linimasa.

• Gunakan performance.measure untuk mengukur durasi tugas atau proses. Saat Anda menyertakan objek devtools dalam properti detail, panel Performa akan menampilkan entri pengukuran kustom di linimasa. Jika menggunakan performance.mark sebagai titik referensi untuk membuat performance.measure, Anda tidak perlu menyertakan objek devtools dalam panggilan performance.mark.

Objek devtools

Jenis ini menentukan struktur objek devtools untuk berbagai fitur ekstensi:

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
}

Melihat data Anda di linimasa

Untuk melihat data kustom Anda di linimasa, di panel Performa, aktifkan setelan Setelan pengambilan > centang Data ekstensi.

Coba di halaman demo ini. Aktifkan Data ekstensi, mulai perekaman performa, klik Tambahkan Corgi baru di halaman demo, lalu hentikan perekaman. Anda akan melihat jalur kustom dalam rekaman aktivitas yang berisi peristiwa dengan tooltip dan detail kustom di tab Ringkasan.

Contoh kode

Di bagian berikutnya, lihat contoh kode yang menunjukkan cara menambahkan hal berikut ke linimasa performa:

• Jalur dan entri kustom ke linimasa
• Penanda ke jalur Waktu

Jalur dan entri kustom

Buat jalur kustom dan isi dengan entri untuk memvisualisasikan data performa Anda di jalur kustom. Contoh:

// 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"
    }
  }
});

Tindakan ini akan menghasilkan entri jalur kustom berikut di linimasa performa, beserta teks dan properti tooltip:

Penanda

Soroti lokasi menarik tertentu secara visual dalam linimasa dengan penanda kustom yang membentang di semua jalur. Contoh:

// 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"
    }
  }
});

Tindakan ini menghasilkan penanda berikut di jalur Waktu, beserta teks dan properti tooltip: