PhpStorm 2020.3 ヘルプ

Node.js の実行とデバッグ

PhpStorm は、Node.js アプリケーションの実行とデバッグを支援します。PhpStorm から起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。

始める前に

設定 / 環境設定 | プラグインページで Node.js バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

    Node.js アプリケーションを実行する

    PhpStorm は、タイプ Node.js の実行構成に従って Node.js アプリケーションを実行します。PhpStorm は、この構成を Node.js アプリケーションと一緒にデバッガーを起動するにも使用します。

    Node.js 実行 / デバッグ構成を作成する

    1. メインメニューから実行 | 構成の編集を選択し、次に構成の編集ダイアログでツールバーのthe Add buttonをクリックしてリストから Node.js を選択します。実行 / デバッグ構成: Node.js ダイアログが開きます。

    2. 使用する Node.js インタープリターを指定してください。これはローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。

    3. JavaScript ファイルフィールドで、それを開始するアプリケーションのメインファイルへのパスを指定します（たとえば、エクスプレス(英語)アプリケーションの場合は bin/www ）。

    4. オプション:

      • Node.js の開始をカスタマイズする Node パラメーターを指定します。例：実験的な Node.js 機能を有効にするか、別のオプションを渡すことができます。詳細については、Node.js 公式 Web サイト(英語)を参照してください。

      • アプリケーションパラメーターフィールドに、process.argv(英語) 配列を介して起動時にアプリケーションに渡される Node.js 固有の引数を指定します。

    アプリケーションの実行

    • ツールバーの実行 / デバッグ構成を選択しますリストから新しく作成した Node.js 設定を選択し、その隣にあるRunをクリックします。アプリケーションが起動し、実行ツールウィンドウが開き、アプリケーションの出力が表示されます。

    アプリケーションで morgan(英語) などのログツールを使用していて、このツールがログをファイルに書き込む場合、これらのログは実行ツールウィンドウのコンソールタブで確認できます。

    Node.js アプリケーションの実行時にログを管理する

    1. 上記のように Node.js 実行 / デバッグ構成を作成し、ログタブに移動します。

    2. 利用可能なログファイル（存在する場合）を一覧表示するコンソールで表示するログファイルフィールドの横にあるthe Add buttonをクリックします。

    3. 表示されるログファイルエイリアスの編集ダイアログで、ログエントリのリストに表示するエイリアス名を入力し、ログファイルの場所を指定します。このパターンがカバーするすべてのファイルを表示するか、最後のパターンのみを表示するかを選択します。

    4. 新しいログファイルがリストに追加される Node.js 実行 / デバッグ構成ダイアログに戻るには、OK をクリックします。その横にあるアクティブチェックボックスを選択します。前のコンテンツをスキップするには、内容のスキップチェックボックスを選択します。

    5. オプション:

      • コンソール出力をログファイルに保存するには、コンソール出力をファイルに保存するチェックボックスをオンにし、ファイルの場所を指定します。

      • コンソールをいつ表示するかを選択します。

      Node.js run/debug configuration: Log tab

    Node.js アプリケーションのデバッグ

    PhpStorm を使用すると、Node.js アプリケーションのデバッグが容易になります。ブレークポイントを JavaScript または TypeScript コードの中に置くと、debugger および console.log() ステートメントが不要になります。コードを調べたり、バグの場所を理解するのに役立つ多くのことができます。デバッグツールウィンドウでは、コールスタックと現在の状態の変数を表示し、エディターで式を評価し、コードをステップ実行できます。

    次の 2 つの方法でデバッグセッションを開始できます。

    • Node.js 実行 / デバッグ構成を使用して、アプリケーションとともにデバッガーを開始します。

    • すでに実行中のアプリケーションにデバッガーを接続します。この場合、アプリケーションはすでにデバッグモード(英語)で実行されており、PhpStorm は実行中のプロセスに接続します。

      PhpStorm は --inspect , --inspect-brk を認識し、非推奨の --debug フラグが追加されたため、デバッグのためにアプリケーションにアクセスできるようになります。

      実行中のアプリケーションをデバッグするには、Node.js/Chrome への接続構成を使用します。

    PhpStorm を使用すると、Vagrant ボックス、Docker コンテナー、またはさまざまな転送プロトコルまたは SSH を介してアクセス可能な リモートホストで実行されている Node.js アプリケーションをデバッグすることもできます。

    コンピューター上の Node.js アプリケーションと一緒にデバッガーを開始する

    1. 必要に応じて、コードにブレークポイントを設定します。

    2. 上記の説明に従って、Node.js 実行 / デバッグ構成を作成します。必要に応じて、PhpStorm は JavaScript デバッグ構成を生成し、サーバー側とクライアント側のコードのデバッグに従って、Node.js 構成と一緒に自動的に開始できます。

    3. ツールバーの実行 / デバッグ構成を選択しますリストから新しく作成した Node.js 設定を選択し、その隣にあるthe Debug buttonをクリックします。デバッグツールウィンドウが開きます。

    4. ブレークポイントでコードの実行をトリガする手順を実行します。

    5. PhpStorm に切り替えます。デバッグツールウィンドウのコントロールが有効になります。デバッグセッションを続行します。ブレークポイントをステップ実行し、フレーム間を切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、監視を設定します。

      ws_node_debug-local.png

    実行中の Node.js アプリケーションのデバッグ

    PhpStorm を使用すると、Chrome デバッグプロトコル(英語)または V8 デバッグプロトコル(英語)（別名レガシープロトコル）を使用して、すでに実行中のアプリケーションをデバッグできます。

    いずれの場合も、Node.js/Chrome への接続構成を介してデバッグセッションが開始されます。

    組み込みのターミナルから、または実行またはデバッグツールウィンドウからデバッガーを起動する

    アプリケーションが --inspect または --inspect-brk フラグで開始された場合、組み込みのターミナルから、実行ツールウィンドウから、またはデバッグツールウィンドウからデバッグセッションを開始できます。

    Attach the debugger to a running app from the built-in Terminal

    1. --inspect または --inspect-brk フラグを使用してアプリケーションを実行します。いくつかの方法でそれを行うことができます。例：

      • 埋め込まれたターミナル（ Alt+F12 ）を開き、次のように入力します。

        node --inspect-brk <path to the starting page of your application relative to the project root>

      • package.json または npm ツールウィンドウからスクリプトを起動します。詳細については、スクリプトの実行とデバッグを参照してください。

        Launch an app in the debug mode: launch a script

        リストから選択したアクションに応じて、出力は実行またはデバッグツールウィンドウのコンソールタブに表示されます。

    2. ターミナル、実行ツールウィンドウ、またはデバッグツールウィンドウのコンソールタブには、情報メッセージ Debugger listening <host>:<port> が表示されます。デフォルトのポートは 9229 です。デバッグを開始するには、 Ctrl+Shift を押しながらリンクをクリックします。

      PhpStorm は、自動的に生成された Node.js/Chrome への接続構成でデバッグセッションを開始します。

    Chrome デバッグプロトコルを使用したデバッグ

    このプロトコルを使用して、--inspect または --inspect-brk フラグで開始されたアプリケーションをデバッグします。このフラグは、6.3 以降の Node.js バージョンで使用されます。

    1. 必要に応じてブレークポイントを設定します。

    2. メインメニューから実行 | 構成の編集を選択し、開いた構成の編集ダイアログでAdd New Configurationをクリックして、リストから Node.js/Chrome への接続を選択します。実行 / デバッグ構成: Node.js/Chrome への接続ダイアログが開きます。

    3. 接続先の Node.js プロセスを開始するときに、ターゲットアプリケーションが実行されているホストと、--inspect または --inspect-brk に渡されるポートを指定します。ターミナルツールウィンドウまたは実行中のアプリケーションを制御する実行ツールウィンドウの情報メッセージ Debugger listening <host>:<port> からポート番号をコピーします。デフォルトのポートは 9229 です

    4. 次へ接続領域で、Chrome または Node.js > 6.3 を --inspect で開始を選択します。

    5. ツールバーの実行 / デバッグ構成を選択しますリストから新しく作成した Node.js/Chrome への接続設定を選択し、その隣にあるthe Debug buttonをクリックします。デバッグツールウィンドウが開きます。

    6. ブレークポイントでコードをトリガするアクションを実行します。デバッグセッションの制御が PhpStorm に戻ります。

    7. PhpStorm に切り替えます。デバッグツールウィンドウで、ブレークポイントをステップスルーし、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。

    V8 デバッグプロトコルを使用したデバッグ

    このプロトコルを使用して、--debug フラグで開始されたアプリケーションをデバッグします。このフラグは、Node.js バージョン 8 より前のバージョンで使用されます。

    1. 上記のように Node.js/Chrome への接続実行 / デバッグ構成を作成し、--debug に渡されるホストとポートを指定します。デフォルトのポートは 9229 です

    2. デバッグするアプリケーションが次のパラメーターで起動されていることを確認してください： --debug=<debugger port> デフォルトのポートは 5858 です。

    3. Chrome Debugging Protocol を使用してデバッグセッションを続行します。

    nodemon を使用する Node.js アプリケーションのデバッグ

    PhpStorm 組み込みデバッガーは、実行中の 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 フラグを渡します。

    アプリケーションのデバッグ

    1. 必要に応じて、コードにブレークポイントを設定します。

    2. 実行中の Node.js アプリケーションのデバッグの説明に従って新しい Node.js / Chrome へのアタッチ構成を作成し、自動的に再接続するチェックボックスを選択します。

      Attach no Node.js run configuration: select the Reconnect automatically checkbox

      通常、設定 9229 でポートを変更する必要はありません。デバッガーが待機しているデフォルトのポートです。ただし、デバッグモードでアプリを実行したときにログに記録されたメッセージで使用されているポートを確認することはできます。

      Node.js application with nodemon running in the debug mode: check the port

    3. ツールバーの実行 / デバッグ構成を選択しますリストから新しく作成した Node.js/Chrome への接続設定を選択し、その隣にあるDebug buttonをクリックします。デバッガーは、PhpStorm のコードに入れたブレークポイントで停止します。

      これで、コードに変更を加えて Ctrl+S を保存するたびに、nodemon はアプリケーションを自動的に再ロードし、デバッガーは再起動されたプロセスに自動的に再アタッチされます。

    Node.js サーバー側とクライアント側のコードのデバッグ

    関連ページ：

    プラグインを管理する

    PhpStorm のユーザーインターフェースはデフォルトでは英語です。日本語化する場合は、日本語言語パックのインストールを参照してください。プラグインは以下に示すように PhpStorm のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する...

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

    ダイアログは、プラグインの管理に従って、設定 / 環境設定 | プラグインページでNode.jsバンドルプラグインが有効になっている場合にのみ使用できます。このダイアログで、コンピューター上の Node.js アプリケーションと一緒にデバッガーを開始するための構成を作成します。始める前に ：Node...

    Node.js

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

    Vagrant: 再現可能な開発環境の使用

    Vagrantは、仮想マシンのライフサイクルを管理するために使用されるコマンドラインユーティリティです。PhpStorm は、Vagrant との完全な統合を提供し、Vagrant 仮想環境の構成、仮想マシンの動作の制御、およびプロジェクト内からの Vagrant コマンドの実行を可能にします。Va...

    Docker

    Dockerを使用すると、開発者はアプリケーションをコンテナー内にデプロイして、実稼働と同じ環境でコードをテストできます。PhpStorm は、Dockerプラグインを使用して Docker サポートを提供します。プラグインはバンドルされ、デフォルトで有効になっています。Dockerプラグインは P...

    ブレークポイント

    ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、単純な場合（たとえば、コード行に到達したときにプログラムを一時停止する場合）や、より複雑なロジック（追加の条件に対するチェック、ログメッ...