WebStorm 2020.1ヘルプ

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

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

コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。

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

Debug tool window overview

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

セッション

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

Several debugging sessions: tabs

All the information like inline variable values and execution point is shown for the selected session tab. This is important if you are running several debug sessions in parallel that use the same code.

タブ

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

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

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

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

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

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

    JavaScript interactive debugger console shows an object in a tree view

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

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

    Node interactive debugger console: run JavaScript code

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

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

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

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

タブを表示/隠す

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

タブを移動する

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

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

デフォルト・レイアウトを復元します

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

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

    Layout options menu
最終更新日: 2020年6月26日

関連ページ:

ツール・ウィンドウ

ツール・ウィンドウは、プロジェクト構造の表示、アプリケーションの実行とデバッグ、バージョン管理システムやその他の外部ツールとの統合、コード分析、検索、ナビゲーションなどの便利な開発タスクへのアクセスを提供します。デフォルトでは、ツールウィンドウはメインウィンドウの下部と側面にアタッチされています。た...

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

After the debugger session hasstarted, theデバッグtool window will appear, and the program will run normally until abreakpointis hit or youpausethe progra...

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

対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、を使用)。コンソールペインもread-eval-printループ(REPL)なので、そこにJavaScriptコードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで...

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

Node.jsアプリケーションをデバッグすると、WebStormはデバッグツールウィンドウに2つのコンソールタブ、コンソールとデバッガー・コンソールを表示します。コンソールタブには、ノードプロセス自体の出力、つまりprocess.stdoutとprocess.stderrに直接書き込まれるか、または...

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

デバッガセッションは実行/デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。一度に異なる設定で複数のデバッガセッションを実行できます。構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStormにいくつかの...