JavaScript
debug
SourceMap
VSCode
nuxt.js

Nuxt.jsをvscodeでデバッグするためのメモ


前提


  • Nuxt.jsの動作モードは universal(SSR有効)


  • vscodeのextensionとしてDebugger for Chrome がインストールされている



やりたいこと


  1. vscodeからNuxt.jsのデバッグをしたい

  2. かつ、vscodeの行クリックで設定したブレークポイントで、エディタのデバッグモード上のbreakをかけたい(debuggerを明に埋め込むのではなく)

  3. 実際にbreak中に表示されるコードは、本来編集しているコードとしたい

上記2はいまいち伝えにくいのですが、こういうふうにbreakしたいということです。

1.png

3は、build後のコードではなく、本来実装社が見ているコード上でデバッグが行えるようにしたいという意味です。これを無視すれば、 debugger (という記載)を仕込むだけで大半片付くわけですが。

で、以下のようになりました。


nuxt.config.jsを修正

nuxt.config.jsに以下の行を足します。

SourceMapとはなんぞやという人(自分はそうでした)は こちら をご参照ください。

  build: {

()
extend(config, ctx) {
()
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.devtool = 'inline-cheap-module-source-map' // <-- ここを足す
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
})
}
},
},

以降は多分に こちら を参考にしました。


package.jsonを修正

{

"name": "nuxt-bulma",
(略)
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"test": "ava",
"debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt" <-- 追記
},

このキーとなっている "debug"は、次のlauhch.jsonのruntimeArgs と合わせる必要があります。


launch.jsonを修正

こうなりました。

{

// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "debug"],
"port": 9229,
"sourceMaps": true
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": ["Launch via NPM", "Launch Chrome"]
}
]
}

この状態で、デバッグ用の再生ボタンを押すとブラウザが新規に開きます。

スクリーンショット 2019-04-17 20.41.26.png

その後一定時間が経過するとブラウザウィンドウでbuildのプログレスが表示されるようになり、その後ブレイクがかかる部分の処理を実行すると、vscode上でブレイクがかかります。

いやー、調べるのにいろいろ時間がかかりました。

ひとえに自分のNuxt.jsおよびJavaScriptの知識不足ですね。

情報を公開してくださっていた皆様に感謝します。