Ringkasan
Panel Performance mendukung API ekstensibilitas 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 lagu 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 cara data Anda ditampilkan di panel Performa.
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 objekdevtools
dalam propertidetail
, panel Performa akan menampilkan penanda kustom di jalur Pengaturan waktu.Gunakan
performance.measure
untuk mengukur durasi tugas atau proses. Saat Anda menyertakan objekdevtools
dalam propertidetail
, panel Performa akan menampilkan entri pengukuran kustom di linimasa dalam jalur kustom. Jika menggunakanperformance.mark
sebagai titik referensi untuk membuatperformance.measure
, Anda tidak perlu menyertakan objekdevtools
dalam panggilanperformance.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 pengambilan > 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
Buat jalur kustom dan isi dengan entri untuk memvisualisasikan data performa Anda di jalur kustom. Contoh:
// 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"
}
}
});
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: