说明
使用 chrome.devtools.recorder
API 自定义开发者工具中的“Recorder”面板。
有关使用开发者工具 API 的一般说明,请参阅 DevTools API 摘要。
可用性
概念和用法
借助 chrome.devtools.performance API,开发者可以与 Chrome 开发者工具中“性能”面板的录制功能进行互动。您可以使用此 API 在录制开始或停止时收到通知。
您可以进行以下两种活动:
- onProfilingStarted:当 Performance 面板开始记录效果数据时会触发此事件。
- onProfilingStopped:当性能面板停止记录性能数据时会触发此事件。 将当前堆栈轨迹与 cre 相关联的实例 两个事件都没有任何关联的参数。
通过监听这些事件,开发者可以创建对 Performance 面板中的记录状态做出响应的扩展程序,从而在性能分析期间提供额外的自动化功能。
示例
这就是使用 API 监听录制状态更新的方式
chrome.devtools.performance.onProfilingStarted.addListener(() => {
// Profiling started listener implementation
});
chrome.devtools.performance.onProfilingStopped.addListener(() => {
// Profiling stopped listener implementation
})
类型
RecorderExtensionPlugin
“Recorder”面板调用以自定义“Recorder”面板的插件接口。
属性
-
重放
void
Chrome 112 及更高版本允许扩展程序实现自定义重放功能。
replay
函数如下所示:(recording: object) => {...}
-
正在录制
对象
用户与网页互动的记录。这应与 Puppeteer 的录制架构匹配。
-
-
stringify
void
将录音从“Recorder”面板格式转换为字符串。
stringify
函数如下所示:(recording: object) => {...}
-
正在录制
对象
用户与网页互动的记录。这应与 Puppeteer 的录制架构匹配。
-
-
stringifyStep
void
将录音步骤从“Recorder”面板格式转换为字符串。
stringifyStep
函数如下所示:(step: object) => {...}
-
步
对象
记录用户与网页互动的步骤。此架构应与 Puppeteer 的步骤架构匹配。
-
RecorderView
表示通过扩展程序创建且要嵌入“Recorder”面板的视图。
属性
-
onHidden
事件<functionvoidvoid>
在视图隐藏时触发。
onHidden.addListener
函数如下所示:(callback: function) => {...}
-
callback
函数
callback
参数如下所示:() => void
-
-
onShown
事件<functionvoidvoid>
在显示视图时触发。
onShown.addListener
函数如下所示:(callback: function) => {...}
-
callback
函数
callback
参数如下所示:() => void
-
-
显示
void
表示扩展程序希望在“记录器”面板中显示此视图。
show
函数如下所示:() => {...}
方法
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
创建可以处理重放的视图。此视图将嵌入到“记录器”面板中。
参数
-
标题
字符串
在开发者工具工具栏中的扩展程序图标旁边显示的标题。
-
pagePath
字符串
面板的 HTML 页面相对于扩展程序目录的路径。
返回
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
注册录音机扩展程序插件。
参数
-
plugin
实现 RecorderExtensionPlugin 接口的实例。
-
name
字符串
插件的名称。
-
mediaType
字符串
插件生成的字符串内容的媒体类型。