Nuxt.jsで作成したアプリケーションをVSCodeでデバッグする方法のメモ。ググるとChromeのは出てくるが、Firefoxでやる場合の設定はあまり出てこなかったので備忘録代わりに（と言っても、Chromeの場合とあまり変わらないが）。
環境
- Ubuntu 18.04.5 LTS
- カーネル：5.3.0-23-generic #25~18.04.2-Ubuntu SMP Thu Nov 21 22:27:50 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux
- Visual Studio Code: 1.56.0
- Node.js: 15.12.0
- Nuxt.js: 2.12.1
手順
Debugger for Firefoxのインストール
VSCodeの拡張機能であるDebugger for Firefox - Visual Studio Marketplaceをインストールする。VSCodeがFirefox上で動くアプリケーションや拡張機能をデバッグするためのアドオンらしい。
ソースマップの出力
ソースマップとは、トランスパイル前後のソースコードの対応を取るための情報らしい。以下のようにして、開発環境のみ、この情報を出力するようにする。
// （中略）
build: {
extend(config: any, ctx: any) {
if (ctx.isDev) {
config.devtool = 'eval-source-map'
}
}
},
// （中略）
ソースマップにはパフォーマンスやクオリティの異なるいくつかのバリエーションがある。詳細はDevtool | webpackを参照のこと。なお、以下の設定では、
Recommended choice for development builds with high quality SourceMaps.
とのcommentに従い、eval-source-mapを選択している。
開発環境であるかどうかは、コンテキスト情報を格納したオブジェクトctxのキーisDevを参照すれば分かる（参考：コンテキスト - NuxtJS）。また、ctxにはbooleanのキーisClientやisServerがあり、アプリケーションがクライアントサイドなのかサーバサイドなのかも判別できるようだ（参考：build プロパティ - NuxtJS）。
デバッグ用コマンドの追加
アプリケーションの起動時に、デバッグクライアントも立ち上げる必要がある。これを実現するためには、--inspectオプションを付けてnodeを起動すれば良い。
// （中略）
"scripts": {
"debug": "node --inspect node_modules/.bin/nuxt-ts"
},
// （中略）
なお、デフォルトでは、デバッグクライアントは127.0.0.1:9229で待機する（参考：デバッグ - 入門 | Node.js）。
VSCodeへのアプリケーションとブラウザを起動する設定の追加
.vscode/launch.jsonを作成し、以下のように記述する。
{
"configurations": [
{
"type": "node",
"name": "Launch via npm", // VSCode上に表示される名前。任意
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"debug" // package.jsonに記載したスクリプト名
],
"cwd": "${workspaceFolder}",
"port": 9229, // デバッグクライアントのポートを指定する
"sourceMaps": true // ソースマップを利用することを表す
},
{
"type": "firefox",
"name": "Launch Firefox",
"request": "launch",
"reAttach": true,
"profile": "default", // 使用するプロファイル名を指定する
"keepProfileChanges": true, // 既存のプロファイルをそのまま使う。falseにすると、profileで指定したプロファイルをコピーして使う
"url": "http://localhost:3000", // アクセスするURL. 今回は、nodeアプリケーションがlocalhost:3000で上がる前提になっている
"webRoot": "${workspaceFolder}",
"pathMappings": [
{
"url": "webpack:///app",
"path": "${workspaceFolder}/app"
}
]
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": ["Launch via npm", "Launch Firefox"]
}
]
}
configurationsには、プログラムやデバッガを起動するプロファイルを書く。ここでは、nodeを起動するプロファイルLaunch via npmと、Firefoxを起動するプロファイルLaunch Firefoxを設定している。これらのプロファイル名nameは任意であり、識別しやすい名前を付けておく。
Launch via npmでは、コマンドnpm run debugでnodeを起動する（runtimeExecutableを引数runtimeArgsで実行）。
Launch Firefoxでは、Firefoxを起動する。requestにlaunchを指定すると、ブラウザを新規に起動する。attachとすると、既存のブラウザにアタッチしようとする。ただし、この場合は、ブラウザにアタッチできるように予め設定が必要。詳細はDebugger for Firefox - Visual Studio Marketplaceの"Getting Started" -> "attach"を参照されたい。
また、profileにプロファイル名を指定すると、ブラウザの起動時に指定したプロファイルを読み込ませることができる。プロファイル名を確認するには、ブラウザのアドレスバーにabout:profilesを打ち込む（参考：reactjs - How to preserve extensions in Firefox with VSCode and request Launch - Stack Overflow）。ブラウザの拡張機能、例えばVue.js devtoolsなどを併用する場合は、普段使っているプロファイルを読み込ませるのが便利。
compoundsには、configurationsで設定した複数のプロファイルを同時に起動する設定を記載できる。ここでは、アプリケーションの起動 (Launch via npm) とブラウザの起動 (Launch Firefox) を同時に行うプロファイル Full-stack を作成している。
起動
VSCodeのメニュー"View" -> "Run" (Ctrl+Shift+D) を開くと、先ほどconfigrationやcompoundsとして登録した起動プロファイルがプルダウンリストで表示されるので、Full-stackを選んで"Start Debugging"（再生ボタン）をクリックすると、nodeアプリケーションとブラウザ (Firefox) が立ち上がる。