Node.js の実行とデバッグ
WebStorm は、Node.js アプリケーションの実行とデバッグを支援します。WebStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。
始める前に
設定 | プラグインページのインストール済みタブで、Node.js および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Node.js アプリケーションを実行する
WebStorm は、タイプ Node.js の実行構成に従って Node.js アプリケーションを実行します。WebStorm は、この構成を Node.js アプリケーションと一緒にデバッガーを起動するにも使用します。
Node.js 実行 / デバッグ構成を作成する
に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから Node.js を選択します。実行 / デバッグ構成: Node.js ダイアログが開きます。使用する Node.js ランタイムを指定します。
プロジェクトエイリアスを選択した場合、WebStorm は JavaScript ランタイムページのノードランタイムフィールドにあるプロジェクトのデフォルトインタープリターを自動的に使用します。ほとんどの場合、WebStorm はプロジェクトのデフォルトランタイムを検出し、そのフィールドに自動的に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。詳細については、「リモート Node.js ランタイムの構成」、「ローカル Node.js ランタイムの構成」、「Linux の Windows サブシステムで Node.js を使用する」を参照してください。
ファイルフィールドで、それを開始するアプリケーションのメインファイルへのパスを指定します（たとえば、Express(英語) アプリケーションの場合は bin/www）。
オプション:
Node.js の起動をカスタマイズする Node パラメーターを指定します。例: 実験的な Node.js 機能を有効にするか、別のオプションを渡すことができます。詳細については、Node.js 公式 Web サイト(英語)を参照してください。
アプリケーションパラメーターフィールドに、process.argv(英語) 配列を介して起動時にアプリケーションに渡される Node.js 固有の引数を指定します。
ブラウザーでアプリケーションを自動的に開くには、起動前のタスクを設定します。
をクリックして起動前領域を展開し、 をクリックして、リストから Web ブラウザーの起動を選択します。開いたダイアログで、アプリケーションの開始ページの URL（Express アプリケーションの場合は localhost:3000など）と使用するブラウザーを指定します。
アプリケーションの実行
上で説明したように実行 / デバッグ構成を作成するを選択するか、既存のものを変更してダイアログで実行をクリックします。
あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。
アプリケーションが起動し、実行ツールウィンドウが開き、アプリケーションの出力が表示されます。
アプリケーションで morgan(英語) などのログツールを使用していて、このツールがログをファイルに書き込む場合、これらのログは実行ツールウィンドウのコンソールタブで確認できます。
Node.js アプリケーションの実行時にログを管理する
上記のように Node.js 実行 / デバッグ構成を作成し、ログタブに移動します。
利用可能なログファイル（存在する場合）を一覧表示するコンソールで表示するログファイルフィールドの横にある
をクリックします。表示されるログファイルエイリアスの編集ダイアログで、ログエントリのリストに表示するエイリアス名を入力し、ログファイルの場所を指定します。このパターンがカバーするすべてのファイルを表示するか、最後のパターンのみを表示するかを選択します。
新しいログファイルがリストに追加される Node.js 実行 / デバッグ構成ダイアログに戻るには、OK をクリックします。その横にあるアクティブチェックボックスを選択します。前のコンテンツをスキップするには、内容のスキップチェックボックスを選択します。
オプション:
プロセスコンソール出力をログファイルに保存できるようにするには、コンソール出力をファイルに保存するチェックボックスをオンにして、ファイルの場所を指定します。
プロセスコンソールをいつ表示するかを選択します。
Node.js アプリケーションをデバッグする
WebStorm を使用すると、Node.js アプリケーションのデバッグが容易になります。ブレークポイントを JavaScript または TypeScript コードの中に置くと、debugger および console.log() ステートメントが不要になります。コードを調べたり、バグの場所を理解するのに役立つ多くのことができます。デバッグツールウィンドウでは、コールスタックと現在の状態の変数を表示し、エディターで式を評価し、コードをステップ実行できます。
次の 2 つの方法でデバッグセッションを開始できます。
Node.js 実行 / デバッグ構成を使用して、アプリケーションとともにデバッガーを開始します。
すでに実行中のアプリケーションにデバッガーを接続します。この場合、アプリケーションはすでにデバッグモード(英語)で実行されており、WebStorm は実行中のプロセスに接続します。
WebStorm は
--inspect、--inspect-brkを認識し、現在は非推奨の--debugフラグを認識しているため、デバッグのために任意のアプリケーションにアクセスできるようになります。実行中のアプリケーションをデバッグするには、Node.js/Chrome への接続構成を使用します。
WebStorm を使用すると、Vagrant ボックス、Docker コンテナー、さまざまな転送プロトコルまたは SSH を介してアクセス可能なリモートホストで実行されている Node.js アプリケーションをデバッグすることもできます。
コンピューター上の Node.js アプリケーションと一緒にデバッガーを起動する
必要に応じて、コードにブレークポイントを設定します。
上記の説明に従って、Node.js 実行 / デバッグ構成を作成します。
ブラウザーでアプリケーションを自動的に開くには、起動前のタスクを設定します。
をクリックして起動前領域を展開し、 をクリックして、リストから Web ブラウザーの起動を選択します。開いたダイアログで、アプリケーションの開始ページの URL（Express アプリケーションの場合は localhost:3000など）と使用するブラウザーを指定します。ツールバーの実行ウィジェットリストから、新しく作成した Node.js 構成を選択し、その横にある
をクリックします。
デバッグツールウィンドウが開きます。
ブレークポイントを使用してコードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザーの別のページに移動します。
デバッグツールウィンドウのコントロールが有効になっている WebStorm に切り替えます。デバッグセッションに進みます - ブレークポイントをステップスルーし、フレームを切り替え、値をその場で変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
実行中の Node.js アプリケーションをデバッグする
WebStorm を使用すると、開発モードですでに実行されているアプリケーション (つまり、アプリケーションが --inspect または --inspect -brk フラグで起動されたアプリケーション) をデバッグできます。デバッグセッションは Node.js/Chrome への接続構成を通じて開始され、Chrome デバッグプロトコル(英語)を使用します。
実行またはデバッグツールウィンドウまたは組み込みのターミナルからデバッガーを起動する
アプリケーションが --inspect または --inspect-brk フラグで開始された場合、組み込みのターミナルから、実行ツールウィンドウから、デバッグツールウィンドウからデバッグセッションを開始できます。
必要に応じてブレークポイントを設定します。
--inspectまたは--inspect-brkフラグを使用してアプリケーションを実行します。いくつかの方法でそれを行うことができます。例:package.json で、
--inspectまたは--inspect -brkフラグが付いたスクリプトの横のガターにある
をクリックし、実行 '<script name>' を選択します。詳細については、スクリプトの実行とデバッグを参照してください。
埋め込まれたターミナル（Alt+F12）を開き、次のように入力します。
node --inspect-brk <path to the starting page of your application relative to the project root>
ターミナル、実行ツールウィンドウ、デバッグツールウィンドウのコンソールタブには、情報メッセージ
Debugger listening <host>:<port>が表示されます。デフォルトのポートは9229です。デバッグを開始するには、Ctrl+Shift を押しながらリンクをクリックします。WebStorm は、自動的に生成された Node.js/Chrome への接続構成を使用してデバッグセッションを開始します。ブレークポイントを使用してコードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザーの別のページに移動します。
実行 / デバッグ構成を介して実行中のアプリにデバッガーをアタッチする
上記のように、
--inspectまたは--inspect-brkフラグを使用してアプリケーションを実行します。必要に応じてブレークポイントを設定します。
メインメニューのに移動し、開いた構成の編集ダイアログで
をクリックして、リストから Node.js/Chrome への接続を選択します。
実行 / デバッグ構成: Node.js/Chrome への接続ダイアログが開きます。
対象アプリケーションが実行されているホストと、接続先の Node.js プロセスを開始するときに
--inspectまたは--inspect-brkに渡されるポートを指定します。
ターミナルツールウィンドウまたは実行中のアプリケーションを制御する実行ツールウィンドウの情報メッセージ
Debugger listening <host>:<port>からポート番号をコピーします。
ツールバーの実行ウィジェットリストから、新しく作成された Node.js/Chrome への接続構成を選択し、その横にある
をクリックします。デバッグツールウィンドウが開きます。ブレークポイントでコードをトリガするアクションを実行します。デバッグセッションの制御が WebStorm に戻ります。
WebStorm に切り替えます。デバッグツールウィンドウで、ブレークポイントをステップスルーし、フレームを切り替え、値をオンザフライで変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。
nodemon を使用する Node.js アプリケーションをデバッグする
WebStorm 組み込みデバッガーは、実行中の Node.js プロセスに自動的に再接続できます。これにより、コードが更新されたときに Node.js プロセスを自動的に再ロード(英語)する nodemon ユーティリティ(英語)を使用する Node.js アプリケーションをデバッグできます。
このようなアプリケーションをデバッグするには、（--inspect または --inspect-brk フラグを使用して）デバッグモードでアプリケーションを開始し、自動的に再接続するオプションをオンにした Node.js/Chrome へのアタッチデバッグ構成を使用してアプリケーションに接続する必要があります。
nodemon をインストールする
組み込みターミナル（Alt+F12）で、
npm install --save-dev nodemonまたはyarn add nodemon --devと入力して、nodemon を開発依存関係としてインストールします。
デバッグモードで nodemon を使用してアプリケーションを起動する
次の
npm debugスクリプトを作成して実行します。"debug": "nodemon --inspect <path_to_the_file_that_starts_your_application>詳細は、スクリプトの実行とデバッグを参照してください。
または、上記のように Node.js 実行 / デバッグ構成を介して
inspectフラグを渡します。
アプリケーションのデバッグ
必要に応じて、コードにブレークポイントを設定します。
実行中の Node.js アプリケーションのデバッグの説明に従って新しい Node.js/Chrome へのアタッチ構成を作成し、自動的に再接続するチェックボックスを選択します。
通常、設定
9229でポートを変更する必要はありません。デバッガーが待機しているデフォルトのポートです。ただし、デバッグモードでアプリを実行したときにログに記録されたメッセージで使用されているポートを確認することはできます。
ツールバーの実行ウィジェットリストから、新しく作成された Node.js/Chrome への接続構成を選択し、その横にある
をクリックします。デバッガーは、WebStorm のコードに設定したブレークポイントで停止します。これで、コードに変更を加えて Ctrl+S として保存するたびに、nodemon はアプリケーションを自動的に再ロードし、デバッガーは再起動されたプロセスに自動的に再アタッチします。
関連ページ：
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
実行 / デバッグ構成: Node.js
作成: 次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 22 - アクティブな長期サポート（LTS）バージョン、Node.js 24 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「Node.js の実行とデバッグ」を参照してください。このダイアログで...
JavaScript ランタイム
推奨ランタイム：このエリアでは、使用するランタイムを選択します。利用可能なランタイムのセットは、インストールされているプラグインによって異なります。パッケージマネージャー：このフィールドでは、現在のプロジェクトのパッケージマネージャー (npm、Yarn、pnpm、bun) を選択します。WebStorm は、これらのマネージャーへの現在のシステムパスに、、エイリアスを使用します。カスタムインストールを使用するには、選択をクリックし、関連するパッケージマネージャーのインストールフォルダーを選...
リモート Node.js ランタイムの構成
WebStorm では、リモートホストまたは仮想環境にインストールされた Node.js 上でアプリケーションを開発、テスト、リント、実行、デバッグする場合、リモート Node.js ランタイムを構成する必要があります。リモート Node.js ランタイムは、Node.js リモートインタープリターの構成ダイアログで設定します。このダイアログは、設定ダイアログの JavaScript ランタイムページから、またはそれ以降に、リモート環境でアプリケーションを実行またはデバッグするための Node.j...
Node.js
Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。WebStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...
実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。アプリケーションがの開発モードで実行されている場合は、実行ツールウィンドウから直接デバッグを開始できます。を押したまま、アプリケーションが実行されている URL をクリックするだけです。Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーショ...