WebStorm 2020.1ヘルプ

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

デバッガセッションは実行/デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。

一度に異なる設定で複数のデバッガセッションを実行できます。

構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStormにいくつかのパラメーターを使用したり、いくつかのアクションを実行したりするように指示することもできます。例:Node.js固有のコマンドラインオプション(英語)をNode.js実行可能ファイルに渡すことができます。

デバッグする前に

  1. コードにブレークポイントを設定します。

  2. 実行/デバッグ構成を定義します

  3. JavaScriptにコンパイルされたコードをデバッグするには、そのソースマップ(英語)を生成する必要があります。これにより、元のコードと生成されたJavaScriptコードの行間の対応が設定されます。ソースマップが生成されない場合、ブレークポイントは正しく認識および処理されません。

    TypeScript、Dart、CoffeeScript、JSXを使用したJavaScript、ES6以降のバージョンなどをデバッグするには、ソースマップが必要です。

デバッグを開始する

  • ツールバーの実行/デバッグ構成を選択しますリストから必要な構成を選択し、リストの横にある the Debug button をクリックします。

    Selecting a run/debug configuration
  • アプリケーションがJavaScriptコードへの参照を含むHTMLファイルで構成されていて、アプリケーションがビルトイン・サーバーで実行されている場合は、このHTMLファイルを開くか、プロジェクトツールウィンドウでそれを選択してから、コンテキストメニューからデバッグ<HTML_ファイル名>を選択します。WebStormは一時的なデバッグ構成を生成し、それを介してデバッグセッションを開始します。

    Start a debugging session

ChromeでのJavaScriptのデバッグおよびその他の言語およびフレームワーク固有の記事から詳細を学びましょう。

デバッガセッションを起動した後、デバッグツールウィンドウをマークする the Debug tool window button アイコンが、Debugging is activeデバッグプロセスがアクティブであることを示します。

デバッガーセッションの一時停止/再開

デバッガセッションの実行中に、デバッグツールウィンドウのツールバーのボタンを使用して、必要に応じて一時停止/再開できます。

  1. デバッガーセッションを一時停止するには、the Pause buttonをクリックします。

  2. デバッガーセッションを再開するには、the Resume button F9をクリックします。

デバッガーセッションを終了する

  • デバッグツールウィンドウのツールバーの the Stop button をクリックします。または、Ctrl+F2 を押して、終了するプロセスを選択します(それらが2つ以上ある場合)。

生産性のヒント

応答しないアプリケーションをデバッグする
アプリケーションがハングした場合は、セッションを一時停止して、デバッガが現在の状態に関する情報を取得できるようにします。その後、プログラムの状態を調べて、問題の原因を特定できます。
一時停止をさらに活用
式を評価する必要がある場合、およびWebStormは、ブレークポイントで停止しなかったため、で行さらに、あなたのプログラムを進めることができることを行うことはできません足踏み。この後、ブレークポイントで停止したかのようにデバッガーを使用できます。これが有効な解決策ではない場合もありますが、場合によっては役立つことがあります。
起動前のタスクを実行する
すべてのデバッグセッションの前に、実行中の外部ツールを構成するか、他のアクションを実行します。この起動前のタスクは、GulpまたはGruntタスクまたはNPMスクリプトの実行、JavaScriptへのTypeScriptコードのコンパイル、または現在アクティブなすべてのファイル監視の実行によるコードのコンパイルまたは圧縮、ソースのリモートサーバーへのアップロードなど、言語によって異なります。使用しているフレームワーク。
最終更新日: 2020年7月07日

関連ページ:

実行/デバッグ構成を操作する

WebStormでコードを実行またはデバッグするには、実行/デバッグ構成を使用できます。各実行/デバッグ構成は、名前付きの実行/デバッグ起動プロパティのセットを表します。WebStormを使用して実行、デバッグ、またはテストの操作を実行するときは、常にそのパラメーターを使用して、既存の構成のいずれか...

ブレークポイント

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

実行/デバッグ構成の作成および編集

ナビゲーションバーが表示されると、使用可能な実行/デバッグ構成が実行エリアの実行/デバッグ構成セレクタに表示されます。WebStormは、実行/デバッグ構成を処理するためのツールとして実行/デバッグ構成ダイアログを提供します:設定プロファイルを作成するか、デフォルトの設定を変更します。WebStor...

ChromeでのJavaScriptのデバッグ

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

プロジェクトツールウィンドウ

このツールウィンドウを使用すると、プロジェクトをさまざまな観点から見て、新しい項目(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルの開き、目的のコードフラグメントへの移動などのタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコ...

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

デバッガセッションを開始すると、WebStormはデバッグツールウィンドウを開きます。このウィンドウでは、さまざまなデバッガアクションを実行し、プログラムデータ(フレーム、スレッド、変数など)を分析できます。コントロールの詳細な説明については、デバッグツールウィンドウを参照してください。ツールウィン...