Snippet for debugging Nuxt.js with VS Code

nuxt-iconの画像プログラミング
2020.04.19
スポンサーリンク

バージョン

執筆時の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"
〜〜〜

やることリスト

  1. package.jsonのsctiptsタグ内にdebugを追加
  2. Debugger for Chromeプラグインのインストール
  3. 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の両方を実行できます。

コメント