説明
chrome.devtools.recorder
API を使用して、DevTools の [Recorder] パネルをカスタマイズします。
デベロッパー ツール API の基本的な使い方については、DevTools API の概要をご覧ください。
対象
コンセプトと使用方法
chrome.devtools.performance API を使用すると、デベロッパーは Chrome DevTools の [Performance] パネルパネルの記録機能を操作できるようになります。この API を使用すると、録画の開始時と停止時に通知を受け取ることができます。
次の 2 つのイベントが利用できます。
- onProfilingStarted: このイベントは、[Performance] パネルがパフォーマンス データの記録を開始すると発生します。
- onProfilingStopped: このイベントは、[Performance] パネルがパフォーマンス データの記録を停止すると発生します。 現在のスタック トレースを 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
[レコーダー] パネルの録音を文字列に変換します。
stringify
関数は次のようになります。(recording: object) => {...}
-
録画中
オブジェクト
ページでのユーザー操作の記録。これは Puppeteer の記録スキーマと一致する必要があります。
-
-
stringifyStep
void
レコーダー パネルの録音のステップを文字列に変換します。
stringifyStep
関数は次のようになります。(step: object) => {...}
-
ステップ
オブジェクト
ページでのユーザー インタラクションを記録するステップ。これは Puppeteer のステップ スキーマと一致する必要があります。
-
RecorderView
拡張機能によって作成されたビューを表し、レコーダー パネル内に埋め込まれます。
プロパティ
-
onHidden
Event<functionvoidvoid>
ビューが非表示になると呼び出されます。
onHidden.addListener
関数は次のようになります。(callback: function) => {...}
-
callback
関数
callback
パラメータは次のようになります。() => void
-
-
onShown
Event<functionvoidvoid>
ビューが表示されたときに呼び出されます。
onShown.addListener
関数は次のようになります。(callback: function) => {...}
-
callback
関数
callback
パラメータは次のようになります。() => void
-
-
表示する
void
拡張機能がこのビューをレコーダー パネルに表示することを示します。
show
関数は次のようになります。() => {...}
メソッド
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
リプレイを処理できるビューを作成します。このビューは、[Recorder] パネル内に埋め込まれます。
パラメータ
-
title
文字列
デベロッパー ツール ツールバーの拡張機能アイコンの横に表示されるタイトル。
-
pagePath
文字列
拡張機能ディレクトリに対するパネルの HTML ページの相対パス。
戻り値
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
レコーダー拡張機能プラグインを登録します。
パラメータ
-
plugin
RecorderExtensionPlugin インターフェースを実装するインスタンス。
-
name
文字列
プラグインの名前。
-
mediaType
文字列
プラグインが生成する文字列コンテンツのメディアタイプ。