ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。
ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。
ブレークポイントの種類
WebStorm では、次のタイプのブレークポイントを使用できます。
行ブレークポイント : ブレークポイントが設定されたコード行に到達したらプログラムを中断します。このタイプのブレークポイントは、実行可能なコード行に設定できます。
例外のブレークポイント : 指定された JavaScript 例外がスローされたときにプログラムを一時停止します。スタックトレースと異なり、例外でアプリケーションを一時停止すると、周囲のコンテキストまたはデータがまだ利用可能な間に調べることができます。
ブレークポイントの設定
行ブレークポイントを設定する
ブレークポイントを設定するコードの実行可能な行でガターをクリックします。または、行にキャレットを置き、Ctrl+F8 を押します。
または、この行にキャレットを置いて Ctrl+F8 を押します。
一時的な行ブレークポイントを設定するには、Ctrl+Alt+Shift+F8 を押します。または、Alt を押したままガターをクリックします。このブレークポイントは、ヒットするとすぐにプロジェクトから削除されます。
アロー関数の場合、1 行内に複数のブレークポイントを設定できます。ガターをクリックすると、WebStorm はその行にブレークポイントを設定できるヒントを表示します。該当するヒントをクリックします。
例外ブレークポイントを設定する
Ctrl+Shift+F8 を押すか、メインメニューからを選択します。
ブレークポイントダイアログで、Alt+Insert を押すか
をクリックし、JavaScript 例外ブレークポイントを選択します。
例外ブレークポイントの追加ダイアログで、ライブラリまたはプロジェクトから例外クラスを指定します。
例外がスローされるたびにデバッガーを停止するには、任意の例外チェックボックスを選択します。
ブレークポイントの管理
ブレークポイントを除去する
例外以外のブレークポイントの場合: ガターのブレークポイントをクリックします。
すべてのブレークポイントの場合: メインメニューで Ctrl+Shift+F8 に移動し、ブレークポイントを選択して、除去 Delete をクリックします。
誤ってブレークポイントを削除してそのパラメーターを失うのを防ぐために、エディターにドラッグするか、マウスの中央ボタンをクリックして、ブレークポイントを削除することを選択できます。これを行うには、に移動してエディターにドラッグまたはマウスの中央ボタンをクリックを選択します。ブレークポイントをクリックすると、それが有効または無効になります。
ブレークポイントのミュート
ブレークポイントでしばらく停止する必要がない場合は、ミュートできます。これにより、デバッガーセッションを移動することなく、通常のプログラム操作を再開できます。その後、ブレークポイントのミュートを解除して、デバッグを続行できます。
デバッグツールウィンドウのツールバーのブレークポイントのミュートボタン
をクリックします。
ブレークポイントを使用可能 / 使用不可にする
ブレークポイントを削除すると、その内部構成は失われます。パラメーターを失うことなく個々のブレークポイントを一時的にオフにするには、無効にすることができます。
非例外ブレークポイントの場合: 右クリックして、必要に応じて有効オプションを設定します。ブレークポイントの削除が割り当てられていない場合は、マウスの中央ボタンで切り替えることもできます。
すべてのブレークポイントの場合: 実行 | ブレークポイントの表示 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 hit" メッセージ :
Breakpoint reached at ocean.Whale.main(Whale.java:5)のようなログメッセージ。スタックトレース : 現在のフレームのスタックトレース。これは、プログラムの実行を中断することなく、このポイントに至ったパスを確認する場合に役立ちます。
評価して記録 :
"Initializing"やusers.size()などの任意の式の結果。式の結果は return ステートメントから取得されます。return ステートメントがない場合、結果はコードの最後の行から取得されます。最後の行は式である必要はなく、リテラルでもかまいません。これを使用して、カスタムメッセージを生成したり、プログラムの実行中にいくつかの値を追跡したりできます。
式を評価するときは、プログラムの動作や結果に影響を与える可能性があるため、副作用が発生する可能性があることを必ず認識してください。
ログブレークポイントを設定する
(オプション) ログに記録する式がエディター内の目の前にある場合は、それを選択します。
Shift を押したままガターをクリックします。
一度ヒットしたら除去する
ブレークポイントを 1 回ヒットした後、プロジェクトから削除するかどうかを指定します。
次のブレークポイントに到達するまで無効にする
次のブレークポイントに到達するまで無効にするボックスでブレークポイントを選択すると、現在のブレークポイントのトリガーとして機能します。これにより、指定したブレークポイントに到達するまで現在のブレークポイントが無効になります。
これが発生した後に再び無効にするか、有効のままにするかを選択することもできます。
このオプションは、特定の条件下または特定のアクションの後でのみプログラムを中断する必要がある場合に役立ちます。この場合、通常、トリガーブレークポイントはプログラムの実行を停止するために必要ではなく、non-suspending になります。
ブレークポイントのステータス
ブレークポイントには、次のステータスがあります。
状況 | 説明 |
|---|---|
検証済み | デバッガーセッションを開始した後、デバッガーはプログラムをブレークポイントで一時停止することが技術的に可能かどうかをチェックします。はいの場合、デバッガーはブレークポイントを検証済みとしてマークします。 |
警告 | ブレークポイントでプログラムを一時停止することが技術的に可能ですが、それに関連する問題がある場合、デバッガーはブレークポイントのステータスを警告に設定します。これは、たとえば、メソッドの実装の 1 つでプログラムを一時停止することが不可能な場合に発生することがあります。 |
無効 | ブレークポイントでプログラムを一時停止することが技術的に不可能な場合、デバッガーはそれを無効としてマークします。これは、その行に実行可能なコードがないためよく発生します。 |
非アクティブ / 依存 | ブレークポイントは、別のブレークポイントにヒットするまで無効になるように構成されている場合、非アクティブ / 依存としてマークされますが、これはまだ発生していません。 |
ミュート | すべてのブレークポイントはミュートされているため、一時的に非アクティブです。 |
無効 | それはされているため、このブレークポイントが一時的にアクティブで無効。 |
中断しない | このブレークポイントには中断ポリシーが設定されているため、ヒットしたときに実行が中断されることはありません。 |
ブレークポイントアイコン
タイプとステータスに応じて、ブレークポイントは次のアイコンでマークされます。
行 | 例外 | |
|---|---|---|
標準 | | |
無効 | | |
検証済み | | |
ミュート | | |
非アクティブ / 依存 | | |
ミュート無効 | | |
中断しない | | |
確認済みの一時停止なし | |
生産性のヒント
- 「printf」デバッグにブレークポイントを使用する
コードに出力ステートメントを挿入する代わりに、non-suspending ログブレークポイント（他のデバッガーではウォッチポイントと呼ばれることもあります）を使用します。これにより、デバッグログメッセージを処理する、より柔軟で集中化された方法が提供されます。
- ロギングブレークポイントをより迅速に設定する
non-suspending ロギングブレークポイントを設定するには、Shift を押しながらガターをクリックします。これはプログラムの実行を中断せず、代わりに
Breakpoint reached at ocean.Whale.main(Whale.java:5)のようなメッセージを記録します。エディターの前にある式をログに記録する場合は、Shift を押しながらガターをクリックする前に、式を選択します。- ブレークポイントの説明を追加する
プロジェクトに多数のブレークポイントがある場合、検索を容易にするためにブレークポイントに説明を追加できます。これを行うには、ブレークポイントダイアログ Ctrl+Shift+F8 のブレークポイントを右クリックし、メニューから説明の編集を選択します。これで、ブレークポイント名の入力を開始すると、フォーカスが取得されます。
- ソースに移動
ブレークポイントダイアログから選択したブレークポイントが設定されているコード行に移動するには、F4 を押します。
関連ページ：
ブックマーク
大規模なプロジェクトで作業する場合、ファイルやフォルダーの検索には時間がかかる場合があります。そのような場合、WebStorm はブックマークを備えています。必要なコード行をブックマークして、見つけやすくすることができます。他のプロジェクトアイテムよりも頻繁に必要なファイルやフォルダーをブックマークすることもできます。すべてのブックマークはブックマークツールウィンドウのリストにグループ化されており、メインメニューからを選択するか、を押すと開くことができます。ツールウィンドウには、コードにブレー...
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。WebStorm は、戦略に応じて使用される一連のステップアクションを提供します（たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど）。ステップアクションは、ウィンドウツールバーとメニューにあります。ステップオーバー：現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接移動し...
コードのデバッグ
WebStorm を使用すると、JavaScript、TypeScript、Dart で記述されたあらゆる種類のアプリケーション (Node.js、React Native、Electron アプリケーション) をデバッグできます。もちろん、Angular、Vue.js などのさまざまなフレームワークを使用して記述されたクライアント側アプリケーションもデバッグできます。さらに、スクリプトや単体テストもデバッグできます。デバッグしているコードの種類に関係なく、WebStorm デバッガーでのエクス...
デバッガーセッションを開始する
デバッガーセッションは実行 / デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。一度に異なる設定で複数のデバッガーセッションを実行できます。構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStorm にいくつかのパラメーターを使用したり、いくつかのアクションを実行したりするように指示することもできます。例:Node.js 固有のコマンドラインオプションを Node.js 実行可能ファイルに渡すことが...