Dale St. Marthe
[Recorder]（レコーダー）パネルを使用して、ユーザーフローを記録、測定、編集できます。[レコーダー] パネルには、フロントエンド デベロッパーがコンバージョン パスを改善してデバッグするのに役立つ一連の診断ツールが含まれています。ガイド付きチュートリアルについては、ユーザーフローを記録、再生、測定するをご覧ください。
概要
[Recorder] パネルでは、次のことができます。
- ユーザーフローを記録して再生する: 記録を開始すると、[Recorder]（レコーダー）パネルでウェブサイトまたはアプリの特定のイベントが追跡されます。その後、ユーザーフローを再生してステップ間を移動できます。再生速度を遅くして、ユーザーフローで何が起こっているかを詳しく把握できます。また、外部ライブラリでリプレイする方法も学びます。
- ユーザーフローを編集、デバッグする: 記録中のユーザーフローのステップを編集できます。ブレークポイントを設定して、ユーザーフローを段階的に実行します。コードを検査して、手順とそのコードを並べて表示します。
- パフォーマンス プロファイルを生成する: プロファイルを生成して [パフォーマンス] パネルでレポートを表示し、記録されたユーザーフローのパフォーマンスを測定します。
- ユーザーフローを共有、エクスポートする: ユーザーフローをエクスポートできます。エクスポート形式は、JSON ファイル、複数の Puppeteer 形式、レコーダーのエクスポート拡張機能で提供される任意の形式です。ユーザーフローをインポートすることもできます。
レコーダー パネルをワークフローに統合し、機能を拡張するには、拡張機能を使用してレコーダー パネルをカスタマイズします。
Recorder（レコーダー）パネルを開く
[Recorder] パネルを開く手順は次のとおりです。
- DevTools を開きます。
- 次のキーを押してコマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
- 「
Recorder panel」と入力し、[Show Recorder panel] を選択して Enter キーを押します。
または、右上の [その他アイコン] > [その他のツール] > [レコーダー パネル] を選択します。