ツイートはてブ LINE Pocket

Node.js の実行とデバッグ

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

始める前に

JavaScript and TypeScript、JavaScript Debugger、Node.js に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。

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

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

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

実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから Node.js を選択します。実行 / デバッグ構成: Node.js ダイアログが開きます。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、PyCharm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、PyCharm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、をクリックして新しいインタープリターを構成することもできます。
ファイルフィールドで、それを開始するアプリケーションのメインファイルへのパスを指定します（たとえば、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 アプリケーションをデバッグする

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

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

Node.js 実行 / デバッグ構成を使用して、アプリケーションとともにデバッガーを開始します。
すでに実行中のアプリケーションにデバッガーを接続します。この場合、アプリケーションはすでにデバッグモード(英語)で実行されており、PyCharm は実行中のプロセスに接続します。
PyCharm は --inspect、--inspect-brk を認識し、現在は非推奨の --debug フラグを認識しているため、デバッグのために任意のアプリケーションにアクセスできるようになります。
実行中のアプリケーションをデバッグするには、Node.js/Chrome への接続構成を使用します。

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

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

必要に応じて、コードにブレークポイントを設定します。
上記の説明に従って、Node.js 実行 / デバッグ構成を作成します。
ブラウザーでアプリケーションを自動的に開くには、起動前のタスクを設定します。をクリックして起動前領域を展開し、をクリックして、リストから Web ブラウザーの起動を選択します。開いたダイアログで、アプリケーションの開始ページの URL（Express アプリケーションの場合は localhost:3000 など）と使用するブラウザーを指定します。
必要に応じて、PyCharm は JavaScript デバッグ構成を生成し、サーバー側とクライアント側のコードのデバッグに従って Node.js 構成と一緒に自動的に開始できます。
ツールバーの実行ウィジェットリストから、新しく作成した Node.js 構成を選択し、その横にあるをクリックします。
デバッグツールウィンドウが開きます。
ブレークポイントを使用してコードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザーの別のページに移動します。
デバッグツールウィンドウのコントロールが有効になっている PyCharm に切り替えます。デバッグセッションに進みます - ブレークポイントをステップスルーし、フレームを切り替え、値をその場で変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。

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

PyCharm を使用すると、すでに開発モードで実行されている、つまり --inspect または --inspect-brk フラグで起動されたアプリケーションをデバッグできます。デバッグセッションは Node.js/Chrome への接続構成を通じて開始され、Chrome デバッグプロトコル(英語)を使用します。

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

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

Attach the debugger to a running app from the Run tool windowl

必要に応じてブレークポイントを設定します。
--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 を押しながらリンクをクリックします。
PyCharm は、自動的に生成された Node.js/Chrome への接続構成を使用してデバッグセッションを開始します。ブレークポイントを使用してコードの実行をトリガーする手順を実行します。例: アプリケーションの開始ページからブラウザーの別のページに移動します。
または、Debugger listening <host>:<port> メッセージからポート番号をコピーし、後で Node.js/Chrome 構成にアタッチするに貼り付けます。

実行 / デバッグ構成を介して実行中のアプリにデバッガーをアタッチする

上記のように、--inspect または --inspect-brk フラグを使用してアプリケーションを実行します。
必要に応じてブレークポイントを設定します。
メインメニューで実行 | 実行構成の編集に移動し、開いた構成の編集ダイアログでをクリックし、リストから Node.js/Chrome への接続を選択します。「実行 / デバッグ構成: Node.js/Chrome への接続」ダイアログが開きます。
対象アプリケーションが実行されているホストと、接続先の Node.js プロセスを開始するときに --inspect または --inspect-brk に渡されるポートを指定します。
ターミナルツールウィンドウまたは実行中のアプリケーションを制御する実行ツールウィンドウの情報メッセージ Debugger listening <host>:<port> からポート番号をコピーします。
このポートが、アプリケーションが実行されているポートとは異なることを確認してください。デフォルトのポートは 9229 です。
オプション: ローカルファイルのリモート URL エリアのプロジェクトフォルダーのリモートパスを指定します。これは、実行中のアプリケーションのルートフォルダーが PyCharm プロジェクトのルートフォルダーの名前と異なる場合に役立ちます。
ツールバーの実行ウィジェットリストから、新しく作成された Node.js/Chrome への接続構成を選択し、その横にあるをクリックします。デバッグツールウィンドウが開きます。
ブレークポイントでコードをトリガするアクションを実行します。デバッグセッションの制御が PyCharm に戻ります。
PyCharm に切り替えます。デバッグツールウィンドウで、ブレークポイントをステップスルーし、フレームを切り替え、値をオンザフライで変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。

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

PyCharm 組み込みデバッガーは、実行中の 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 への接続構成を選択し、その横にあるをクリックします。デバッガーは、PyCharm のコードに設定したブレークポイントで停止します。
これで、コードに変更を加えて Ctrl+S として保存するたびに、nodemon はアプリケーションを自動的に再ロードし、デバッガーは再起動されたプロセスに自動的に再アタッチします。