WebStorm 2024.2 ヘルプ

デバッグツールウィンドウ

デバッガーセッションを開始すると、WebStorm はデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガーアクションを実行し、プログラムデータ(フレーム、スレッド、変数など)を分析できます。

ツールウィンドウを使用する一般的な手順については、ツールウィンドウを参照してください。

Debug tool window overview

デフォルトでは、デバッグツールウィンドウは、プログラムがブレークポイントに到達したときにのみ表示され、デバッグセッションが終了した後も表示されます。この動作を変更するには、設定ダイアログ (Ctrl+Alt+S) を開き、ビルド、実行、デプロイ | デバッガーに移動して、プロセスの終了時にデバッグウィンドウを非表示にするチェックボックスをオンにします。

セッション

使用可能なデバッグセッションは、デバッグツールウィンドウの上部にある個別のタブに表示されます。タブを閉じると、対応するセッションが終了します。

Several debugging sessions: tabs

インライン変数値や実行ポイントなどのすべての情報が、選択したセッションタブに表示されます。これは、同じコードを使用する複数のデバッグセッションを並行して実行する場合に重要です。

タブ

デバッグツールウィンドウには、セッションごとに次のタブとペインが表示されます。

  • フレーム : マルチペイン Node.js アプリケーションまたはサービスワーカーのデバッグ時に、このペインを使用してコールスタック内を移動し、スレッド間を切り替えます。

    Switching between threads
  • 変数 : このペインには、現在のコンテキストで使用可能な変数が一覧表示され、プログラムの状態を分析および変更できます。

  • ウォッチ式 : ペインではウォッチを管理できます。デフォルトでは、画面スペースをより効率的に使用するために、ウォッチは変数タブに表示されます。ウォッチがたくさんある場合は、別のタブで表示することを検討してください。

  • コンソール : スタックトレースを表示します。

    クライアント側のアプリケーションの場合、タブには、コードに記録されたすべてのものが表示され(たとえば、console.* を使用)、read-eval-print ループREPL)としても動作するため、JavaScript コードスニペットを実行して、現在のページと対話できます。現在デバッグ中です。対話型デバッガーコンソールの詳細

    JavaScript interactive debugger console shows an object in a tree view
  • プロセスコンソール : Node.js アプリケーションをデバッグしているときに、WebStorm はこのタブを開きます。このタブには、ノードプロセス自体の出力、つまり、process.stdout(英語) および process.stderr(英語) に直接書き込まれるか、console.*(英語) を使用してログに記録されるすべてのものが表示されます。対話型デバッガーコンソールの使用から詳細を参照してください。

    Node.js debugging session: Process Console
  • デバッガーコンソール : WebStorm は、Node.js アプリケーションをデバッグするときにこのタブを開きます。ここでは、JavaScript コードスニペットを実行し、console.*(英語) メッセージを表示できます。

    Node.js debugging: interactive debugger Console

    対話型デバッガーコンソールの使用の詳細を参照してください。

  • スクリプト : JavaScript デバッグセッション中、タブには、JavaScript コードの実行中に自動的にダウンロードされるすべての外部リソースが表示されます。このタブを使用して、外部リソースのダウンロードを監視します。エディターでリソースのコードを開くには、問題のアイテムをダブルクリックします。

  • 要素 : このタブには、実際の HTML ソースコードとアクティブなブラウザーページの HTML DOM 構造(英語)が表示されます。タブを使用して、ブラウザーを介してページに加えられた変更を監視します。

    このタブは、クライアント側のコードをデバッグしているときにのみ使用できます。

タブを表示 / 隠す

  • Layout options button をクリックして、表示するタブを選択します。

タブを移動する

好みに合わせてタブを配置できます。タブを別の場所に移動したり、タブを別のタブとグループ化して、画面上の同じスペースを共有できます。

  • タブヘッダーを目的の場所にドラッグします。青いフレームは宛先を示します。

デフォルトレイアウトを復元する

デバッグツールウィンドウのレイアウトを変更し、新しい配置が気に入らない場合は、デフォルトの状態に戻すことができます。

  • デバッグツールウィンドウの右上隅にある Layout options button をクリックしてから、デフォルトレイアウトの復元をクリックします。

    Layout options menu

関連ページ:

ツールウィンドウ

ツールウィンドウは、プロジェクト構造の表示、アプリケーションの実行とデバッグ、バージョン管理システムやその他の外部ツールとの統合、コード分析、検索、ナビゲーションなどの開発タスクへのアクセスを提供します。デフォルトでは、ツールウィンドウはメインウィンドウの下部と側面に接続されています。ただし、別のモニターなどで別のウィンドウとして使用するために、再配置したり、切り離したりすることもできます。エディター、プロジェクトツールウィンドウ、npm ツールウィンドウ、実行ツールウィンドウ、一部のツールウィン...

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

デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、ブレークポイントに到達するか、プログラムを手動で一時停止するまで、プログラムは正常に実行されます。その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。コールスタックを調べる:プログラムが一時停止されると、この時点に到達したコールスタックがフレームペインに表示されます。マルチプロセス Node.js アプリケーションまたはサービスワーカーをデバッグしていると...

対話型デバッガーコンソール

対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、を使用)。コンソールペインも read-eval-print ループ(REPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、WebStorm は完成のための異形を提案します。該当する明細を選択してを押します。We...

対話型デバッガーコンソールの使用

Node.js アプリケーションをデバッグすると、WebStorm はデバッグツールウィンドウに 2 つのコンソールタブ、プロセスコンソールとデバッガーコンソールを表示します。プロセスコンソールタブには、ノードプロセス自体の出力、つまり process.stdout と process.stderr に直接書き込まれるか、console.* を使用してログに記録されるすべての出力が表示されます。デバッガーコンソールでは、JavaScript コードスニペットを実行して console.* メッセージを表示でき...

デバッガーセッションを開始する

デバッガーセッションは実行 / デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。一度に異なる設定で複数のデバッガーセッションを実行できます。構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStorm にいくつかのパラメーターを使用したり、いくつかのアクションを実行したりするように指示することもできます。例:Node.js 固有のコマンドラインオプションを Node.js 実行可能ファイルに渡すことが...