バックエンドにNode.js、フロントエンドにAngularを使っているプロジェクトのデバッグ方法についてです。
まず手始めにバックエンド(Node.js)の開発を行っており、vscodeのlaunch.jsonにnodemonの設定をしてデバッグしていました。
次に、フロントエンド(Angular)の開発に入り、デバッグしようとしたところ、ブレークポイントが効きません。
nodemonじゃフロントのデバッグはできない事を知り、調べて見るとDebugger for Chromeという拡張機能があり、それを使うとフロンドエンド(Angular)のデバックができました。
しかしです！
一人で開発する場合は、フロントエンドとバックエンドって、一歩ずつ開発してデバッグするわけです。いちいち、どっちのデバッグをするのかを考えて進めるのは、めんどくさいし、効率が悪い。
そこで、同時にデバッグできる方法はないものかと調べた結果見つけました。
その方法を紹介します。
nodemonのインストール
node.jsをデバックするために利用するnodemonをインストールします(nodeでもできますが、nodemonの方がトレースが表示されるので便利)。
npm install nodemon -g
nodemonによるデバッグの設定
.vscodeフォルダにあるlaunch.jsonに、デバッグ時にnodemonが起動するように設定します。
(vscodeのデバッグに行き、プルダウンで構成の追加を選択するとlaunch.jsonを開くことができます)
これで、vscodeでデバッグを開始すると、nodemonが起動し、Node.jsのプログラムがデバックできるようになります。
{
"version": "0.2.0",
"configurations": [
// nodemonによるnode.jsのデバック設定
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}\\dist\\server\\server.js",
"restart": false,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"DEBUG": "express:*"
}
}
]
}
Debugger for Chromeによるデバッグの設定
まず、拡張機能「Debugger for Chrome」をインストールします。
インストール後、.vscodeフォルダにあるlaunch.jsonに、Debugger for Chromeを使ってデバックするように設定します。
vscodeのデバッグでchromeを選択して開始すると、chromeが立ち上がってAngularをデバッグできます。
{
"version": "0.2.0",
"configurations": [
// Debugger for ChromeによるAngularのデバック設定 ← ここ！
{
"type": "chrome",
"request": "launch",
"name": "chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
// nodemonによるnode.jsのデバック設定
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}\\dist\\server\\server.js",
"restart": false,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"DEBUG": "express:*"
}
},
]
}
AngularとNode.jsを一緒にデバッグする設定
さて、お膳立ては終わりました。
launcher.jsonには、node.jsのデバッグ、angularのデバッグの設定を仕込みました。
これを一緒に起動できれば、どっちもデバッグできるようになるわけです。
launch.jsonに、compoundsセクションを追加します。
{
"version": "0.2.0",
"configurations": [
// Debugger for ChromeによるAngularのデバック設定
{
"type": "chrome",
"request": "launch",
"name": "chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
// nodemonによるnode.jsのデバック設定
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}\\dist\\server\\server.js",
"restart": false,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"DEBUG": "express:*"
}
}
],
// Node.jsとAngularのデバッグを開始する設定 ← ここ！
"compounds": [
{
"name": "fullstack",
"configurations": ["nodemon", "chrome"]
}
]
}
これでvscodeのデバッグにfullstackが表示されます。これを実行すると、Debugger for Chromeとnodemonが起動され、Angularなソースもnode.jsなソースもデバッグできます。
おまけ
nodemonを使うと、node.jsのプロセスが残ったまんまになります。気づくとやたら重たくなっています(私だけでしょうか?Windowsだからでしょうか?)
そこで、nodemonのデバッグが終わった時に、node.jsのプロセスを一掃する仕組みを考えました。
task.jsonにnode.jsプロセス一掃設定
.vscodeフォルダにあるtask.jsonに、node.jsプロセスを一掃する設定を行います。
PowerShellのtaskkillコマンドで、node.exeのプロセスを全てkillする設定を行っています。
{
"version": "2.0.0",
"tasks": [
"label": "stop node",
"type": "shell",
"command": "taskkill /F /IM node.exe"
}
]
}
launch.jsonにtaskを設定
launch.jsonに、task.jsonで設定したタスクを、nodemonが終了するときに実行するように設定します。
これで、node.jsプロセスが残ったままになりません。
※これはWindows限定の方法です。
{
// nodemonによるnode.jsのデバック設定
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}\\dist\\server\\server.js",
"restart": false,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"DEBUG": "express:*"
},
"postDebugTask": "stop node" ← ここ！
}
}