中断されたプログラムを調べる

デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、ブレークポイントに到達するか、プログラムを手動で一時停止するまで、プログラムは正常に実行されます。

その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。

コールスタックを調べる

プログラムが一時停止されると、この時点に到達したコールスタック(英語)がフレームペインに表示されます。

マルチプロセス Node.js アプリケーションまたはサービスワーカーをデバッグしているときに、スレッドを切り替えることができます。フレームペインには、選択したスレッドの呼び出しスタックが表示されます。マルチプロセスデバッグおよびワーカーのデバッグから詳細を参照してください。

他の場合では、スレッドが 1 つしかない場合でも、フレームペインのスレッドフィールドにメインスレッドが表示されます。

フレームはアクティブなメソッドまたは関数呼び出しに対応します。呼び出されたメソッドまたは関数のローカル変数、その引数、式の評価を可能にするコードコンテキストを格納します。

method が呼び出されるたびに、新しいフレームがスタックの一番上に追加されます。 method の実行が完了すると、対応するフレームがスタックから削除されます（後入れ先出し方式）。

フレームを調べると、特定のパラメーターがメソッドまたは関数に渡された理由と、呼び出し時の呼び出し元の状態を理解できます。

デフォルトでは、WebStorm はフレームワークとライブラリの呼び出しに対応するフレームを非表示にします。

ライブラリからフレームを表示

非表示のフレームを表示するには、フレームペインの右上隅にあるすべてのフレームを表示トグルボタンを押します。
ライブラリフレームを非表示にするには、フレームをライブラリから非表示トグルボタンを放します。

スタックをクリップボードにコピー

現在のスレッドのコールスタックをコピーするには、フレームタブの任意の場所を右クリックして、スタックをコピーを選択します。

変数の調査 / 更新

変数タブには、選択したフレーム / スレッド内の変数のリストが表示されます。変数を調べると、プログラムが特定の方法で動作する理由を理解できます。

各変数の左側のアイコンは、その型を示しています。

変数のコピー

変数を調べるときに、変数名または値をコピーして別の場所に貼り付けたり、別の変数と比較したりする必要がある場合があります。

変数の名前をコピーするには、変数を右クリックして名前をコピーを選択します。
変数が保持する値をコピーするには、変数を右クリックして値をコピー Ctrl+C を選択します。 String 以外の型の場合、 toString 表現がコピーされます。

変数をクリップボードと比較する

変数値を他の値と比較するには、クリップボードと値を比較オプションを使用します。これは、たとえば、変数に長い文字列が格納されていて、それを別の長い文字列と比較する必要がある場合に役立ちます。

たとえば、テキストファイルから比較するコンテンツをコピーします。
変数タブで変数を右クリックし、クリップボードと値を比較を選択します。
開いた差分ビューアーで相違点を調べます。差分ビューアーの詳細については、ファイルとフォルダーの比較を参照してください。

専用の変数を表示するダイアログ

WebStorm では、専用のダイアログで変数をインスペクションできます。これは、変数（または参照が保持されているオブジェクト）を追跡し、同時にフレームとスレッド間を移動できるようにする必要がある場合に便利です。

変数またはウォッチを右クリックし、インスペクションを選択します。

変数値を設定

プログラムが特定のデータに対してどのように動作するかをテストしたり、実行時にフローを変更したりする場合は、変数値を変更することでそれを実現できます。

変数を選択し、 F2 を押します。または、コンテキストメニューから値を設定を選択します。
変数の値を入力し、 Enter を押します。

instance="rm"/；

ソースコードに移動する

変数ペインから宣言に移動できます。

変数が宣言されているコードに移動するには、変数を右クリックしてソースに移動 F4 を選択します。
変数型のクラス宣言に移動するには、変数を右クリックして型ソースに移動 Shift+F4 を選択します。

変数ビューで getter 関数と setter 関数を表示

デフォルトでは、 getter および setter 関数は非表示になっています。

これらを変数ビューに表示するには、ツールバーのをクリックし、デバッガー設定を選択してから、 Getter と Setter の機能を表示を選択します。

式の評価

WebStorm を使用すると、デバッグセッション中に式を評価して、プログラムの状態に関する追加の詳細を取得したり、実行時にさまざまな実行シナリオをテストしたりできます。

この機能は、プログラムがブレークポイントに到達した後に中断された（一時停止されていない）場合にのみ機能します。

式内で呼び出されるメソッド内にブレークポイントがある場合、それらは無視されます。

エディターで簡単な式を評価する

式をすばやく評価するには、エディターで式をポイントします。メソッド呼び出しはこの方法では評価できないことに注意してください。

評価する式をポイントします。式の結果がツールチップに表示されます。
子要素を表示するには、をクリックします。

値のツールチップが邪魔になる場合は、遅延を増やすか、完全に無効にすることができます。これを行うには、設定ダイアログ (Ctrl+Alt+S) でビルド、実行、デプロイ | デバッガー | データビューに移動し、好みに応じて値ツールチップを表示および値ツールチップの遅延オプションを設定します。

エディターで複雑な式を評価する

メソッド呼び出しを含むコード内の式を評価する場合、または評価する式の特定の部分を指定する場合は、式のクイック評価オプションを使用します。

式を選択して、 Ctrl+Alt+F8 を押すか、表示されるフローティングツールバーのをクリックします。
あるいは、実行 | デバッグアクション | 式のクイック評価に移動するか、 Alt を押したまま選択範囲をクリックします。
フローティングツールバーにデバッグアクションを追加するには、をクリックし、ツールバーのカスタマイズを選択し、開いたダイアログで追加をクリックして、必要なアクションを選択します。

式のクイック評価を構成して、コードを選択するだけで（メニュー / ショートカットを使用せずに）コードで機能するようにできます。このオプションを有効にすると、誤ってメソッドを呼び出す可能性があるため、慎重に使用してください。

コード選択時に式を評価する

設定 | ビルド、実行、デプロイ | デバッガー | データビューに移動し、コード選択時に値ツールチップを表示するオプションを設定します。

任意の式を評価する

任意の式を評価することは、最も柔軟な評価オプションです。現在のフレームのコンテキスト内にある限り、任意のカスタムコードを評価できます。これを使用すると、宣言、メソッド呼び出し、匿名クラス、アロー関数、ループなどを評価できます。

任意の式を評価するには、変数ペインの式の評価フィールドに式を入力し、 Enter を押します
結果はすぐ下に表示されます。式フィールドの右側にあるをクリックして、式をウォッチに追加することもできます。

長いコードブロックを評価したい場合は、そのための専用ダイアログを利用すると良いでしょう：

現在目の前にある式または変数 (たとえば、エディターまたは変数ペイン) から開始する場合は、それを選択します。
実行 | デバッグアクション | 式の評価 Alt+F8 に移動するか、コンテキストメニューから式の評価を選択します。ショートカットは Ubuntu では機能しない可能性があります (正しく操作するには、ショートカット設定を調整してください)。
「評価」ダイアログで、選択した式を変更するか、「式」フィールドに新しい式を入力します。複数行のコードフラグメントを変更するには、「展開 Shift+Enter 」をクリックします。
式の本体で宣言された変数は、式が評価された後にスコープ外になることに注意してください。
評価（複数行モードの場合は Ctrl+Enter ）をクリックします。式の結果が結果フィールドに表示されます。
式の結果は、return ステートメントから取得されます。 return ステートメントがない場合、結果はコードの最後の行から取得されます（式である必要はなく、単一のリテラルでもかまいません）。値を取得するための有効な行がない場合、結果は undefined です。指定した式が評価できない場合、結果フィールドに理由が表示されます。

評価ダイアログは非モーダルなので、フォーカスをエディターに戻して他の変数や式をコピーすることができます。また、複数の評価ダイアログを開くこともできます。

インラインで値を表示

WebStorm は、変数の使用箇所のすぐ隣に変数の値を表示します。

変数値が変更されると、インラインビューが新しい値で更新され、色が変更されます。

行にオブジェクトへの参照が含まれている場合は、エディターでそのフィールドを直接調べることができます。このポップアップから、変数値を変更やインラインウォッチを追加することもできます。

インラインビューはデフォルトで有効になっています。これをオフにするには、設定ダイアログ (Ctrl+Alt+S) でビルド、実行、デプロイ | デバッガー | データビューに移動し、値をインラインで表示するオプションを無効にします。

インラインウォッチを追加する

ある式の結果を特定の行に表示したい場合は、そのためのインラインウォッチを設定できます。インラインウォッチは永続的であり、セッションの再開後もアクティブなままです。

フィールドを追跡するオブジェクトを参照するインラインヒントをクリックします。
ポップアップで、フィールドを選択し、インラインウォッチとして追加をクリックします。
必要に応じてウォッチを微調整します。有効な式をウォッチとして使用できます。

エディターで設定したインラインウォッチは、デバッグツールウィンドウの変数ペインのインラインウォッチにも表示されます。

インラインウォッチを削除するには、ウォッチにカーソルを合わせ、近くの十字をクリックします。

JSON と XML を視覚化する

インライン値を展開したり、JSON または XML を含む文字列式を評価したりすると、WebStorm によってデータの構造化されフォーマットされたビューが提供されます。

これにより、コードの折りたたみや選択範囲の拡大または縮小などのエディター機能を使用して、サブツリーを操作したり、大きなオブジェクト内での便利なナビゲーションを行ったりすることができます。

プレビューポップアップのタブを使用して、構造化ビューと生のビューを切り替えます。

ウォッチ式

変数またはより複雑な式の結果を追跡したい場合は、この変数または式の監視を設定します。これは、変数のリストに定期的に表示されないものを評価する必要がある場合や、インスタンス変数を固定する必要がある場合に便利で、各ステップの後にツリーを展開する必要がなくなります。

この機能は、プログラムがブレークポイントに到達した後に中断された（一時停止されていない）場合にのみ機能します。

ウォッチは、選択したフレームのコンテキストで評価されます。ウォッチは、コンテキストから外れている場合、またはコンパイルに失敗した場合は評価できません。この場合、ウォッチにはエラーアイコンのマークが付けられます。

デフォルトでは、監視は変数とともに変数ペインに表示されます。ウォッチ式ペインを表示 / 非表示にするには、レイアウト設定メニューのウォッチを個別に表示オプションを使用します。

ウォッチを追加する

追跡したい式に応じて：

エディター内の式の場合 – 式を選択し、表示されるフローティングツールバーのウォッチに追加アイコン（）をクリックします。または、式を変数タブにドラッグします。
現在のコンテキスト内の要素の場合 – 変数タブで変数を右クリックし、メニューからウォッチに追加を選択します。
任意の式の場合 – 変数タブの上部に式を入力し、ウォッチに追加をクリックします。
ウォッチ式に変数 / 式を追加した後、変数 / 式はそこに残り、各ステップで評価され、現在のコンテキストで結果を提供します。