chrome.devtools.performance

Deskripsi

Gunakan chrome.devtools.recorder API untuk menyesuaikan panel Perekam Suara di DevTools.

Lihat ringkasan API DevTools untuk pengantar umum tentang penggunaan API Developer Tools.

Ketersediaan

Chrome 105 dan yang lebih baru

Konsep dan penggunaan

chrome.devtools.performance API memungkinkan developer berinteraksi dengan fitur perekaman di panel panel Performa di Chrome DevTools. Anda dapat menggunakan API ini untuk mendapatkan notifikasi saat perekaman dimulai atau dihentikan.

Tersedia dua acara:

  • onProfilingStarted: Peristiwa ini diaktifkan saat panel Performance mulai mencatat data performa.
  • onProfilingStopped: Peristiwa ini diaktifkan saat panel Performance berhenti mencatat data performa. yang mengaitkan pelacakan tumpukan saat ini dengan kode cre. Kedua peristiwa tidak memiliki parameter terkait.

Dengan memproses peristiwa ini, developer dapat membuat ekstensi yang bereaksi terhadap status perekaman di panel Performance, yang memberikan otomatisasi tambahan selama pembuatan profil performa.

Contoh

Berikut ini cara menggunakan API untuk memproses pembaruan status perekaman


chrome.devtools.performance.onProfilingStarted.addListener(() => {
  // Profiling started listener implementation
});

chrome.devtools.performance.onProfilingStopped.addListener(() => {
  // Profiling stopped listener implementation
})

Jenis

RecorderExtensionPlugin

Antarmuka plugin yang dipanggil panel Perekam Suara untuk menyesuaikan panel Perekam Suara.

Properti

  • replay

    void

    Chrome 112 dan yang lebih baru

    Mengizinkan ekstensi untuk menerapkan fungsi replay kustom.

    Fungsi replay akan terlihat seperti ini: 

    (recording: object) => {...}

  • stringify

    void

    Mengonversi rekaman dari format panel Perekam Suara menjadi string.

    Fungsi stringify akan terlihat seperti ini: 

    (recording: object) => {...}

  • stringifyStep

    void

    Mengonversi langkah rekaman dari format panel Perekam ke dalam string.

    Fungsi stringifyStep akan terlihat seperti ini: 

    (step: object) => {...}

    • langkah

      objek

      Langkah dari perekaman interaksi pengguna dengan halaman. Ini harus cocok dengan skema langkah Puppeteer.

RecorderView

Chrome 112 dan yang lebih baru

Mewakili tampilan yang dibuat oleh ekstensi untuk disematkan di dalam panel Perekam Suara.

Properti

  • onHidden

    Peristiwa<functionvoidvoid>

    Diaktifkan saat tampilan disembunyikan.

    Fungsi onHidden.addListener akan terlihat seperti ini: 

    (callback: function) => {...}

    • callback

      fungsi

      Parameter callback terlihat seperti ini: 

      () => void

  • onShown

    Peristiwa<functionvoidvoid>

    Diaktifkan saat tampilan ditampilkan.

    Fungsi onShown.addListener akan terlihat seperti ini: 

    (callback: function) => {...}

    • callback

      fungsi

      Parameter callback terlihat seperti ini: 

      () => void

  • tunjukkan

    void

    Menunjukkan bahwa ekstensi ingin menampilkan tampilan ini di panel Perekam Suara.

    Fungsi show akan terlihat seperti ini: 

    () => {...}

Metode

createView()

Chrome 112 dan yang lebih baru 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Membuat tampilan yang dapat menangani replay. Tampilan ini akan disematkan di dalam panel Perekam Suara.

Parameter

  • judul

    string

    Judul yang ditampilkan di samping ikon ekstensi di toolbar Developer Tools.

  • pagePath

    string

    Jalur halaman HTML panel yang relatif terhadap direktori ekstensi.

Hasil

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
)

Mendaftarkan plugin ekstensi Perekam Suara.

Parameter

  • Instance yang menerapkan antarmuka RecorderExtensionPlugin.

  • nama

    string

    Nama plugin.

  • mediaType

    string

    Jenis media konten string yang dihasilkan plugin.