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