chrome.devtools.performance

คำอธิบาย

ใช้ chrome.devtools.recorder API เพื่อปรับแต่งแผงโปรแกรมอัดเสียงในเครื่องมือสำหรับนักพัฒนาเว็บ

ดูข้อมูลสรุปเกี่ยวกับ DevTools API สำหรับข้อมูลเบื้องต้นเกี่ยวกับการใช้ API เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

ความพร้อมใช้งาน

Chrome 105 ขึ้นไป

แนวคิดและการใช้งาน

chrome.devtools.performance API ช่วยให้นักพัฒนาแอปโต้ตอบกับฟีเจอร์บันทึกของแผงแผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้ คุณใช้ API นี้เพื่อรับการแจ้งเตือนเมื่อเริ่มหรือหยุดการบันทึกได้

โดยมี 2 เหตุการณ์ ได้แก่

  • onProfilingStarted: เหตุการณ์นี้จะเริ่มทำงานเมื่อแผงประสิทธิภาพเริ่มบันทึกข้อมูลประสิทธิภาพ
  • onProfilingStopped: เหตุการณ์นี้จะเริ่มทำงานเมื่อแผงประสิทธิภาพหยุดบันทึกข้อมูลประสิทธิภาพ สแต็กเทรซที่เชื่อมโยงสแต็กเทรซปัจจุบันกับครีเอทีฟ ทั้ง 2 เหตุการณ์ไม่มีพารามิเตอร์ที่เชื่อมโยง

การฟังเหตุการณ์เหล่านี้จะทำให้นักพัฒนาแอปสร้างส่วนขยายที่ตอบสนองต่อสถานะการบันทึกในแผงประสิทธิภาพ เพื่อให้การทำงานอัตโนมัติเพิ่มเติมในระหว่างการทำโปรไฟล์ประสิทธิภาพ

ตัวอย่าง

นี่คือวิธีใช้ API เพื่อฟังการอัปเดตสถานะการบันทึก


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

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

ประเภท

RecorderExtensionPlugin

อินเทอร์เฟซปลั๊กอินที่แผงโปรแกรมอัดเสียงเรียกใช้เพื่อปรับแต่งแผงโปรแกรมอัดเสียง

พร็อพเพอร์ตี้

  • เล่นซ้ำ

    เป็นโมฆะ

    Chrome 112 ขึ้นไป

    อนุญาตให้ส่วนขยายใช้ฟังก์ชันการเล่นซ้ำที่กำหนดเอง

    ฟังก์ชัน replay มีลักษณะดังนี้ 

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

  • stringify

    เป็นโมฆะ

    แปลงไฟล์บันทึกเสียงจากรูปแบบแผงโปรแกรมอัดเสียงเป็นสตริง

    ฟังก์ชัน stringify มีลักษณะดังนี้ 

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

  • stringifyStep

    เป็นโมฆะ

    แปลงขั้นตอนของการบันทึกเสียงจากรูปแบบแผงโปรแกรมอัดเสียงเป็นสตริง

    ฟังก์ชัน stringifyStep มีลักษณะดังนี้ 

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

    • ก้าว

      ออบเจ็กต์

      ขั้นตอนของการบันทึกการโต้ตอบของผู้ใช้กับหน้าเว็บ ซึ่งควรตรงกับสคีมาขั้นตอนของ Puppeteer

RecorderView

Chrome 112 ขึ้นไป

แสดงมุมมองที่สร้างโดยส่วนขยายที่จะฝังอยู่ภายในแผงโปรแกรมอัดเสียง

พร็อพเพอร์ตี้

  • onHidden

    เหตุการณ์<functionvoid>

    เริ่มทำงานเมื่อซ่อนมุมมอง

    ฟังก์ชัน onHidden.addListener มีลักษณะดังนี้ 

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

    • Callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • onShown

    เหตุการณ์<functionvoid>

    เริ่มทำงานเมื่อแสดงมุมมอง

    ฟังก์ชัน onShown.addListener มีลักษณะดังนี้ 

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

    • Callback

      ฟังก์ชัน

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      () => void

  • แสดง

    เป็นโมฆะ

    บ่งบอกว่าส่วนขยายต้องการแสดงมุมมองนี้ในแผงโปรแกรมอัดเสียง

    ฟังก์ชัน show มีลักษณะดังนี้ 

    () => {...}

เมธอด

createView()

Chrome 112 ขึ้นไป 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

สร้างมุมมองที่รับมือกับการเล่นซ้ำได้ มุมมองนี้จะฝังอยู่ภายในแผงโปรแกรมอัดเสียง

พารามิเตอร์

  • title

    สตริง

    ชื่อที่แสดงถัดจากไอคอนส่วนขยายในแถบเครื่องมือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

  • pagePath

    สตริง

    เส้นทางหน้า HTML ของแผงที่สัมพันธ์กับไดเรกทอรีส่วนขยาย

การคืนสินค้า

registerRecorderExtensionPlugin()

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

ลงทะเบียนปลั๊กอินส่วนขยายโปรแกรมอัดเสียง

พารามิเตอร์

  • ปลั๊กอิน

    RecorderExtensionPlugin

    อินสแตนซ์ที่ใช้งานอินเทอร์เฟซ RecorderExtensionPlugin

  • ชื่อ

    สตริง

    ชื่อปลั๊กอิน

  • mediaType

    สตริง

    ประเภทสื่อของเนื้อหาสตริงที่ปลั๊กอินสร้างขึ้น