chrome.devtools.performance

説明

chrome.devtools.recorder API を使用して、DevTools の [Recorder] パネルをカスタマイズします。

デベロッパー ツール API の基本的な使い方については、DevTools API の概要をご覧ください。

対象

Chrome 105 以降

コンセプトと使用方法

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

Chrome 112 以降

拡張機能によって作成されたビューを表し、レコーダー パネル内に埋め込まれます。

プロパティ

  • onHidden

    Event<functionvoidvoid>

    ビューが非表示になると呼び出されます。

    onHidden.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • onShown

    Event<functionvoidvoid>

    ビューが表示されたときに呼び出されます。

    onShown.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • 表示する

    void

    拡張機能がこのビューをレコーダー パネルに表示することを示します。

    show 関数は次のようになります。 

    () => {...}

メソッド

createView()

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

リプレイを処理できるビューを作成します。このビューは、[Recorder] パネル内に埋め込まれます。

パラメータ

  • title

    文字列

    デベロッパー ツール ツールバーの拡張機能アイコンの横に表示されるタイトル。

  • pagePath

    文字列

    拡張機能ディレクトリに対するパネルの HTML ページの相対パス。

戻り値

registerRecorderExtensionPlugin()

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

レコーダー拡張機能プラグインを登録します。

パラメータ

  • RecorderExtensionPlugin インターフェースを実装するインスタンス。

  • name

    文字列

    プラグインの名前。

  • mediaType

    文字列

    プラグインが生成する文字列コンテンツのメディアタイプ。