ブレークポイントの使用

学習の目的

この単元を完了すると、次のことができるようになります。

• ブレークポイントを実行する。
  
• ブレークポイントを管理する。
  

おそらくは今までに、JavaScript のコードを途中で一時停止して何が起こっているかを確認するために、debugger コマンドを使ったことがあると思います。そして問題を解決したら、コードを本番環境にプッシュする前に debugger コマンドを削除する必要がありました。debugger コマンドが必要な場合もありますが、コードを一時停止させるにはもっと便利な方法があります。ブラウザーでページを表示しているときに、DevTools でブレークポイントを追加するのです。ブレークポイントは簡単に設定できるうえ、使用後のクリーンアップは不要です。

一緒にトレイルを進みましょう

エキスパートの説明を見ながらこのステップを実行したい場合は、次の動画をご覧ください。これは Trailhead Live の「Trail Together」 (一緒にトレイル) シリーズの一部です。

(巻き戻して最初から見直したい場合、このクリップは 26:18 分から開始されます。)

ブレークポイント

ブレークポイントを使用すると、JavaScript を一時停止することができます。コードの一時停止中には、変数やコードの状態を表示できます。ブレークポイントにはいくつかの種類がありますが、

コード行ブレークポイント

コード行ブレークポイントは、コードの特定のセクションを調べたい場合に便利です。では、選択したコード行が実行される前に一時停止するブレークポイントを追加してみましょう。

前の単元を完了しているのなら、すでにコードエディターで display.js が開いているはずです。もしまだ開いていなければ、前の単元の「Lightning Web コンポーネントの特定」でセクションの指示に従って開いてください。

1. DevTools コードエディターで handleIncrement(event) 関数を見つけます。
   
2. handleIncrement 関数内の const operand = event.detail; 行の番号をクリックします。行番号が青いポインターで強調表示され、その行にブレークポイントが設定されていることを示します。
   

3. ブレークポイントは、右側の JavaScript デバッグペインの [Breakpoints (ブレークポイント)] の下にも表示されます。
   

4. Solutions アプリケーションで [+1] をクリックします。コードの実行がブレークポイントで一時停止します。
   

[Paused in debugger (デバッガーで一時停止)] インジケーター (1) に注目してください。[+1] ボタン (2) はクリックされた状態になっています。ブレークポイント制御ツールバー (3) にも「Paused in debugger (デバッガーで一時停止)」と表示されています。[Call Stack (コールスタック)] (4) には、handleIncrement と handleAdd の 2 つの関数が示されています。青い矢印アイコンは、デバッガーが handleIncrement 関数で停止していることを示しています。ブレークポイントがある行が強調表示されていて (5)、デバッガーがブレークポイントで一時停止している場所を示しています。

5. マウスポインターを operand に合わせます。コードエディターには、変数の値が、現在のコード行が実行される前の状態であることが示されています。
   

ブレークポイント間の移動

コードの実行が一時停止されている状態では、コードを 1 行ずつ実行したり、あるいは関数にステップインまたは関数からステップアウトしたりできます。これらのオプションを使用すると、コードをステップ実行しながら制御フローとプロパティ値を監視できます。

JavaScript デバッグペインのブレークポイント制御ツールバーには、ブレークポイントを操作するためのボタンがあります。

条件付きコード行ブレークポイント

条件付きコード行ブレークポイントを使用すると、条件が true になった場合にのみコードの実行を一時停止します。

1. this.counter += operand (追加したブレークポイントの下の) 行番号を右クリックして、[Add conditional breakpoint (条件付きブレークポイントを追加)] を選択します。
   

2. this.counter > 1 と入力して Enter を押します。
   

条件付きブレークポイントはオレンジ色のポインターで示され、条件付きであることを示す疑問符 (?) が付けられます。

条件付きブレークポイントを表示または更新するには、ブレークポイントの行番号を右クリックして、[Edit breakpoint (ブレークポイントを編集)] を選択します。

マウスポインターを this.counter に合わせます。値が 0 であるため、条件付きブレークポイントの条件を満足しません。

3. [Resume script execution (スクリプトの実行を再開)] をクリックします。コードが条件付きブレークポイントで一時停止せずに実行されることに注目してください。
   
4. Solutions アプリケーションで [+1] をクリックします。コードの実行が最初のブレークポイントで一時停止します。今度は this.counter の値は 1 です。
   
5. [Resume script execution (スクリプトの実行を再開)] をクリックします。今回も、コードが条件付きブレークポイントで一時停止せずに実行されます。
   
6. [+1] をクリックします。コードの実行が最初のブレークポイントで一時停止します。this.counter の値が 2 であるため、条件付きブレークポイントでコードの実行が一時停止します。
   
7. [Resume script execution (スクリプトの実行を再開)] をクリックします。今回は条件付きブレークポイントでコードの実行が一時停止しましたか?
   

ブレークポイントを管理する

複数のブレークポイントを異なるファイルに保存しておくと、管理が難しくなります。そんなときに便利なのが [Breakpoints (ブレークポイント)] (JavaScript デバッグペインの 5 番目のオプション) です。[Breakpoints (ブレークポイント)] では、コード行のブレークポイントを無効化したり有効化したりできます。

handleAdd 関数のブレークポイント (1) は control.js に保存されていますが、[Breakpoints (ブレークポイント)] (2) には、display.js のブレークポイントと一緒に表示されています。

[Breakpoints (ブレークポイント)] では、ブレークポイントのチェックボックスをオフにすることで 1 つずつ無効化できます。[Breakpoints (ブレークポイント)] 内の任意の場所を右クリックすると、その他のオプションが表示されます。

[代替テキスト:

[Breakpoints (ブレークポイント)] ペイン内を右クリックすると、追加オプションとして [Remove breakpoint (ブレークポイントを削除)]、[Reveal location (場所を表示)]、[Deactivate breakpoints (ブレークポイントを無効化)]、[Disable all breakpoints (すべてのブレークポイントを無効化)]、[Disable breakpoints in file (ファイルのブレークポイントを無効化)]、[Remove all breakpoints (すべてのブレークポイントを削除)]、[Remove other breakpoints (他のブレークポイントを削除)] が表示されます。]

[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)