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

前提

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

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

やりたいこと

1. vscodeからNuxt.jsのデバッグをしたい
2. かつ、vscodeの行クリックで設定したブレークポイントで、エディタのデバッグモード上のbreakをかけたい(debuggerを明に埋め込むのではなく)
3. 実際にbreak中に表示されるコードは、本来編集しているコードとしたい

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

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"]
    }
  ]
}

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

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

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

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

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