Node.js の実行とデバッグ
PyCharm は Node.js アプリケーションの実行とデバッグを支援します。 PyCharm から起動したアプリケーションのデバッグや、すでに実行中のアプリケーションへのアタッチが可能です。
始める前
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 Managing plugins を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Node.js および JavaScript Debugger プラグインをインストールしてください。 プラグインは PyCharm Pro でのみ利用できます。
Node.js アプリケーションを実行する
PyCharm は、型 Node.js の実行構成に従って Node.js アプリケーションを実行します。 PyCharm は、この構成を Node.js アプリケーションと一緒にデバッガーを起動するためにも使用します。
Node.js 実行 / デバッグ構成を作成する
に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン(
)をクリックし、リストから Node.js を選択します。 実行/デバッグ構成:Node.jsダイアログが開きます。
使用する Node.js ランタイムを指定します。
Project エイリアスを選択すると、PyCharm は ノードランタイム フィールドがある JavaScript ランタイムページのプロジェクトのデフォルトインタープリターを自動的に使用します。 ほとんどの場合、PyCharm はプロジェクトのデフォルトランタイムを検出し、そのフィールドに自動で入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。
ファイル フィールドで、それを開始するアプリケーションのメインファイルへのパスを指定します(たとえば、 Express(英語) アプリケーションの場合は bin/www )。
オプション:
Node.js の起動をカスタマイズする Node パラメーター を指定します。 例: 実験的な Node.js 機能を有効にするか、別のオプションを渡すことができます。 詳細については、 Node.js 公式 Web サイト(英語)を参照してください。
アプリケーションパラメーター フィールドに、 process.argv(英語) 配列を介して起動時にアプリケーションに渡される Node.js 固有の引数を指定します。
ブラウザーでアプリケーションを自動的に開くには、起動前のタスクを設定します。
をクリックして 起動前 領域を展開し、
をクリックして、リストから Launch Web Browser を選択します。 開いたダイアログで、アプリケーションの開始ページの URL(Express アプリケーションの場合は
localhost:3000など)と使用するブラウザーを指定します。
アプリケーションの実行
上で説明したように実行 / デバッグ構成を作成するを選択するか、既存のものを変更してダイアログで 実行 をクリックします。
あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。

アプリケーションが起動し、 実行ツールウィンドウが開いてアプリケーションの出力が表示されます。
アプリケーションで morgan(英語) などのログツールを使用していて、このツールがログをファイルに書き込む場合、これらのログは 実行 ツールウィンドウの コンソール タブで確認できます。
Node.js アプリケーションの実行時にログを管理する
上記のように Node.js 実行 / デバッグ構成を作成し、 ログ タブに移動します。
利用可能なログファイル(存在する場合)を一覧表示する Log files to be shown in console フィールドの横にある
をクリックします。
表示される ログファイルエイリアスの編集 ダイアログで、ログエントリのリストに表示するエイリアス名を入力し、ログファイルの場所を指定します。 このパターンがカバーするすべてのファイルを表示するか、最後のパターンのみを表示するかを選択します。
新しいログファイルがリストに追加される 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 を利用すると、 Docker コンテナーや、 さまざまな転送プロトコルまたは SSH でアクセスできるリモートホストで実行中の Node.js アプリケーションもデバッグできます。
コンピューター上の Node.js アプリケーションと一緒にデバッガーを起動する

必要に応じて、コードに ブレークポイントを設定します。
上記の説明に従って 、Node.js 実行 / デバッグ構成を作成します。
ブラウザーでアプリケーションを自動的に開くには、起動前のタスクを設定します。
をクリックして 起動前 領域を展開し、
をクリックして、リストから Launch Web Browser を選択します。 開いたダイアログで、アプリケーションの開始ページの URL(Express アプリケーションの場合は
localhost:3000など)と使用するブラウザーを指定します。
ツールバーの 実行 ウィジェットリストから、新しく作成した Node.js 構成を選択し、その横にある
をクリックします。

デバッグツールウィンドウが開きます。
ブレークポイントを使用してコードの実行をトリガーする手順を実行します。 例: アプリケーションの開始ページからブラウザー内の別のページに移動します。
PyCharm に切り替えると、 デバッグ ツールウィンドウのコントロールが有効になります。 デバッグセッションを進め 、ブレークポイントをステップ実行 、フレームを切り替え、値をオンザフライで変更し、 中断されたプログラムを調べ、 式を評価し、 ウォッチを設定できます。
実行中の Node.js アプリケーションをデバッグする
PyCharm を使うと、開発モードですでに実行中のアプリケーション(つまり、 --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 を押しながらリンクをクリックします。PyCharm は、自動生成された Node.js/Chrome への接続構成でデバッグセッションを開始します。 ブレークポイントを使用してコードの実行をトリガーする手順を実行します。 例: アプリケーションの開始ページからブラウザー内の別のページに移動します。
実行 / デバッグ構成を介して実行中のアプリにデバッガーをアタッチする
上記のように、
--inspectまたは--inspect-brkフラグを使用してアプリケーションを実行します。必要に応じて ブレークポイントを設定します。
メインメニューの に移動し、開いた 構成の編集 ダイアログで
をクリックして、リストから Node.js/Chrome への接続 を選択します。

実行/デバッグ構成:Node.js/Chrome にアタッチダイアログが開きます。
対象アプリケーションが実行されているホストと、接続先の Node.js プロセスを開始するときに
--inspectまたは--inspect-brkに渡されるポートを指定します。
Debugger listening <host>:<port>の情報メッセージ内、 ターミナル ツールウィンドウまたは実行中のアプリケーションを制御する Run tool window でポート番号をコピーします。
ツールバーの 実行 ウィジェットリストから、新しく作成した 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 はアプリケーションを自動的に再ロードし、デバッガーは再起動されたプロセスに自動的に再アタッチします。