条件
- Docker使用
- コンテナ起動でNuxt3のプロジェクトが起動
package.json
コンテナ起動時にnpm run devが実行されるかと思います。
この時に--inspectオプションを追加しておきます。
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --inspect", //←←ここにオプション追加
//略
これによりデバッグモードで実行されます。
ですがこれだけではブレークポイントを設定しても止まってくれません。
リモートエクスプローラーでVSCodeを開く
VSCodeでNuxt3の開発コンテナにリモートエクスプローラーで接続する
このアイコンから。
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "node debug",
"request": "attach", // launchではなくattach
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
]
}
デバッグ実行
このアイコンから実行。
先のlaunch.jsonでnode debugとnameに記述したので、node debugというのが出てくるからそれを選ぶ。
いざブレークポイント設定
ここまでやってブレークポイントを設定すれば止まってくれます。
個人的に詰まったところ
- ホストマシン側にnodeを入れていないので、リモートエクスプローラで開かないといけなかった。
- バックエンドとNuxt3を同じリポジトリで管理していて、Nuxt3のルートで開いておらず、launch.jsonの設置場所も違った。
- デバッグポートを新たにdocker-compose.ymlとかに追記しないとできないのか、どうかがわからず検証してみた→必須ではなさそう。たぶん
--inspectで起動するようにしたので、もともと解放していたポートを使ってデバッグできるっぽい。（ちなみにデフォルトのデバッグポートは9229らしい） - launch.jsonの書き方がそもそもわからなかった。
一応上記でvueコンポーネントもtsファイルもデバッグできました。
しかし、わざわざnpm run dev --inspectとしないといけないのかがひっかかり。
npm run devで起動しておいて後からデバッグモードにしするような記述方法がlaunch.jsonであるのかもしれないですが、わからず。（ご存知の方ご教授ください🙇♂️