ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。 これにより、プログラムの状態と動作を調べることができます。 ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、 追加の条件をチェックしたり、 ログに書き込んだりするなどのより複雑なロジックを含むものまであります。

ブレークポイントは、一度設定すると、 一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。
ブレークポイントの種類
WebStorm で利用できるブレークポイントの種類は次のとおりです:
行ブレークポイント: ブレークポイントが設定されたコード行に到達したらプログラムを中断します。 このタイプのブレークポイントは、実行可能なコード行に設定できます。
例外ブレークポイント :指定した JavaScript 例外がスローされたときにプログラムを一時停止します。 スタックトレースとは異なり、例外でアプリケーションを一時停止すると、その時点の周囲のコンテキストやデータを確認できます。

ブレークポイントを設定する。
行ブレークポイントを設定する
ブレークポイントを設定したい実行可能なコード行のガターにある行番号をクリックします。 または、行にキャレットを置き、 Ctrl+F8 を押します。
一時的な行ブレークポイントを設定するには、 Ctrl+Alt+Shift+F8 を押します。 または、 Alt を押したままガターをクリックします。 このブレークポイントは、ヒットするとすぐにプロジェクトから削除されます。
アロー関数の場合、1 行内に複数のブレークポイントを設定できます。 ガターをクリックすると、WebStorm はその行にブレークポイントを設定できるヒントを表示します。 該当するヒントをクリックします。

条件付きブレークポイントとログブレークポイントを設定する
条件が満たされたときのみアプリケーションを中断する(条件付きブレークポイント)、またはメッセージをログに記録する(ログブレークポイントまたはログポイント)を設定するには:
ブレークポイントを設定したい行または宣言の横にある行番号を右クリックします。
表示されたメニューから、それぞれ 条件付きブレークポイントの追加 または ロギングブレークポイントの追加 を選択します。
表示されたポップアップで、条件またはログに記録したい式を指定します。
詳細については、 ブレークポイント条件および ログブレークポイントを参照してください。
例外ブレークポイントを設定する
Ctrl+Shift+F8 を押すか、メインメニューから を選択します。
ブレークポイント ダイアログで、 Alt+Insert を押すか
をクリックし、 JavaScript 例外ブレークポイント を選択します。

例外ブレークポイントの追加 ダイアログで、ライブラリまたはプロジェクトから例外クラスを指定します。

例外がスローされるたびにデバッガーを停止するには、 任意の例外 チェックボックスを選択します。

ブレークポイントの管理
ブレークポイントを除去する
例外以外のブレークポイントの場合: ガターのブレークポイントをクリックします。
すべてのブレークポイントの場合: メインメニューの Ctrl+Shift+F8 に移動し、ブレークポイントを選択して、 削除 をクリックするか、 Delete を押します。
誤ってブレークポイントを削除してそのパラメーターを失うのを防ぐために、エディターにドラッグするか、マウスの中央ボタンをクリックして、ブレークポイントを削除することを選択できます。 これを行うには、 に移動して エディターにドラッグするか、マウスの中ボタンでクリックする を選択します。 ブレークポイントをクリックすると、それが 有効または無効になります。
ブレークポイントのミュート
ブレークポイントでしばらく停止する必要がない場合は、 ミュートできます。 これにより、デバッガーセッションを移動することなく、通常のプログラム操作を再開できます。 その後、ブレークポイントのミュートを解除して、デバッグを続行できます。
デバッグ ツールウィンドウのツールバーの ブレークポイントのミュート ボタン
をクリックします。
ブレークポイントを使用可能 / 使用不可にする
ブレークポイントを削除すると、その 内部構成は失われます。 パラメーターを失うことなく個々のブレークポイントを一時的にオフにするには、 無効にすることができます。
例外以外のブレークポイントの場合: 右クリックし、必要に応じて 有効 オプションを設定します。 または、 Alt キーを押しながらブレークポイントをクリックするか、マウスの中ボタンをクリックすることでも設定できます。 マウスの中ボタンにブレークポイントの削除が 割り当てられていないことを確認してください。
すべてのブレークポイントの場合: 実行 | ブレークポイントの表示 Ctrl+Shift+F8 をクリックして、リストのブレークポイントをオン / オフにします。
ブレークポイントの移動 / コピー
ブレークポイントを移動するには、それを別の行にドラッグします。
ブレークポイントをコピーするには、 Ctrl を押したまま、ブレークポイントを別の行にドラッグします。 これにより、宛先に同じパラメーターを持つブレークポイントが作成されます。
設定されたすべてのブレークポイントを表示
ブックマークツールウィンドウで、すべてのブレークポイントのリストを表示できます。 ブレークポイントは、コード内に配置すると、ツールウィンドウの専用リストに自動的に追加されます。
メインメニューで、 に移動するか、 Alt+2 を押して ブレークポイント リストを展開します。

ブレークポイントのグループ化
たとえば、特定の問題に対してブレークポイントをマークアウトする必要がある場合は、ブレークポイントをグループにまとめることができます。
ブレークポイント ダイアログ Ctrl+Shift+F8 で、グループに配置するブレークポイントを選択し、メニューから を選択します。
ブレークポイントのプロパティを構成する
ブレークポイントのタイプに応じて、特定のニーズに合わせて操作を調整できる追加のプロパティを構成できます。 最も使用されるオプションは、 インテンションを介して利用できます。
基本的なブレークポイントプロパティは、インテンションを介して利用できます。 ブレークポイントのある行にキャレットを置き、 Alt+Enter を押します。

プロパティの完全なリストにアクセスするには、ブレークポイントを右クリックして 詳細 をクリックするか、 Ctrl+Shift+F8 を押します。

インテンションリファレンス
ブレークポイントのプロパティリファレンス
この章では、ブレークポイントで使用できる機能について説明します。
有効
プロジェクトから削除せずに一時的にブレークポイントを無効にするには、チェックボックスをオフにします。 無効化されたブレークポイントは、 ステップ実行中にスキップされます。
WebStorm を構成して、ブレークポイントを完全に削除するのではなく、クリック時に有効 / 無効にすることができます。 これを行うには、 に移動し、 ブレークポイントの除去 オプションを エディターにドラッグまたはマウスの中央ボタンをクリック に設定します。
中断
ブレークポイントに達したときにプログラムの実行を一時停止するかどうかを指定します。
非中断ブレークポイントは、プログラムを一時停止せずに何らかの式をログに記録する必要がある場合 (たとえば、メソッドが何回呼び出されたかを知る必要がある場合)、またはヒット時に 依存するブレークポイントを有効にする トリガーブレークポイントを作成する必要がある場合に役立ちます。
条件
特定の条件が満たされた場合にのみデバッガーがブレークポイントで停止するようにする場合は、このチェックボックスを選択します。 true または false に評価される JavaScript ブール式を介して条件を定義します(例: fruit == "grapes")。 この式は、ブレークポイントを設定する行で有効でなければなりません。
複数行の式も入力できます。例えば:
必要に応じて、条件が満たされてデバッガーがブレークポイントで停止した場合に WebStorm に実行させたいアクションを指定できます。詳細は下記 ログ をご覧ください。

デバッガーが条件付きブレークポイントのある行に到達すると、指定されたブール式が評価されます。 式が true と評価された場合、プログラムは中断されます。

ログ 領域で ログ記録アクションを選択した場合、 コンソール タブには対応するメッセージが表示されます。

式の結果は、return ステートメントから取得されます。 return ステートメントがない場合、結果はコードの最後の行から取得されます。
式を評価する際には、予期しない副作用によってプログラムの動作や結果に影響が出る可能性があることに注意してください。
ログオプション
ブレークポイントがヒットしたとき、次の内容がコンソールに記録されます:
「ブレークポイントに到達」メッセージ:
Breakpoint reached at ocean.Whale.main(Whale.java:5)のようなログメッセージ。スタックトレース: 現在のフレームのスタックトレース。 これは、プログラムの実行を中断することなく、このポイントに至ったパスを確認する場合に役立ちます。
評価して記録:
"Initializing"やusers.size()などの任意の式の結果。式の結果は、return ステートメントから取得されます。 return ステートメントがない場合、結果はコードの最後の行から取得されます。この行は式である必要はなく、リテラルでも構いません。 これにより、カスタムメッセージの出力やプログラム実行中の値の追跡が可能になります。
式を評価する際には、予期しない副作用によってプログラムの動作や結果に影響が出る可能性があることに注意してください。
ログブレークポイントを設定する
(オプション) ログに記録する式がエディター内の目の前にある場合は、それを選択します。
Shift を押したままガターをクリックします。
一度ヒットしたら除去する
ブレークポイントがヒットした後、プロジェクトから削除するかどうかを指定します。
次のブレークポイントに到達するまで無効にする
次のブレークポイントに到達するまで無効にする ボックスでブレークポイントを選択すると、現在のブレークポイントのトリガーとして機能します。 これにより、指定したブレークポイントに到達するまで現在のブレークポイントが 無効になります。
これが発生した後に再度無効にするか、そのまま有効にするかを選択できます。
このオプションは、特定の条件下または特定のアクションの後でのみプログラムを中断する必要がある場合に役立ちます。 この場合、通常、トリガーブレークポイントはプログラムの実行を停止するために必要ではなく、 non-suspending になります。
ブレークポイントのステータス
ブレークポイントには、次のステータスがあります:
状況 | 説明 |
|---|---|
検証済み | デバッガーセッションを開始した後、デバッガーはプログラムをブレークポイントで一時停止することが技術的に可能かどうかをチェックします。 はいの場合、デバッガーはブレークポイントを 検証済みとしてマークします。 |
警告 | ブレークポイントでプログラムを一時停止することが技術的に可能ですが、それに関連する問題がある場合、デバッガーはブレークポイントのステータスを 警告に設定します。 これは、たとえば、メソッドの実装の 1 つでプログラムを一時停止することが不可能な場合に発生することがあります。 |
無効 | ブレークポイントでプログラムを一時停止することが技術的に不可能な場合、デバッガーはそれを 無効としてマークします。 これは、その行に実行可能なコードがないためよく発生します。 |
非アクティブ / 依存 | ブレークポイントは、 別のブレークポイントにヒットするまで無効になるように構成されている場合、非アクティブ / 依存としてマークされますが、これはまだ発生していません。 |
ミュート | すべてのブレークポイントは ミュートされているため、一時的に非アクティブです。 |
無効 | それはされているため、このブレークポイントが一時的にアクティブで 無効。 |
中断しない | このブレークポイントには 中断ポリシーが設定されているため、ヒットしたときに実行が中断されることはありません。 |
ブレークポイントアイコン
タイプと ステータスに応じて、ブレークポイントは次のアイコンでマークされます。
線 | 例外 | |
|---|---|---|
標準 | ||
無効 | ||
検証済み | ||
ミュート | ||
非アクティブ / 依存 | ||
ミュート無効 | ||
中断しない | ||
確認済みの一時停止なし |
生産性のヒント
- "printf" デバッグのためにブレークポイントを使用
ノンサスペンド ロギングブレークポイント(他のデバッガーではウォッチポイントとも呼ばれます)を使うことで、コードに print ステートメントを挿入する代わりになります。 これにより、デバッグのログメッセージを柔軟かつ一元的に管理できます。
- ログブレークポイントをよりすばやく設定
非停止 ログブレークポイントを設定するには、 Shift を押しながらガターをクリックします。 この操作はプログラムの実行を一時停止せず、代わりに
Breakpoint reached at ocean.Whale.main(Whale.java:5)のようなメッセージがログされます。 エディター上にある式をログに記録したい場合は、 Shift キーを押しながらガターをクリックする前に、その式を選択してください。- ブレークポイントの説明を追加
プロジェクト内に複数のブレークポイントがある場合は、検索しやすくするために説明を追加することができます。 これを行うには、 ブレークポイント ダイアログ Ctrl+Shift+F8 でブレークポイントを右クリックし、メニューから 説明の編集 を選択します。 ブレークポイント名の入力を開始すると、その項目にフォーカスが移ります。
- ソースに移動
ブレークポイント ダイアログから選択したブレークポイントが設定されているコード行に移動するには、 F4 を押します。
