WebStorm 2020.1ヘルプ

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

After the debugger session has started, the デバッグ tool window will appear, and the program will run normally until a breakpoint is hit or you pause the program manually.

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

コールスタックを調べる

When the program is suspended, the call stack(英語) that brought you to this point is shown in the フレーム pane.

Frames tab

When you are debugging a multiprocess Node.js application or Service Workers, you can switch between threads. The フレーム pane shows the call stack of the selected thread. Learn more from マルチプロセスデバッグ and ワーカーのデバッグ

Switching between threads

In other cases, when there is only one thread, the フレーム panes still shows 主なスレッド in the スレッド field.

Main Thread is shown for a single-thread application

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

Each time a method or a function is called, a new frame is added to the top of the stack. When the execution of a method or a function is complete, the corresponding frame is removed from the stack (in the last in, first out fashion).

Examining frames helps you understand why particular parameters were passed to a method or a function and what the state of the caller was at the time of calling.

ライブラリからフレームを隠す

  • プログラムで外部ライブラリを使用しており、ライブラリクラスで行われた呼び出しを省略したい場合は、フレームタブの右上にあるライブラリからフレームを隠すボタン Hide Frames from Libraries button をクリックします。

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

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

変数の調査/更新

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

The Variables tab shows you the variables visible from the current execution point

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

変数のコピー

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

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

  • 変数の名前をコピーするには、変数を右クリックして名前のコピーを選択します。

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

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

  1. 比較するコンテンツをコピーします(たとえば、テキストファイルから)。

  2. 変数タブで、比較する変数を右クリックし、クリップボードと値を比較を選択します。

  3. 開く差分ビューアーの違いを調べます。差分ビューアーを効率的に使用する方法の詳細については、ファイルとフォルダーの比較 トピックを参照してください。

専用ダイアログで変数を表示

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

  • 変数タブで変数を右クリックし、インスペクションを選択します。

    Inspect dialog

変数値を設定

特定の条件でプログラムがどのように動作するかをテストする必要がある場合、または実行時の現在の動作を修正する必要がある場合は、変数値を設定/変更することでそれを実行できます。

  1. 変数タブで変数を右クリックして値の設定を選択するか、変数を選択して F2を押します。

  2. 変数の値を入力し、Enterを押します。

    Enter new value for the variable in the field right next to its name

変数またはクラスが宣言されているソースコードを調べる必要がある場合は、変数タブから直接そこに移動できます。

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

  • 変数タイプのクラス宣言にナビゲートするには、変数を右クリックして型ソースへジャンプ Shift+F4を選択します。

式の評価

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

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

式を評価する最も簡単な方法は、コード内で式を指すことです。これは最も簡単な方法ですが、メソッド呼び出しの評価には使用できません。これらは副作用を引き起こす可能性があるため、安全のために行われます。

このオプションは、エディターから式をすばやく評価する必要がある場合に使用します。

  1. 評価する式をポイントします。式の結果がツールチップに表示されます。

    Value tooltip
  2. 子要素を表示する必要がある場合は、the Expand button をクリックするか、Ctrl+F1を押します。

    Value tooltip with child group

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

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

メソッド呼び出しを伴うコード内の式を評価したい場合、または式のどの部分を評価するかについて特定したい場合は、式のクイック評価オプションを使用します。

このオプションは、プログラムがブレークポイントに達した後に中断された場合にのみ使用可能です(手動で一時停止されません)。

  1. 式にキャレットを配置する(最も近い一致式を評価する)か、その一部を選択します(複雑な式のどの部分を評価するかを特定したい場合)。

  2. 実行 | デバッグ・アクション | 式のクイック評価 Ctrl+Alt+F8をクリックします。または、Alt を押しながら選択をクリックします。

    Value tooltip appears

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

コード選択でクイック評価を構成するには、 設定/環境設定 | ビルド、実行、デプロイ | デバッガー | データ・ビュー に移動し、コード選択時に値ツールチップを表示するオプションを優先として設定します。

任意の式を評価します

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

この機能を使用して、プログラムの現在の状態に関する追加情報を取得し、すべて同じデバッグセッション内でさまざまなシナリオをテストします。これにより、実行する必要のあるセッションの数が減るため、時間を大幅に節約できます。

このオプションは、プログラムがブレークポイントに達した後に中断された場合にのみ使用可能です(手動で一時停止されません)。

  1. 現在、あなたの前にある式または変数(たとえば、エディターまたは変数タブ)で開始したい場合は、それを選択します。

    Select the expression to start from
  2. 実行 | デバッグ・アクション | 式の評価 Alt+F8をクリックします。ショートカットはUbuntuでは機能しない可能性があります(正しい操作のために、ショートカットの設定を調整してください)。

  3. 評価ダイアログで、選択した式を変更するか、フィールドに新しい式を入力します。コードフラグメントを評価する場合は、展開 Shift+Enterをクリックします。

    必要に応じて、コードの断片が収まるようにファイルサイズを調整します。

  4. 評価(複数行モードの場合は Ctrl+Enter )をクリックします。式の結果が結果フィールドに表示されます。

    式の結果は、returnステートメントから取得されます。returnステートメントがない場合、結果はコードの最後の行から取得されます(式である必要はありません。リテラルも機能します)。値を取得する有効な行がない場合、結果は undefinedです。指定された式を評価できない場合、結果フィールドに理由が示されます。

    Expression result is calculated

評価ダイアログは非モーダルなので、フォーカスをエディターに切り替えて他の変数と式をコピーできます。必要に応じて、複数の評価ダイアログを開くこともできます。

インラインで値を表示

WebStormは、変数の使用箇所のすぐ隣に変数の値を表示することにより、デバッグプロセスを容易にします。

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

Inline values of the variables change with each step

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

監視式

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

このオプションは、プログラムがブレークポイントに達した後に中断された場合にのみ使用可能です(手動で一時停止されません)。

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

デフォルトでは、監視式タブは非表示になっており、ウォッチは変数タブに表示されます。監視式タブを非表示/表示するには、変数または監視式タブの変数タブに監視式を表示するボタン Show watches in variables tab を使用します。

監視を追加する

  1. 変数タブで新規監視式 New Watch button をクリックします。

  2. 評価する変数または式を入力します。式では、ローカルコンテキスト内にある限り、メソッド呼び出し、アロー関数、変数の宣言などを評価できます。

    Watch expression

監視式に変数/式を追加した後、変数/式はそこに残り、各ステップで評価され、現在のコンテキストで結果を提供します。

ウォッチを編集する

  • 目的の監視を右クリックして、編集を選択します。

監視をコピーする

  1. コピーする監視を選択します。

  2. 変数 / 監視式タブの監視式の複製 Duplicate Watch button をクリックするか、Ctrl+Dを押します。

監視の順序を変更する

便宜上、監視が変数 / 監視式タブに表示される順序を変更できます。

  • 変数 / 監視式タブまたは Ctrl+Up および Ctrl+Down キーボードショートカットの監視式を上に移動 / 監視式を下に移動ボタンを使用します。

監視を削除する

  • 単一の監視を削除するには、監視を右クリックして、変数 / 監視式タブで監視式の除去 N/A を選択します。

  • すべてのウォッチを削除するには、変数 / 監視式タブの任意の場所を右クリックして、すべての監視式を除去を選択します。

ウォッチは、変数と同じアクションを許可します。例: 専用のダイアログで表示したり、ソースコードに移動したりできます。

ウォッチはプロジェクトの一部です。これは、デバッグセッションを失うリスクなしに、デバッグセッションを停止して再実行できることを意味します。

現在の実行ポイントに戻る

プログラムの状態を調べるには、コード内を移動する必要があり、多くの場合、プログラムが中断されている場所に戻る必要があります。

以下のいずれか 1 つを実行します:

  • メインメニューから実行 | デバッグ・アクション | 実行ポイントの表示を選択します。

  • Alt+F10を押します。

  • デバッグツールウィンドウのステップツールバーで The Show Execution Point button をクリックします。

現在の実行ポイントは青い線で示されます。この行のコードはまだ実行されていません。

Blue line indicating the current execution point
最終更新日: 2020年6月19日

関連ページ:

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

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

ブレークポイント

ブレークポイントは、特定の時点でプログラムの実行を中断してその動作を調べるためのソースコードマーカーです。設定すると、ブレークポイントは明示的に削除するまでプロジェクトに残ります(一時行ブレークポイントを除く)。ブレークポイントを持つファイルが外部で変更された場合、たとえば、VCSを介して更新される...

マルチプロセスデバッグ

WebStormを使用すると、child_process.fork()メソッドまたはクラスターモジュールによって起動される追加のNode.jsプロセスをデバッグできます。このようなプロセスは、デバッグツールウィンドウのデバッガタブのフレームペインにスレッドとして表示されます。デバッグするプロセスにブ...

ChromeでのJavaScriptのデバッグ

WebStormは、Chromeと連携するclient-sideJavaScriptコード用の組み込みデバッガを提供します。以下のビデオと以下の説明は、このデバッガを使い始めるための基本的なステップを示しています。始める前に、JavaScriptデバッガーの構成の説明に従って組み込みデバッガを構成し...

ファイル、フォルダー、テキストソースを比較する

WebStormを使用すると、任意の2つのファイル、フォルダー、テキストソース、またはデータベースオブジェクトの間、およびローカルファイルとそのリポジトリバージョン間の違いを確認できます。2 つのファイルの比較:WebStormはファイルの差分ビューアーに差分を表示します:変更を適用するには、シェブ...

キーボードショートカットの構成

WebStormには定義済みのキーマップがいくつか含まれており、頻繁に使用するショートカットをカスタマイズできます。キーマップ構成を表示するには、設定/環境設定ダイアログ を開き、キーマップを選択します。WebStormは、環境に基づいて事前定義されたキーマップを自動的に提案します。使用しているO...