chrome.devtools.performance

Description

Use the chrome.devtools.recorder API to customize the Recorder panel in DevTools.

See DevTools APIs summary for general introduction to using Developer Tools APIs.

Availability

Chrome 105+

Concepts and usage

The chrome.devtools.performance API allows developers to interact with the recording features of the Performance panel panel in Chrome DevTools. You can use this API to get notifications when recording starts or stops.

Two events are available:

  • onProfilingStarted: This event is fired when the Performance panel begins recording performance data.
  • onProfilingStopped: This event is fired when the Performance panel stops recording performance data. stance that associates the current stack trace with the cre Both events don't have any associated parameters.

By listening to these events, developers can create extensions that react to the recording status in the Performance panel, providing additional automation during performance profiling.

Examples

This is how you can use the API to listen to recording status updates


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

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

Types

RecorderExtensionPlugin

A plugin interface that the Recorder panel invokes to customize the Recorder panel.

Properties

  • replay

    void

    Chrome 112+

    Allows the extension to implement custom replay functionality.

    The replay function looks like: 

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

  • stringify

    void

    Converts a recording from the Recorder panel format into a string.

    The stringify function looks like: 

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

  • stringifyStep

    void

    Converts a step of the recording from the Recorder panel format into a string.

    The stringifyStep function looks like: 

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

    • step

      object

      A step of the recording of a user interaction with the page. This should match Puppeteer's step schema.

RecorderView

Chrome 112+

Represents a view created by extension to be embedded inside the Recorder panel.

Properties

  • onHidden

    Event<functionvoidvoid>

    Fired when the view is hidden.

    The onHidden.addListener function looks like: 

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

    • callback

      function

      The callback parameter looks like: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Fired when the view is shown.

    The onShown.addListener function looks like: 

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

    • callback

      function

      The callback parameter looks like: 

      () => void

  • show

    void

    Indicates that the extension wants to show this view in the Recorder panel.

    The show function looks like: 

    () => {...}

Methods

createView()

Chrome 112+ 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Creates a view that can handle the replay. This view will be embedded inside the Recorder panel.

Parameters

  • title

    string

    Title that is displayed next to the extension icon in the Developer Tools toolbar.

  • pagePath

    string

    Path of the panel's HTML page relative to the extension directory.

Returns

registerRecorderExtensionPlugin()

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

Registers a Recorder extension plugin.

Parameters

  • An instance implementing the RecorderExtensionPlugin interface.

  • name

    string

    The name of the plugin.

  • mediaType

    string

    The media type of the string content that the plugin produces.