プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。
WebStorm は、戦略に応じて使用される一連のステップアクションを提供します（たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど）。
ステップアクションは、ウィンドウツールバーと 
メニューにあります。
ステップオーバー
現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接移動します。
ステップオーバーボタン
をクリックするか、F8 を押します。
この例では、行 22 が実行されようとしています。ステップオーバーすると、デバッガーは print_chart() メソッドに移動せずに 23 行目に直接移動します。
スキップされたメソッド内にブレークポイントがある場合、デバッガーはそれらで停止します。
途中でブレークポイントをスキップするには、強制ステップオーバー Alt+Shift+F8 を使用します。
ステップイン
呼び出された関数のコード内のステップ。
ステップインボタン
をクリックするか、F7 を押します。
この例では、行 22 が実行されようとしています。ステップインすると、デバッガーは print_chart() メソッドの実装に移動し、その結果がどのように生成されるかを詳細に調べることができます。
回線上に複数のメソッド呼び出しがある場合、WebStorm は入力するメソッドを確認します。この機能はスマートステップインと呼ばれます。
デフォルトでは、複数のメソッド呼び出しがある行でステップイン F7 を呼び出すたびに、スマートステップインが自動的に使用されます。自動スマートステップインをオフにし、ステップインおよびステップアウトボタンを使用して、呼び出される各メソッドを呼び出される順序で入力することができます。
一部のスクリプトは、通常はデバッグする必要がないため、ステップインによってスキップされます。
スクリプトへのステップインを抑制する
設定ダイアログ（Ctrl+Alt+S）で、に移動します。デバッガー: ステップページが開きます。
自動スマートステップインを抑制するには、常にスマートステップインするチェックボックスをオフにします。
すべてのライブラリスクリプトをスキップするには、ライブラリスクリプトにステップインしないチェックボックスを選択します。以下の例を参照してください。
特定のスクリプトへのステップ実行を抑止するには、スクリプトにステップインしないチェックボックスを選択し、ツールバーのボタンを使用してスクリプトのリストを作成します。
スマートステップイン
スマートステップインは、1 行に複数のメソッド呼び出しがあり、どのメソッドに入るかについて具体的に知りたい場合に役立ちます。この機能により、目的のメソッド呼び出しを選択できます。
Tab を使用してメソッド呼び出しを切り替え、Enter を押してステップインするメソッドを選択します。
デフォルトでは、複数のメソッド呼び出しがある行でステップインを呼び出すたびに、スマートステップインが自動的に使用されます。
自動スマートステップインを抑制するには、設定ダイアログ (Ctrl+Alt+S) を開き、に移動して、常にスマートステップインするチェックボックスをオフにします。
その後、デバッグツールウィンドウのツールバーに 
アイコンが表示されます。このアイコンをクリックするか、Shift+F7 を押して、スマートステップインを手動で呼び出します。
ステップアウト
現在のメソッドから抜け出し、その呼び出しに移動します。
ステップアウトボタン
をクリックするか、Shift+F8 を押します。
この例では、ステップアウトするとループのすべての反復がスキップされ、呼び出しにすぐに戻ります。
カーソル位置まで実行
キャレットの位置に達するまで実行を継続します。
プログラムを一時停止したい行にキャレットを置き、
メニューからカーソル位置まで実行を選択するか、Alt+F9 を押します。
実行先の行の隣のガターの上にカーソルを置き、
をクリックします。
この例では、カーソル位置まで実行は実行を継続し、ブレークポイントがあるかのように 23 行目で停止します。
print_chart() メソッドにブレークポイントがある場合、プログラムはそこで中断されます。
途中でブレークポイントをスキップするには、カーソル位置まで強制実行を使用します。
強制ステップイン
このメソッドが通常のステップインによってスキップされた場合でも、メソッドのステップ。
に移動します。
Alt+Shift+F7 を押します。
ツールバーの
をクリックします。 をデバッガーツールバーに追加するには、次の手順を実行します。デバッグツールウィンドウのツールバーを右クリックするか、その上の
をクリックします。
コンテキストメニューからツールバーのカスタマイズを選択します。
デバッグツールウィンドウのカスタマイズトップツールバーダイアログで、
をクリックし、アクションの追加を選択します。
アクションの追加ダイアログで、検索フィールドに
Force Step Intoと入力し始めます。WebStorm は、強制ステップインアクションを見つけてハイライトします。
OK をクリックしてデバッグツールウィンドウのカスタマイズトップツールバーダイアログに戻り、アクションがリストに追加されます。OK をクリックします。
その後、デバッガーのツールバーに
が表示されます。
この例では、デバッガーは、行 4 で通常のステップインを使用してライブラリメソッド console.log() をスキップしますが、行 10 で強制ステップインを使用してこのメソッドに入ります。
カーソル位置まで強制実行
キャレットの位置に達するまで実行を継続します。途中のブレークポイントはすべて無視されます。
プログラムを一時停止する行にキャレットを置きます。
- メニューからカーソル位置まで強制実行を選択するか、Ctrl+Alt+F9 を押します。
この例では、カーソル位置まで強制実行は実行を継続し、ブレークポイントがあったかのように 24 行目で停止します。print_chart() 内のブレークポイントは効果がありません。
強制ステップオーバー
ブレークポイントが設定されているメソッドの呼び出しで行をステップオーバーします。ブレークポイントは無視されます。
- メニューから強制ステップオーバーを選択するか、Alt+Shift+F8 を押します。
この例では、print_chart() メソッドにブレークポイントがあるにもかかわらず、強制ステップオーバーによって 22 行目の print ステートメントに移動します。そうでない場合、ステップオーバーを使用すると、ループのすべての反復でアプリケーションが一時停止されます。
関連ページ：
デバッガー: ステップ
このページを使用して、デバッグのステップ速度を向上させ、ステップ実行中にスキップする要素を指定します。常にスマートステップインするデフォルトでは、このチェックボックスが選択されており、複数のメソッド呼び出しを含む行でステップインを呼び出すと、スマートステップインが自動的に呼び出されます。その後、ステップインする呼び出しを選択できます。このチェックボックスがオフの場合、ステップインまたはスマートステップインのいずれかを選択できます。詳細については、ステップインおよびスマートステップインを参照してく...
新しい UI
新しいユーザーインターフェース (UI) は、WebStorm およびその他の JetBrains IDE の外観を再設計したものです。デザインを簡素化し、重要な機能にアクセスしやすくするために作成されました。その結果、よりクリーンでモダンなルックアンドフィールが得られます。この記事では、新しい UI の主な変更点と、それを使い始める方法について説明します。主な変更点：テーマこの UI には 3 つの新しいテーマ (ライト、ダーク、ライトヘッダー付きライト) が導入されました。これらはすべて、...
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、ブレークポイントに到達するか、プログラムを手動で一時停止するまで、プログラムは正常に実行されます。その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。コールスタックを調べる：プログラムが一時停止されると、この時点に到達したコールスタックがフレームペインに表示されます。マルチプロセス Node.js アプリケーションまたはサービスワーカーをデバッグしていると...