Chrome DevTools でユーザーフローを記録、再生、測定する

1. はじめに

[Recorder]（レコーダー）パネルを使用して、ユーザーフローを記録、再生、測定できます。

新しい [Recorder] パネル（プレビュー機能）の概要は、こちらの動画でご覧いただけます。

学習内容

• ユーザーフローを記録する
• ユーザーフローを再生する
• ユーザーフローを編集する
• ユーザーフローを測定する

必要なもの

• 動作するパソコンと安定した Wi-Fi 接続
• Chrome 101 以降

2. [Recorder] パネルを開く

次の手順で [Recorder] パネルを開きます。

1. DevTools を開きます。
2. その他アイコン > [その他のツール] > [Recorder] をクリックします。または、コマンド メニューを使用して、[Recorder] パネルを開きます。

3. 開始する

こちらのコーヒー注文のデモページを使用します。購入手続きは、ショッピングのウェブサイトで一般的なユーザーフローです。

以降のセクションでは、[Recorder] パネルで以下の購入手続きフローを記録、再生、測定する方法について説明します。

1. カートにコーヒーを追加する。
2. カートに別のコーヒーを追加する。
3. カートページに移動する。
4. カートからコーヒーを 1 つ削除する。
5. 購入手続きを開始する。
6. 支払い情報を入力する。
7. 購入手続きを完了する。

ページを開く

4. ユーザーフローを記録する

1. デモページを開きます。[Start new recording]（新しい記録を開始）をクリックして開始します。
2. [Recording name]（記録名）テキスト ボックスに「coffee checkout」と入力します。
3. [Start a new recording] をクリックします。記録が開始されます。パネルに [Recording...]（記録しています）と表示され、記録が進行中であることが示されます。
4. 「Cappuccino」をクリックしてカートに追加します。
5. 「Americano」をクリックしてカートに追加します。[Recorder] に、これまでに行ったステップが表示されます。
6. カートページに移動します。
7. カートから「Americano」を削除します。
8. 「Total: $19.00」をクリックして、購入手続きを開始します。
9. 支払い情報フォームで [Name]（名前）と [Email]（メール）のテキスト ボックスに入力し、[I would like to receive order updates and promotional messages.]（ご注文の状況とお得な情報を受け取る）チェックボックスをオンにします。
10. [Submit]（送信）をクリックして購入手続きを完了します。
11. [Recorder] パネルで [End recording]（記録を終了）をクリックして記録を終了します。

5. ユーザーフローを再生する

ユーザーフローを記録した後、[Replay]（再生）をクリックして再生できます。

ページでユーザーフローが再生されます。再生の進捗状況が [Recorder] パネルにも表示されます。

[Replay settings]（再生の設定）で低速のネットワーク接続をシミュレーションできます。たとえば、[Replay settings] を展開し、[Network]（ネットワーク）プルダウンで [低速 3G] を選択します。

すべてのステップのタイムアウトを長く設定することもできます。

今後、他の設定もサポートされる可能性があります。ご希望の再生設定をお知らせください。

6. ユーザーフローを測定する

[Measure performance]（パフォーマンスを測定）をクリックして、ユーザーフローのパフォーマンスを測定できます。たとえば、購入手続きはショッピングのウェブサイトの重要なユーザーフローです。[Recorder] パネルでは、記録済みの購入手続きフローを定期的に測定できます。

[Measure performance] をクリックすると、ユーザーフローが再生され、[パフォーマンス] パネルにパフォーマンス トレースが表示されます。

[パフォーマンス] パネルでページのランタイム パフォーマンスを分析する方法をご確認ください。[パフォーマンス] パネルの [ウェブに関する主な指標] チェックボックスをオンにすると、ウェブに関する主な指標を確認して、ユーザーのブラウジング エクスペリエンスの改善方法を探ることができます。

7. ユーザーフローを編集する

ユーザーフローを編集するオプションを見ていきましょう。

[Recorder] パネルの上部には、次のオプションがあります。

1. 新しい記録を追加する。+ アイコンをクリックして、新しい記録を追加できます。
2. すべての記録を表示する。保存した記録のリストがプルダウンに表示されます。[[number] recording(s)]（[数字] 件の記録）を選択して、保存した記録のリストを展開、管理できます。
3. 記録をエクスポートする。ユーザーフローを Puppeteer スクリプトとしてエクスポートし、スクリプトをさらにカスタマイズできます。
4. 記録を削除する。選択した記録を削除します。

記録名の横にある編集ボタンをクリックして、記録の名前を編集することもできます。

8. ステップを編集する

ワークフローのステップを編集するオプションを見ていきましょう。

ステップを展開する

1. 各ステップを展開して、アクションの詳細を表示できます。たとえば、クリック要素「Cappuccino」のステップを展開します。
2. 上記のステップには、2 つのセレクタがあります。詳しくは、セレクタの優先度をご覧ください。ユーザーフローを再生すると、レコーダーはセレクタが関連付けられている要素のクエリを順番に試行します。たとえば、レコーダーで最初のセレクタが関連付けられている要素のクエリが正常に行われると、2 番目のセレクタをスキップして次のステップに進みます。
3. セレクタは追加、削除できます。たとえば、この場合は aria/Cappuccino で十分なため、セレクタ 2 を削除できます。削除するには、セレクタ 2 にカーソルを合わせて、- をクリックします。
4. セレクタは編集することもできます。たとえば、「Cappuccino」ではなく「Mocha」を選択する場合、セレクタの値を「aria/Mocha」に変更できます。 または、選択ボタンをクリックして、ページで「Mocha」をクリックします。
5. フローをもう一度再生すると、「Cappuccino」ではなく「Mocha」が選択されます。
6. 他のステップ プロパティ（type、target、value など）も編集してみてください。

ステップを追加、削除する

ステップを追加または削除することもできます。これは、新たなステップを追加する場合や、誤って追加したステップを削除する場合に便利です。ユーザーフローを再度記録する必要はなく、編集するだけですみます。ステップの横にあるその他メニューをクリックして、メニューを開きます。

1. たとえば、「Mocha」ステップの後の「Scroll」イベントは不要です。この場合は [Remove step]（ステップを削除）を選択して削除できます。
2. ページに 9 種類のコーヒーが表示されるまで待ってからステップを行うとします。
3. 「Mocha」ステップのメニューで、[Add step before]（前にステップを追加）を選択します。
4. 「Assert Element」で以下の詳細を指定して、新しいステップを編集します。
   • type: waitForElement
   • selector #1: .cup
   • operator: ==（[add operator]（演算子を追加）をクリックします）
   • count: 9（[add count]（数量を追加）をクリックします）
5. フローを再生して変更を確認します。

9. 演習の完了

これで、この Codelab は終了です。

記録のセレクタはカスタマイズすることもできます。詳しくは、こちらのドキュメントをご覧ください。

この Codelab の感想をお聞かせください。

面白くありませんでした。 気に入りました。