WebStorm 2019.3ヘルプ

実行/デバッグ構成: JavaScript デバッグ

実行 | 構成の編集 | Add New Configuration | JavaScript デバッグ


このダイアログを使用して、ビルトインまたは外部Webサーバー上で実行されているアプリケーションでJavaScriptをデバッグするための構成を作成し、Dart Webアプリケーションをデバッグします。

WebStormは、内蔵または外部のWebサーバー上で動作するデバッグアプリケーションをサポートしています。デバッグは、Google Chrome(英語)および他のChromeファミリのブラウザを使用してのみ実行できます。ビルトインサーバー上で実行されているアプリケーションのデバッグは、Firefox リモートデバッグ構成を使用して、バージョン36以上のFirefoxでサポートされています。Firefoxの外部Webサーバーで実行されているアプリケーションのデバッグはまったくサポートされていません。

JavaScriptデバッグ固有の構成設定

項目

説明

URL

  • JavaScript のデバッグ:

    このフィールドには、デバッグするJavaScriptを参照するHTMLファイルのURLアドレスを指定します。ローカルデバッグの場合は、http://localhost:<built-in server port>/<project root>の形式でURLを入力してください。ビルトインのサーバーポート(1024以上)は、設定ダイアログのデバッガーページで指定されています。

  • Dart Webアプリケーションのデバッグ:

    このフィールドには、Dartコードを参照してデバッグするHTMLファイルのURLアドレスを http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file>の形式で指定します。このURLアドレスのポートがデバッガーページの内蔵サーバーポートと同じであることを確認してください。

ブラウザー

このリストから、アプリケーションがデバッグされるChromeまたはChromeファミリーの別のブラウザを選択します。

Dartアプリケーションの場合、Dartコードはdart2js(英語)またはdartdevc(英語)ツールを介してJavaScriptにコンパイルされます。このツールは、Dart Webアプリケーションを実行またはデバッグするときに自動的に呼び出されます。

スクリプトのロード時にブレークポイントが検出されていることを確認する

このチェックボックスを選択すると、ページロードで実行されたコード内のブレークポイントがすぐにヒットするようになります。初期ページの読み込みが遅くなる可能性があることに注意してください。

ローカル・ファイルのリモート URL

  • JavaScript のデバッグ:

    WebStormは、手動で永続的なデバッグ設定を作成した場合にのみ、この領域を表示します。自動的に生成された一時的な構成の場合、領域は表示されません。

    この領域では、デバッグに関与するローカルファイルをサーバー上のコピーのURLアドレスにマップします。

    • ファイル/ディレクトリ - この読み取り専用フィールドで、プロジェクトツリー内の目的のローカルファイルまたはディレクトリを選択します。

    • リモート URL - このフィールドに、サーバー上の対応するファイルまたはフォルダーの絶対URLアドレスを入力します。

    これらのマッピングは、プロジェクトルートのローカルフォルダー構造がサーバーのフォルダー構造と異なる場合にのみ必要です。構造が同一である場合、WebStorm自体は、サーバー上のコピーのURLアドレスを解析することによって、ローカルファイルへのパスを「取得」します。

  • Dart Webアプリケーションのデバッグ:

    WebStormは、URLフィールドで指定されたポートが設定ダイアログのデバッガーページで指定された内蔵Webサーバーのポートと異なる場合にのみ、この領域を表示します。

共通

実行設定を編集するとき(ただし実行設定テンプレートは編集しないとき)、次のオプションを指定できます。

項目

説明

名前

このフィールドで、実行/デバッグ構成の名前を指定します。この名前は、後で編集することを選択したとき、またはたとえば実行ポップアップ Shift+Alt+F10から起動したときに、作成された構成を識別できます。

VCS で共有する

このチェックボックスを選択すると、実行/デバッグ構成がバージョン管理下に置かれ、他のチームメンバーが使用できるようになります。

共有の実行/デバッグ設定は .idea\runConfigurations フォルダーの別々のxmlファイルに保存され、ローカルの実行/デバッグ設定は .idea\workspace.xml に保存されます。

ツールバー

実行/デバッグ構成のツリー表示には、プロジェクトで使用可能な構成を管理したり、デフォルトの構成テンプレートを調整したりするのに役立つツールバーがあります。

項目

ショートカット

説明

the Add buttonAlt+Insert

実行/デバッグ構成を作成します。

the Remove buttonAlt+Delete

選択した実行/デバッグ構成を削除します。デフォルト設定は削除できません。

CopyCtrl+D

選択した実行/デバッグ構成のコピーを作成します。デフォルト設定のコピーを作成してください。

Save configuration

ボタンは、一時設定を選択したときにのみ表示されます。このボタンをクリックして、一時的な設定を永続的なものとして保存します。

Edit Templates

テンプレート(つまり、デフォルトの実行/デバッグ構成設定)を表示および編集します。テンプレートはテンプレートノードに表示され、新しく作成された構成に使用されます。

Method up / Method down

Alt+Up / Alt+Down

選択した実行/デバッグ構成をリスト内で上下に移動します。

リスト内の設定の順序によって、実行/デバッグ設定を選択したときに表示される設定の順序が決まります。

実行/デバッグ構成のデフォルトのテンプレートは、常にアルファベット順にソートされています。

Move into new folder / Create new folder

新しいフォルダーに移動/新しいフォルダーを作成します。実行/デバッグ構成をフォルダーに入れることでグループ化できます。

フォルダーを作成するには、カテゴリ内の設定を選択し、Folderをクリックしてフォルダー名を指定します。カテゴリだけにフォーカスがある場合は、空のフォルダーが作成されます。

次に、設定をフォルダー内、フォルダー間、またはフォルダー外に移動するには、ドラッグまたは Move Up ボタンと Move Down ボタンを使用します。

グループ化を解除するには、フォルダーを選択して Remove Configurationをクリックします。

Sort configurations

このボタンをクリックすると、設定がアルファベット順にソートされます。

起動前

この領域では、選択した実行/デバッグ構成を開始する前に実行しなければならないタスクを指定できます。タスクはリストに表示されている順序で実行されます。

項目

ショートカット

説明

the Add buttonAlt+Insert

このアイコンをクリックして、以下の使用可能なタスクのいずれかを追加します。

  • 外部ツールの実行 : 外部アプリケーションを実行するように選択します。開いたダイアログで、実行したい1つまたは複数のアプリケーションを選択します。WebStormでまだ定義されていない場合は、その定義を追加してください。詳しくは、外部ツールおよび外部ツールを参照してください。

  • 別の構成を実行 : 別の実行/デバッグ構成を実行することを選択します。開いたダイアログで、実行する設定を選択します。

  • ファイル監視の実行 : このオプションを選択すると、WebStormは現在アクティブなすべてのファイルウォッチャーを適用します。

  • Grunt タスクの実行 : Gruntタスクを実行するには、このオプションを選択してください。

    表示されるGrunt タスクダイアログで、必要なタスクが定義されている Gruntfile.js を指定し、実行するタスクを選択して、Gruntツールに渡す引数を指定します。

    Node.jsインタープリターの場所、それに渡すパラメータ、およびgrunt-cliパッケージへのパスを指定します。

  • gulp タスクの実行 : Gulpタスクを実行するには、このオプションを選択してください。

    表示されるGulp タスクダイアログで、必要なタスクが定義されている Gulpfile.js を指定し、実行するタスクを選択して、Gulpツールに渡す引数を指定します。

    Node.jsインタープリターの場所、それに渡すパラメータ、およびgulpパッケージへのパスを指定します。

  • npm スクリプトの実行 : npmスクリプトを実行するには、このオプションを選択してください。

    開いたNPMスクリプトダイアログで、npm実行/デバッグ構成設定を指定します。
  • CoffeeScript ソース・マップの生成 : CoffeeScriptソースのソースマップを生成するには、このオプションを選択してください。表示されるダイアログで、CoffeeScriptのソースファイルがある場所を指定します。

the Remove buttonAlt+Delete

このアイコンをクリックして、選択したタスクをリストから削除します。

EditEnter

選択したタスクを編集するには、このアイコンをクリックします。開いたダイアログで必要な変更を加えます。

Method up / Method down

Alt+Up / Alt+Down

これらのアイコンをクリックして、選択したタスクをリスト内で1行上または下に移動します。(タスクはリストに表示されている順序で実行されます。)

このページを表示する

実行/デバッグ構成を実際に開始する前に、実行/デバッグ構成設定を表示するには、このチェックボックスを選択します。

ツール・ウィンドウをアクティブにする

デフォルトではこのチェックボックスは選択されており、実行/デバッグ構成を開始すると実行またはデバッグツールウィンドウが開きます。

それ以外の場合、チェックボックスがオフになっていると、ツールウィンドウは表示されません。ただし、設定が実行されているときは、Alt+4 または Alt+5を押すと、それに対応するツールウィンドウを自分で開くことができます。

最終更新日: 2020年2月17日

関連ページ:

デバッガー

WindowsとLinux用のmacOS用このページを使用して、デバッガの動作を設定し、そのビューをカスタマイズします。共通オプション:ブレークポイントでアプリケーションにフォーカスするこのチェックボックスが選択されている場合、ブレークポイントを押すと、WebStormはエディターにこのブレークポイ...

Dart

WebStormを使用すると、DartWebおよびコマンドラインアプリケーションを開発、実行、およびデバッグできます。WebStormは、コード補完、エラーおよび構文の強調表示、コードインスペクションおよびクイックフィックス、検索とナビゲーション、リファクタリングなどを提供します。WebStormは...

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

WebStormでコードを実行またはデバッグするには、多数の実行/デバッグ構成を使用できます。各実行/デバッグ構成は、実行/デバッグ起動プロパティの名前付きセットを表します。WebStormを使用して実行、デバッグ、またはテスト操作を実行する場合は、常にパラメータを使用して既存の設定の1つに基づいて...

実行/デバッグ構成をグループ化するフォルダーの作成

同じタイプの実行/デバッグ構成が多すぎる場合、フォルダーにグループ化して、視覚的に区別しやすくすることができます。フォルダーが不要になったら、削除できます。このフォルダーにグループ化された実行/デバッグ構成は、対応する実行/デバッグ構成タイプのルートに移動されます。グループ化すると、実行/デバッグ構...

外部ツール

コンパイラ、linter、コードコンプレッサーなどのサードパーティのスタンドアロンアプリケーションを使用する推奨方法は、ツール固有のファイル監視を構成することです。このファイル監視は、ファイルの変更を追跡し、必要に応じてアプリケーションを自動的に実行します。詳細については、ファイル監視を参照してくだ...

外部ツール

WindowsとLinux用のmacOS用WebStormから実行可能な外部ツールとして、サードパーティのスタンドアロンアプリケーション(コードジェネレータとアナライザ、プリプロセッサとポストプロセッサ、データベースユーティリティなど)を定義します。外部ツールにコンテキスト情報(現在選択されているフ...