chrome.devtools.performance

Mô tả

Sử dụng API chrome.devtools.recorder để tuỳ chỉnh bảng điều khiển Trình ghi trong Công cụ cho nhà phát triển.

Xem Tóm tắt API Công cụ cho nhà phát triển để biết giới thiệu chung về cách sử dụng API Công cụ dành cho nhà phát triển.

Phạm vi cung cấp

Chrome 105 trở lên

Khái niệm và cách sử dụng

API chrome.devtools.performance cho phép nhà phát triển tương tác với các tính năng ghi của bảng điều khiển bảng điều khiển Hiệu suất trong Công cụ của Chrome cho nhà phát triển. Bạn có thể dùng API này để nhận thông báo khi quá trình ghi bắt đầu hoặc dừng.

Có 2 sự kiện:

  • onProfilingStarted: Sự kiện này được kích hoạt khi bảng điều khiển Performance (Hiệu suất) bắt đầu ghi lại dữ liệu về hiệu suất.
  • onProfilingStopped: Sự kiện này được kích hoạt khi bảng điều khiển Performance (Hiệu suất) ngừng ghi dữ liệu về hiệu suất. lập trường liên kết dấu vết ngăn xếp hiện tại với cre Cả hai sự kiện đều không có thông số liên quan.

Bằng cách lắng nghe những sự kiện này, nhà phát triển có thể tạo các tiện ích phản ứng với trạng thái ghi trong bảng Hiệu suất, cung cấp tính năng tự động hoá bổ sung trong quá trình phân tích hiệu suất.

Ví dụ

Đây là cách bạn có thể sử dụng API để theo dõi thông tin cập nhật về trạng thái ghi


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

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

Loại

RecorderExtensionPlugin

Một giao diện trình bổ trợ mà bảng điều khiển Máy ghi âm gọi để tuỳ chỉnh bảng điều khiển Máy ghi âm.

Thuộc tính

  • phát lại

    void

    Chrome 112 trở lên

    Cho phép tiện ích triển khai chức năng phát lại tuỳ chỉnh.

    Hàm replay có dạng như sau: 

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

    • đang ghi

      đối tượng

      Bản ghi hoạt động tương tác của người dùng với trang. Mã này phải khớp với giản đồ ghi của Puppeteer.

  • stringify

    void

    Chuyển đổi một bản ghi âm từ định dạng bảng điều khiển Máy ghi âm thành một chuỗi.

    Hàm stringify có dạng như sau: 

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

    • đang ghi

      đối tượng

      Bản ghi hoạt động tương tác của người dùng với trang. Mã này phải khớp với giản đồ ghi của Puppeteer.

  • stringifyStep

    void

    Chuyển đổi một bước của bản ghi từ định dạng bảng điều khiển Máy ghi âm thành một chuỗi.

    Hàm stringifyStep có dạng như sau: 

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

    • Nhấp vào bước tiếp theo.

      đối tượng

      Một bước ghi lại hoạt động tương tác của người dùng với trang. Giá trị này phải khớp với giản đồ bước của Puppeteer.

RecorderView

Chrome 112 trở lên

Biểu thị một khung hiển thị do tiện ích tạo ra để nhúng vào bảng điều khiển Trình ghi.

Thuộc tính

  • onHidden

    Sự kiện<functionvoidvoid>

    Được kích hoạt khi chế độ xem bị ẩn.

    Hàm onHidden.addListener có dạng như sau: 

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

    • số gọi lại

      hàm

      Tham số callback sẽ có dạng như sau: 

      () => void

  • onShown

    Sự kiện<functionvoidvoid>

    Được kích hoạt khi chế độ xem được hiển thị.

    Hàm onShown.addListener có dạng như sau: 

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

    • số gọi lại

      hàm

      Tham số callback sẽ có dạng như sau: 

      () => void

  • hiện (lên)/cho thấy

    void

    Cho biết rằng tiện ích muốn hiển thị chế độ xem này trong bảng điều khiển Máy ghi âm.

    Hàm show có dạng như sau: 

    () => {...}

Phương thức

createView()

Chrome 112 trở lên 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Tạo một khung hiển thị có thể xử lý hoạt động phát lại. Chế độ xem này sẽ được nhúng bên trong bảng điều khiển Máy ghi âm.

Thông số

  • tiêu đề

    string

    Tiêu đề được hiển thị bên cạnh biểu tượng tiện ích trên thanh công cụ Công cụ dành cho nhà phát triển.

  • pagePath

    string

    Đường dẫn của trang HTML của bảng điều khiển so với thư mục tiện ích.

Giá trị trả về

registerRecorderExtensionPlugin()

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

Đăng ký một trình bổ trợ tiện ích Máy ghi âm.

Thông số

  • trình bổ trợ

    RecorderExtensionPlugin

    Một ví dụ triển khai giao diện RecorderExtensionPlugin.

  • tên

    string

    Tên trình bổ trợ.

  • mediaType

    string

    Loại phương tiện của nội dung chuỗi mà trình bổ trợ tạo ra.