ブレークポイントの使用
学習の目的
この単元を完了すると、次のことができるようになります。
- ブレークポイントを実行する。
- ブレークポイントを管理する。
おそらくは今までに、JavaScript のコードを途中で一時停止して何が起こっているかを確認するために、debugger コマンドを使ったことがあると思います。そして問題を解決したら、コードを本番環境にプッシュする前に debugger コマンドを削除する必要がありました。debugger コマンドが必要な場合もありますが、コードを一時停止させるにはもっと便利な方法があります。ブラウザーでページを表示しているときに、DevTools でブレークポイントを追加するのです。ブレークポイントは簡単に設定できるうえ、使用後のクリーンアップは不要です。
一緒にトレイルを進みましょう
エキスパートの説明を見ながらこのステップを実行したい場合は、次の動画をご覧ください。これは Trailhead Live の「Trail Together」(一緒にトレイル) シリーズの一部です。
(巻き戻して最初から見直したい場合、このクリップは 26:18 分から開始されます。)
ブレークポイント
ブレークポイントを使用すると、JavaScript を一時停止することができます。コードの一時停止中には、変数やコードの状態を表示できます。ブレークポイントにはいくつかの種類がありますが、
コード行ブレークポイント
コード行ブレークポイントは、コードの特定のセクションを調べたい場合に便利です。では、選択したコード行が実行される前に一時停止するブレークポイントを追加してみましょう。
前の単元を完了しているのなら、すでにコードエディターで display.js が開いているはずです。もしまだ開いていなければ、前の単元の「Lightning Web コンポーネントの特定」でセクションの指示に従って開いてください。
- DevTools コードエディターで
handleIncrement(event)関数を見つけます。
- handleIncrement 関数内の
const operand = event.detail;行の番号をクリックします。行番号が青いポインターで強調表示され、その行にブレークポイントが設定されていることを示します。
- ブレークポイントは、右側の JavaScript デバッグペインの [Breakpoints (ブレークポイント)] の下にも表示されます。
- Solutions アプリケーションで [+1] をクリックします。コードの実行がブレークポイントで一時停止します。
[Paused in debugger (デバッガーで一時停止)] インジケーター (1) に注目してください。[+1] ボタン (2) はクリックされた状態になっています。ブレークポイント制御ツールバー (3) にも「Paused in debugger (デバッガーで一時停止)」と表示されています。青い矢印アイコンは、デバッガーが handleIncrement 関数で停止していることを示しています。ブレークポイントがある行が強調表示されていて (4)、デバッガーがブレークポイントで一時停止している場所を示しています。
ブレークポイント間の移動
コードの実行が一時停止されている状態では、コードを 1 行ずつ実行したり、あるいは関数にステップインまたは関数からステップアウトしたりできます。これらのオプションを使用すると、コードをステップ実行しながら制御フローとプロパティ値を監視できます。
JavaScript デバッグペインのブレークポイント制御ツールバーには、ブレークポイントを操作するためのボタンがあります。
ボタン |
アクション |
説明 |
|---|---|---|
|
Resume script execution (スクリプトの実行を再開) と Pause script execution (スクリプトの実行を再開一時停止) |
コードを次のブレークポイントまで、または現在が最後のブレークポイントであればコードの最後まで実行します。 |
|
Step over next function call (次の関数コールまでステップオーバー) |
関数を含む行で一時停止している場合、[Step over next function call (次の関数コールまでステップオーバー)] は関数内のすべてのコードを実行して一時停止します。 |
|
Step into next function call (次の関数コールまでステップイン) |
関数を含む行で一時停止している場合、Step into next function call (次の関数コールまでステップイン) は次の関数の最初の行までコードを実行して一時停止します。 |
|
Step out of current function (現在の関数からステップアウト) |
関数内で一時停止している場合、[Step out of current function (現在の関数からステップアウト)] は関数の残りのコードを実行して一時停止します。 |
|
Step (ステップ) |
現在のコード行を実行して一時停止します。 |
|
Deactivate/Activate breakpoints (ブレークポイントの無効化/有効化) |
すべてのブレークポイントをそのままにして、無効と有効を切り替えます。 |
条件付きコード行ブレークポイント
条件付きコード行ブレークポイントを使用すると、条件が true になった場合にのみコードの実行を一時停止します。
-
this.counter += operand(追加したブレークポイントの下の) 行番号を右クリックして、[Add conditional breakpoint (条件付きブレークポイントを追加)] を選択します。![行番号を右クリックすると、[Add breakpoint (ブレークポイントを追加)]、[Add conditional breakpoint (条件付きブレークポイントを追加)]、[Add logpoint (ログポイントを追加)]、[Never pause here (ここでは一時停止しない)]、[Add script to ignore list (スクリプトを無視リストに追加)] の 5 つのコマンドが表示される。](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/lwc-troubleshooting/use-breakpoints/images/ja-JP/261f3bfdc061cd0c84dff5080b5761ed_kix.s9d623css4de.png)
-
this.counter > 1と入力して Enter を押します。
条件付きブレークポイントはオレンジ色のポインターで示され、条件付きであることを示す疑問符 (?) が付けられます。
マウスポインターをthis.counterに合わせます。値が 0 であるため、条件付きブレークポイントの条件を満足しません。
条件付きブレークポイントを表示または更新するには、ブレークポイントの行番号を右クリックして、[Edit breakpoint (ブレークポイントを編集)] を選択します。
- [Resume script execution (スクリプトの実行を再開)]
をクリックします。コードが条件付きブレークポイントで一時停止せずに実行されることに注目してください。
- Solutions アプリケーションで [+1] をクリックします。コードの実行が最初のブレークポイントで一時停止します。今度は
this.counterの値は 1 です。
- [Resume script execution (スクリプトの実行を再開)]
をクリックします。今回も、コードが条件付きブレークポイントで一時停止せずに実行されます。
-
[+1] をクリックします。コードの実行が最初のブレークポイントで一時停止します。
this.counterの値が 2 であるため、条件付きブレークポイントでコードの実行が一時停止します。
- [Resume script execution (スクリプトの実行を再開)]
をクリックします。今回は条件付きブレークポイントでスクリプトの実行が一時停止しましたか?
ブレークポイントを管理する
複数のブレークポイントを異なるファイルに保存しておくと、管理が難しくなります。そんなときに便利なのが [Breakpoints (ブレークポイント)] (JavaScript デバッグペインの 5 番目のオプション) です。[Breakpoints (ブレークポイント)] では、コード行のブレークポイントを無効化したり有効化したりできます。
handleAdd 関数のブレークポイント (1) は control.js に保存されていますが、[Breakpoints (ブレークポイント)] (2) には、display.js のブレークポイントと一緒に表示されています。
[Breakpoints (ブレークポイント)] では、ブレークポイントのチェックボックスをオフにすることで 1 つずつ無効化できます。[Breakpoints (ブレークポイント)] 内の任意の場所を右クリックすると、その他のオプションが表示されます。
![[Breakpoints (ブレークポイント)] ペイン内を右クリックすると、追加オプションとして [Reveal location (場所を表示)]、[Edit condition (条件を編集)]、[Enable all breakpoints (すべてのブレークポイントを有効化)]、[Disable all breakpoints (すべてのブレークポイントを無効化)]、[Remove breakpoint (ブレークポイントを削除)]、[Remove other breakpoints (他のブレークポイントを削除)]、[Remove all breakpoints (すべてのブレークポイントを削除)] が表示されます。](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/lwc-troubleshooting/use-breakpoints/images/ja-JP/38ef9628e56a708221fc35e08e496aba_kix.kp8s7fdy3byr.png)
[Breakpoints (ブレークポイント)] でブレークポイントの選択を解除すると、コード行を強調表示するポインターの色が薄い青に変わり、ブレークポイントが無効であることを示します。
イベントリスナーブレークポイント
JavaScript デバッグペインを下にスクロールすると、[Event Listener Breakpoints (イベントリスナーブレークポイント)] があります。このオプションでは、イベントが起動された後で実行されるイベントリスナーコードで一時停止するためのブレークポイントを設定できます。いろいろなオプションから選択できます。イベントのカテゴリ全体で一時停止したり、特定種別のイベントでのみ一時停止したりできます。
リソース
- Chrome DevTools: JavaScript Debugging Reference (JavaScript デバッグリファレンス)
- Chrome DevTools: Pause Your Code with Breakpoints (ブレークポイントでコードを一時停止する)
- Salesforce 開発者ブログ: Step Up Your LWC Skills – Part 2 (LWC スキルのステップアップ – パート 2)