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
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) => {...}
-
recording
object
A recording of the user interaction with the page. This should match Puppeteer's recording schema.
-
-
stringify
void
Converts a recording from the Recorder panel format into a string.
The
stringify
function looks like:(recording: object) => {...}
-
recording
object
A recording of the user interaction with the page. This should match Puppeteer's recording schema.
-
-
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
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.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
-
plugin
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.