WebStorm 2020.1ヘルプ

実行/デバッグ構成:Node.js

実行 | 構成の編集 | Add New Configuration | %configuration_name%

This page provides descriptions of the configuration-specific items as well as options that are common for all run/debug configurations. To learn how to use this configuration , see Node.jsの実行とデバッグ

このダイアログで、コンピューター上のNode.jsアプリケーションと一緒にデバッガーを開始するための構成を作成します。

始める前に

Node.js(英語)をダウンロードしてインストールします。

構成タブ

項目説明
Node インタープリターIn this field, specify the Node.js interpreter to use. This can be a local or remote Node.js interpreter or a Windows Subsystem for LinuxのNode.js(英語) . Select an interpreter from the list or click the Browse button and configure a new one in the dialog that opens.
Node パラメーター

このフィールドに、Node.js実行可能ファイルに渡されるNode.js固有のコマンドラインオプションを入力します。最も一般的なオプションは次のとおりです。

  • 実行中にCoffeeScriptファイルをオンザフライでJavaScriptにコンパイルするには、--require coffee-script/register を使用します。

    このモードでは、coffee-script パッケージの一部であるregister.jsファイルがプロジェクト内にあることが必要です。npmおよびYarnで説明されているように、coffee-script パッケージをNode.jsページにローカルにインストールする必要があります。

  • Node.js v7をChromeデバッグプロトコル(英語)サポートに使用している場合は、--inspect または --inspect-brk パラメーターを使用します。それ以外の場合、デフォルトでデバッグプロセスはV8デバッグプロトコル(英語)を使用します。

完全なリストはNode.jsコマンドラインオプション(英語)を参照してください。

作業ディレクトリIn this field, specify the working directory(英語) of the application. By default, the field shows the project root folder.
JavaScript ファイルIn this field, specify the path to the main file of the application that starts it (for example, bin / www for Node.js Expressアプリケーション(英語) ).

CoffeeScriptをデバッグする場合は、ソースマップを含む生成されたJavaScriptファイルへのパスを指定します。ファイルは外部で、またはファイル監視を使用したコンパイルによって生成できます。詳細については、CoffeeScriptのデバッグを参照してください。

アプリケーション・パラメーターこのフィールドに、起動時にprocess.argv(英語)配列を介してアプリケーションに渡されるNode.js固有の引数を入力します。
環境変数In this field, specify the environment variables(英語) for the Node.js executable file, if applicable. Click 参照 the Browse button to the right of the field and configure a list of variables in the 環境変数 dialog, that opens:
  • 新しい変数を定義するには、the Add button をクリックして、変数の名前と値を指定します。

  • 変数定義を破棄するには、リストでそれを選択して the Remove buttonをクリックします。

  • 準備ができたら、OKをクリック

変数の定義は、環境変数読み取り専用フィールドにセミコロンを区切り文字として表示されます。例:

  • NODE_PATH : モジュール検索パスの前に付いたディレクトリの : -separatedリスト。

  • NODE_MODULE_CONTEXTS : 独自のグローバルコンテキストでモジュールをロードするには1に設定します。

  • NODE_DISABLE_COLORS : REPLの色を無効にするには1に設定します。

Dockerコンテナー設定

設定を手動で入力するか、icons.general.openDisk.png をクリックして開き、Dockerコンテナー設定の編集ダイアログで設定を指定するか、自動構成チェックボックスを選択してWebStormに自動的に設定させます。

オプション
  • ネットワークを無効にする : ネットワークを無効にするには、このチェックボックスを選択します。これは --net="none"に対応します。つまり、コンテナー内では外部ネットワークリソースは利用できません。

  • ネットワークモード : オプション --netの他の値に対応します。
    • bridge is the default value. An IP address will be allocated for container on the bridge’s network and traffic will be routed though this bridge to the container.
      Containers can communicate via their IP addresses by default. To communicate by name, they must be linked.

    • host : コンテナー内のホストのネットワークスタックを使用します。

    • container:<name|id> : use the network stack of another container, specified via its name or id

    詳細はネットワーク設定(英語)のドキュメントを参照してください。

  • リンク : このセクションを使用して、作成するコンテナーを他のコンテナーとリンクします。これは Network mode = bridge に適用され、--link オプションに対応します。

  • すべてのポートを公開する : すべてのコンテナーポートをホストに公開します。これはオプション --publish-allに対応します。

  • ポート・バインディング : Specify the list of port bindings(英語). Similar to using the -p option with docker run .

  • 追加のホスト : これは --add-host オプションに対応します。詳細は/ etc / hostsの管理(英語)ページを参照ください。

  • ボリューム・バインディング : Use this field to specify the bindings between the special folders-volumes and the folders of the computer, where the Docker daemon runs. This corresponds to the -v option.
    See コンテナー内のデータを管理する(英語) for details.

  • 環境変数 : このフィールドを使用して、環境変数とその値のリストを指定します。これは -e オプションに対応します。詳細はENV (環境変数)(英語)ページを参照ください。

icons.actions.down.png をクリックして表を展開します。リストを作成するには、icons.general.add.png , icons.general.remove.pngまたは icons.actions.edit.png をクリックしてください。

自動構成

WebStormでコンテナー設定を構成するには、このチェックボックスを選択します。自動設定モードの場合:

  • WebStorm creates a new image and installs the npm modules in it.

  • WebStorm runs the container with the new image, binds your project folder to /opt/project folder in the container to ensure synchronization on update, and maps /opt/project/node_modules to the OS temporary directory.

Even with automatic configuration, you still need to bind the port on which your application is running with the port of the container. Those exposed ports are available on the Docker host’s IP address (by default 192.168.99.100). Such binding is required when you debug the client side of a Node.js Express application. In this case, you need to open the browser from your computer and access the application at the container host through the port specified in the application.

Dockerコンテナー設定フィールドで the Browse button をクリックし、表示されるDockerコンテナー設定の編集ダイアログでポート・バインディング 領域を展開します。

the Add button をクリックし、開いているポート・バインディングダイアログで、次のようにポートをマッピングします。

  • コンテナー・ポート」フィールドに、アプリケーションで指定されているポートを入力します。

  • ホスト・ポートフィールドに、コンピューターのブラウザでアプリケーションを開くときに経由するポートを入力します。

  • ホスト IPフィールドに、DockerのホストのIPアドレスを入力します。デフォルトIPは192.168.99.100です。ホストは、設定/環境設定ダイアログDockerページAPI URLフィールドで指定されます。

  • OKをクリックしてDockerコンテナー設定の編集ダイアログに戻り、新しいポートマッピングがリストに追加されます。

OKをクリックして実行/デバッグ構成:Node.jsダイアログに戻ります。

ブラウザ/ライブ編集タブ

このタブで、ブラウザの動作を設定し、アプリケーションのクライアント側コードのデバッグを有効にします。この機能は JavaScript Debug 実行構成によって提供されるため、技術的には、WebStormはサーバー側とクライアント側のコードに対して別々の実行構成を作成しますが、すべての設定を1つの専用Node.js実行構成で指定します。

項目

説明

ブラウザーを開くIn the field in this area, specify a project HTML file to create a correct URL to this file according to the project root to be started on the built-in web server. For example, if you choose project_root/inner_folder/index.html the resulting URL will be http://localhost:63342/project_root/inner_folder/index.html . If you select the 起動後 checkbox, the browser will open this page automatically after the application starts. Alternatively you can view the same result by opening the page with this URL address in the browser of your choice manually.
起動後

このチェックボックスを選択すると、ブラウザが自動的に開きます。リストから使用するブラウザを選択します。

  • システムデフォルトブラウザを使用するには、デフォルトを選択します。

  • カスタムブラウザを使用するには、リストからそれを選択します。ライブ編集はChromeでのみ完全にサポートされていることに注意してください。

  • ブラウザを設定するには、the Browse button をクリックして、表示されるWeb ブラウザーダイアログで設定を調整します。詳しくは、ブラウザーの構成を参照してください。

JavaScript デバッガーを使用する

選択したブラウザでクライアントサイドコードのデバッグを有効にするには、このチェックボックスをオンにします。

V8プロファイリングタブ

このタブでV8 CPUとメモリのプロファイリングを有効にします。

項目説明
CPU プロファイル情報を記録するアプリケーションの起動時にCPUプロファイリングデータの記録を開始するには、このチェックボックスをオンにします。下の領域のコントロールが有効になります。以下を指定してください。
  • ログ・フォルダー : このフィールドでは、記録されたログを保存するフォルダーを指定します。プロファイリングデータはログファイル isolate-<session number>に保存されます。

  • すべての出力を単一のログ・ファイルにまとめる (V8 インスタンス) : このチェックボックスを選択すると、すべてのV8インスタンスに対して1つのログファイル(したがって1つのプロファイリング結果ビュー)のみが作成されます。インスタンスごとに別々のファイルを作成するには、チェックボックスをオフにします。Node.jsは追加のV8インスタンスを作成できます。デバッグプロセス用。

ヒープ・スナップショットの取得を許可するメモリプロファイリングを実行する場合は、このチェックボックスを選択してください。

ログタブ

In this tab, enable showing information produced by a logging tool like morgan(英語) in the コンソール tab of the 実行 tool window. See Node.jsアプリの実行時にログを管理する for details.

共通

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

項目

説明

名前

実行/デバッグ構成の名前を指定して、たとえば実行ポップアップ Alt+Shift+F10から構成を編集または実行するときにすばやく識別します。

並列実行を許可する

この実行構成の複数のインスタンスを並行して実行できるようにする場合に選択します。

デフォルトでは無効になっており、別のインスタンスの実行中にこの構成を開始すると、WebStormは実行中のインスタンスを停止して別のインスタンスを開始することを提案します。これは、実行/デバッグ構成が多くのリソースを消費し、複数のインスタンスを実行する正当な理由がない場合に役立ちます。

プロジェクトファイルとして保存

実行構成設定を含むファイルを保存して、他のチームメンバーと共有します。デフォルトの場所は.idea/runConfigurationsです。ただし、.ideaディレクトリを共有したくない場合は、プロジェクト内の他のディレクトリに構成を保存できます。

デフォルトでは無効になっており、WebStormは実行構成設定を.idea/workspace.xmlに保存します。

ツールバー

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

項目ショートカット説明
the Add buttonAlt+Insert実行/デバッグ構成を作成します。
the Remove buttonAlt+Delete選択した実行/デバッグ構成を削除します。デフォルト設定は削除できません。
CopyCtrl+D選択した実行/デバッグ構成のコピーを作成します。デフォルト設定のコピーを作成してください。
Save configurationこのボタンは、一時的な構成を選択した場合にのみ表示されます。このボタンをクリックして、一時的な構成を永続的なものとして保存します。
Edit Templatesテンプレート(つまり、デフォルトの実行/デバッグ構成設定)を表示および編集します。テンプレートはテンプレートノードに表示され、新しく作成された構成に使用されます。
Method up / Method downAlt+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実行/デバッグ構成設定を指定します。
  • React Native Bundler の開始 : select this option to run the bundler automatically, as part of a running or debugging session. by default, this is done through react-native start . If your application uses Expo(英語) , you need to run the development server via the start npm task. To do that, click Add , then in the React Nativeの設定 dialog, choose npm script and select start from the list.

  • TypeScript のコンパイル : 組み込みTypeScriptコンパイラを実行するように選択し、TypeScriptコードに加えたすべての変更が生成されたJavaScriptファイルに反映されるようにします。表示されるTypeScriptコンパイル設定ダイアログで、エラーをチェックチェックボックスを選択または選択解除して、エラーが検出された場合のコンパイラの動作を設定します。

    • エラーをチェックチェックボックスが選択されていると、コンパイラーはすべてのエラーを表示し、実行構成は開始されません。

    • エラーをチェックチェックボックスがオフの場合、コンパイラは検出されたすべてのエラーを表示しますが、実行構成は起動されます。

  • CoffeeScript ソース・マップの生成 : CoffeeScriptソースのソースマップを生成するには、このオプションを選択してください。表示されるダイアログで、CoffeeScriptのソースファイルがある場所を指定します。

  • リモートホストにファイルをアップロードする : select this option to have the application files automatically uploaded to the server according to the default server access configuration

the Remove buttonAlt+Deleteこのアイコンをクリックして、選択したタスクをリストから削除します。
EditEnter選択したタスクを編集するには、このアイコンをクリックします。開いたダイアログで必要な変更を加えます。
Method up / Method downAlt+Up / Alt+Downこれらのアイコンをクリックして、選択したタスクをリスト内で1行上または下に移動します。タスクは、リストに表示されている順に実行されます。
このページを表示する実行/デバッグ構成を実際に開始する前に、実行/デバッグ構成設定を表示するには、このチェックボックスを選択します。
ツール・ウィンドウをアクティブにする

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

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

最終更新日: 2020年7月09日

関連ページ:

プラグイン

macOSのWebStorm | 環境設定 | プラグインUse this page tomanage plugins: browse the plugin repository, install, remove, enable, disable, and update plugins.主なコントロ...

プラグインを管理する

プラグインはWebStormのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コー...

Node.jsの実行とデバッグ-ヘルプ| WebStorm

WebStormは、Node.jsアプリケーションの実行とデバッグを支援します。WebStormから起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に、Node.jsバンドルプラグインがプラグインのページで有効になっていることを確認してください。詳細につ...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

npmおよびYarn

WebStormはnpm、Yarn、およびYarn 2と統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコマンドライ...

CoffeeScript

WebStormでは、JavaScriptにコンパイルされたCoffeeScriptを使用できます。WebStormは*.coffeeファイルを認識し、でマークします。CoffeeScriptコードでブレークポイントを直接設定でき、WebStormはコンパイル時に生成されたソースマップを使用してブレ...