バージョン
執筆時のnpmとnodeのバージョンは以下でした。
// npm バージョン
$ npm -v
6.11.3
// node バージョン
$ node -v
v12.11.1
Nuxt.jsのバージョンは2.12.2を使用しています。
// package.json
〜〜〜
"nuxt": "^2.12.2"
〜〜〜
やることリスト
- package.jsonのsctiptsタグ内にdebugを追加
- Debugger for Chromeプラグインのインストール
- VSCodeのlaunch.jsonを作成する
package.json scriptsにdebugを追加
そのままですが、package.jsonのscriptsにdebugを追加します。
// package.json
"scripts": {
〜〜〜〜
"debug": "node --inspect-brk node_modules/nuxt/bin/nuxt"
〜〜〜〜
},
記載が完了したら、試しに実行してみます。
node.js公式も併せて参照していただきたいのですが、デフォルトのアドレスとポートは(127.0.0.1:9229)が使用されます。
※もしもデフォルトポートを変更する必要がある場合、下記のように記載します
// package.json
"scripts": {
〜〜〜〜
"debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt"
〜〜〜〜
},
レガシーデバッガーの”–debug”または”–debug-brk”を使用するのは、Node.js 7.7.0の時点で非推奨となっています。
VSCodeのプラグインのインストール
Debugger for Chromeと検索しインストールします。
インストールだけなので割愛。
VSCodeにlaunch.jsonを追加
VSCodeの構成の追加を行うと自動でlaunch.jsonが作成できますが、プロジェクトのルートディレクトリ直下に.vscodeフォルダを作成し、中にlaunch.jsonを自分で追加しても問題ないです。
“chrome”の”launch”を追加して、”node”の”launch”を追加します。
chromeはデフォルトだとポート(8080)が指定されているので、そこだけ修正しています。nuxt.config.js記載のポートで問題なしです。
// launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",→デフォルトは8080?だった気がする
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"port": 9229,
"runtimeArgs": [
"run-script",
"debug"
],
"skipFiles": [
"<node_internals>/**"
]
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": [
"Launch via NPM",
"Launch Chrome"
]
}
]
}
これで、VSCodeのデバックメニューから”Full-stack”でChromeとNPMの両方を実行できます。
コメント