拡張機能でレコーダーをカスタマイズする

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

使用するツールに適したサードパーティ製の拡張機能をインストールすることで、レコーダーをカスタマイズしてワークフローに統合できます。

拡張機能のコレクションを確認する。

拡張機能をインストールする

レコーダーをツールと統合するには、拡張機能をインストールします。

  1. コレクションから拡張機能を選択してクリックします。
  2. Chrome ウェブストアで、[Chrome に追加] をクリックします。
  3. 新しいタブで DevTools を開き、[レコーダー] で新しいカスタム オプションを見つけます。

拡張機能をエクスポートして再生します。

このスクリーンショットは、拡張機能によって提供されるカスタム エクスポート オプションとリプレイ オプションを示しています。

トラブルシューティング

拡張機能をインストールしてもエクスポート オプションと再生オプションが表示されない場合は、以下を確認するか、以下を行います。

  • この拡張機能はウェブページでのみ機能します。たとえば、chrome://extensions のような chrome:// ページではエクスポート オプションを利用できません。
  • 拡張機能をインストールした後は、必ず新しいブラウザタブを開くようにしてください。
  • 管理者のポリシー。この拡張機能は、管理者ポリシーによってブロックされているため表示されない可能性があります（chrome://policy/ の ExtensionSettings の runtime_blocked_hosts リストをご覧ください）。

既知の問題:

  • Chrome 104 と Chrome 105 では、最初の DevTools パネルとしてレコーダーを開くとエクスポート オプションが表示されません。問題 1351416回避策として、まず別のパネル（Console など）を開いてから、レコーダーを開きます。この問題は Chrome 106 で修正されています。

独自の拡張機能を作成する

ニーズに合わせてレコーダーをさらにカスタマイズするには、独自の拡張機能を作成します。

  1. Chrome DevTools のレコーダー以外でユーザーフローのカスタマイズと自動化を行うをご覧ください。
  2. chrome.devtools.recorder API の詳細を確認する。
  3. 拡張機能の例をご覧ください。
  4. 拡張機能を開発し、Chrome ウェブストアで公開します。