実行 / デバッグ構成: Node.js
次の Node.js バージョンが PhpStorm 2020.3 でサポートされています。
Node.js 10
Node.js 12
Node.js 14
Node.js 15
サポートされている Node.js バージョンの詳細を参照してください。
このダイアログで、コンピューター上の Node.js アプリケーションと一緒にデバッガーを開始するための構成を作成します。
始める前に
Node.js(英語) をダウンロードしてインストールします。
構成タブ
項目 | 説明 |
---|---|
Node インタープリター | このフィールドに、使用する Node.js インタープリターを指定します。これはローカルまたはリモート Node.js インタープリターまたは Windows Subsystem for Linux の Node.js(英語) です。リストからインタープリターを選択するか、または |
Node パラメーター | このフィールドに、Node.js 実行可能ファイルに渡される Node.js 固有のコマンドラインオプションを入力します。最も一般的なオプションは次のとおりです。
完全なリストは Node.js コマンドラインオプション(英語)を参照してください。 |
作業ディレクトリ | このフィールドでは、アプリケーションの作業ディレクトリ(英語)を指定します。デフォルトでは、フィールドにはプロジェクトのルートフォルダーが表示されます。 |
JavaScript ファイル | このフィールドには、それを開始するアプリケーションのメインファイルへのパスを指定します(たとえば、Express(英語) アプリケーションの場合は bin/www)。 CoffeeScript をデバッグする場合は、ソースマップを含む生成された JavaScript ファイルへのパスを指定します。ファイルは外部で、またはファイル監視を使用したコンパイルによって生成できます。詳細については、CoffeeScript のデバッグを参照してください。 |
アプリケーションパラメーター | このフィールドに、起動時に process.argv(英語) 配列を介してアプリケーションに渡される Node.js 固有の引数を入力します。 |
環境変数 | このフィールドで、必要に応じて Node.js 実行可能ファイルの環境変数(英語)を指定します。フィールドの右側にある参照
変数の定義は、環境変数読み取り専用フィールドにセミコロンを区切り文字として表示されます。例:
|
Docker コンテナー設定 | |
オプション |
|
自動構成 | PhpStorm でコンテナー設定を構成するには、このチェックボックスを選択します。自動設定モードの場合:
自動設定でも、アプリケーションが実行されているポートをコンテナーのポートとバインドする必要があります。これらの公開ポートは Docker ホストの IP アドレス(デフォルトでは 192.168.99.100)で利用可能です。Express アプリケーションのクライアント側をデバッグするときは、このようなバインディングが必要です。この場合は、コンピューターからブラウザーを開き、アプリケーションで指定されているポートを介してコンテナーホストのアプリケーションにアクセスする必要があります。 |
ポートバインドを構成する
Docker コンテナー設定フィールドで
をクリックし、表示される Docker コンテナー設定の編集ダイアログでポートバインディング領域を展開します。
をクリックし、開いているポートバインディングダイアログで、次のようにポートをマッピングします。
「コンテナーポート」フィールドに、アプリケーションで指定されているポートを入力します。
ホストポートフィールドに、コンピューターのブラウザーでアプリケーションを開くときに経由するポートを入力します。
ホスト IP フィールドに、Docker のホストの IP アドレスを入力します。デフォルト IP は 192.168.99.100 です。ホストは、設定 / 環境設定ダイアログの Docker ページの API URL フィールドで指定されます。
OK をクリックして Docker コンテナー設定の編集ダイアログに戻り、新しいポートマッピングがリストに追加されます。
OK をクリックして実行 / デバッグ構成: Node.js ダイアログに戻ります。
ブラウザー / ライブ編集タブ
このタブで、ブラウザーの動作を設定し、アプリケーションのクライアント側コードのデバッグを有効にします。この機能は JavaScript Debug
実行構成によって提供されるため、技術的には、PhpStorm はサーバー側とクライアント側のコードに対して別々の実行構成を作成しますが、すべての設定を 1 つの専用 Node.js 実行構成で指定します。
項目 | 説明 |
---|---|
ブラウザーを開く | この領域のフィールドに、プロジェクトの HTML ファイルを指定して、内蔵 Web サーバーで起動するプロジェクトルートに従ってこのファイルへの正しい URL を作成します。例: project_root/inner_folder/index.html を選択した場合、結果の URL は http://localhost:63342/project_root/inner_folder/index.html になります。起動後チェックボックスを選択すると、ブラウザーはアプリケーションの起動後にこのページを自動的に開きます。別の方法として、手動で選択のブラウザーでこの URL アドレスでページを開くことによって同じ結果を見ることができます。 |
起動後 | このチェックボックスを選択すると、ブラウザーが自動的に開きます。リストから使用するブラウザーを選択します。
|
JavaScript デバッガーを使用する | 選択したブラウザーでクライアントサイドコードのデバッグを有効にするには、このチェックボックスをオンにします。 |
V8 プロファイリングタブ
このタブで V8 CPU とメモリのプロファイリングを有効にします。
項目 | 説明 |
---|---|
CPU プロファイル情報を記録する | アプリケーションの起動時に CPU プロファイリングデータの記録を開始するには、このチェックボックスをオンにします。下の領域のコントロールが有効になります。以下を指定してください。
|
ヒープスナップショットの取得を許可する | メモリプロファイリングを実行する場合は、このチェックボックスを選択してください。 |
ログタブ
このタブで、実行ツールウィンドウのコンソールタブに morgan (英語) などのログツールによって生成された情報を表示できるようにします。詳細については、Node.js アプリの実行時にログを管理するを参照してください。
共通
実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。
項目 | 説明 |
---|---|
名前 | 実行 / デバッグ構成の名前を指定して、たとえば実行ポップアップ Alt+Shift+F10 から構成を編集または実行するときにすばやく識別します。 |
並列実行を許可する | この実行構成の複数のインスタンスを並行して実行できるようにする場合に選択します。 デフォルトでは無効になっており、別のインスタンスの実行中にこの構成を開始すると、PhpStorm は実行中のインスタンスを停止して別のインスタンスを開始することを提案します。これは、実行 / デバッグ構成が多くのリソースを消費し、複数のインスタンスを実行する正当な理由がない場合に役立ちます。 |
プロジェクトファイルとして保存 | 実行構成設定を含むファイルを保存して、他のチームメンバーと共有します。デフォルトの場所は .idea/runConfigurations です。ただし、.idea ディレクトリを共有したくない場合は、プロジェクト内の他のディレクトリに構成を保存できます。 デフォルトでは無効になっており、PhpStorm は実行構成設定を .idea/workspace.xml に保存します。 |
ツールバー
実行 / デバッグ構成のツリー表示には、プロジェクトで使用可能な構成を管理したり、デフォルトの構成テンプレートを調整したりするのに役立つツールバーがあります。
項目 | ショートカット | 説明 |
---|---|---|
| Alt+Insert | 実行 / デバッグ構成を作成します。 |
| Alt+Delete | 選択した実行 / デバッグ構成を削除します。デフォルト設定は削除できません。 |
| Ctrl+D | 選択した実行 / デバッグ構成のコピーを作成します。デフォルト設定のコピーを作成してください。 |
| このボタンは、一時的な構成を選択した場合にのみ表示されます。このボタンをクリックして、一時的な構成を永続的なものとして保存します。 | |
| テンプレート(つまり、デフォルトの実行 / デバッグ構成設定)を表示および編集します。テンプレートはテンプレートノードに表示され、新しく作成された構成に使用されます。 | |
| Alt+Up / Alt+Down | 選択した実行 / デバッグ構成をリスト内で上下に移動します。 リスト内の設定の順序によって、実行 / デバッグ構成を選択したときに表示される設定の順序が決まります。 実行 / デバッグ構成のデフォルトのテンプレートは、常にアルファベット順にソートされています。 |
| 新しいフォルダーに移動 / 新しいフォルダーを作成します。実行 / デバッグ構成は、フォルダーに配置することでグループ化できます。 フォルダーを作成するには、カテゴリ内の設定を選択し、 次に、設定をフォルダー内、フォルダー間、またはフォルダー外に移動するには、ドラッグまたは グループ化を解除するには、フォルダーを選択して | |
| このボタンをクリックすると、設定がアルファベット順にソートされます。 |
起動前
この領域では、選択した実行 / デバッグ構成を開始する前に実行しなければならないタスクを指定できます。タスクはリストに表示されている順序で実行されます。
項目 | ショートカット | 説明 |
---|---|---|
| Alt+Insert | このアイコンをクリックして、以下の使用可能なタスクのいずれかを追加します。
|
| Alt+Delete | このアイコンをクリックして、選択したタスクをリストから削除します。 |
| Enter | 選択したタスクを編集するには、このアイコンをクリックします。開いたダイアログで必要な変更を加えます。 |
| Alt+Up / Alt+Down | これらのアイコンをクリックして、選択したタスクをリスト内で 1 行上または下に移動します。タスクは、リストに表示されている順に実行されます。 |
このページを表示する | 実行 / デバッグ構成を実際に開始する前に、実行 / デバッグ構成設定を表示するには、このチェックボックスを選択します。 | |
ツールウィンドウをアクティブにする | デフォルトではこのチェックボックスは選択されており、実行 / デバッグ構成を開始すると実行またはデバッグツールウィンドウが開きます。 それ以外の場合、チェックボックスがオフの場合、ツールウィンドウは非表示になります。ただし、構成が実行されている場合は、Alt+4 または Alt+5 を押すことにより、構成に対応するツールウィンドウを自分で開くことができます。 |
関連ページ:

プラグインを管理する
このサイトのメニューやアクション名表記は日本語です。PhpStorm を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように PhpStorm のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を...

サポートされている Node.js バージョン
このページには、アプリケーション開発のために PhpStorm でサポートされているすべての Node.js バージョンが一覧表示されます。Node.js 公式 Web サイトでのリリースのステータスに関する情報とともに、Node.js のリリーススケジュールを見つけてください。次の Node.js バージョンが PhpStorm 2020.3 でサポートされています。Node.js 10、Node.js 12、Node.js 14、Node.js 15、Node.js のアクティブなロングター...

Node.js
Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。PhpStorm は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインス...

CoffeeScript
PhpStorm では、JavaScript にコンパイルされた CoffeeScript を使用できます。PhpStorm は *.coffee ファイルを認識し、でマークします。CoffeeScript コードでブレークポイントを直接設定でき、PhpStorm はコンパイル時に生成されたソースマップを使用してブレークポイントを認識します。PhpStorm は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コードの作成を支援します。シンボルから宣言...

Docker
Docker を使用すると、開発者は、本番環境と同じ環境でコードをテストするために、コンテナー内にアプリケーションをデプロイできます。PhpStorm は、Docker プラグインを使用して Docker サポートを提供します。プラグインはバンドルされており、デフォルトで有効になっています。Docker プラグインは PhpStorm にバンドルされており、デフォルトでアクティブ化されています。プラグインが無効になっている場合は、プラグインの管理の説明に従って、設定 / 環境設定 | プラグインページ...

設定 / 「設定」ダイアログ
現在のプロジェクトに関連する設定はアイコンでマークされています。設定ダイアログでは、PhpStorm の動作と外観を制御できます。ダイアログの左上部分にある検索フィールドを使用して、目的のオプションを見つけます。あるいは、検索ボックスにあるカテゴリの階層リスト(設定のグループ)を使用して設定を参照することもできます。このページでは、ダイアログの主なコントロールの説明を見つけます。検索テキスト領域に検索キーワードを入力します。検索文字列を入力している間、ダイアログのオプションのリストは、一致する出...