Edited at

Nuxt.js を VS Code上でデバッグする方法


はじめに

Vue.jsはドキュメントが豊富(感謝)なので、Vue.jsとVS Codeを使ったデバッグ方法は公式サイトに記載があります。

こちらを参照されるとよいです。

https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html


2019/06/19 追記

Nuxt.jsのデバッグ環境で、ソースマップがでてなくて、いい感じでデバッグができてませんでした。

こちらを参照していただくと、ソースマップがでて、デバッグがスムーズになります。

あわせて御覧ください。

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


盲点だったこと、思い違いをしていたところ

私はVue.jsの開発は、Vue Devtoolsから入ったため、Vue Devtoolsでなんでもできると思いこんでしまっていたところでした。

このため「Nuxt.jsでも同様のデバッグができるだろう」と考えていたら、Vue Devtoolsでブレイクしないのです。

そして、気づきました!」

Nuxt.jsはサーバサイドレンダリング」しているので、Chrome上で動作するVue Devtoolsでは、デバッグができない!!

超当たり前なのですが、気づくまで辛かった。

たまに、サーバサイドレンダリングができなくて、SPAにフォールバックしたタイミングではデバッグができていましたし(汗)


前提としてのまとめ

Nuxt.jsのデバッグ環境を構築する上で、


  1. サーバサイドで動作するNode.jsのデバッグ

  2. ブラウザ上で動作するSPAの場合のデバッグ

の2つを考慮する必要があるということです。


VS Codeの設定

気づいてしまえば簡単です。

まずは、Node.jsのデバッグ環境を構築します。

次に、Chromeのデバッグ環境を構築し、

最後に統合していきます。


Node.jsのデバッグ環境

package.jsonに以下追記します。


package.json

"scripts": {

"dev-debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",
...

次に、VS Code上でデバッグ構成の追加をします。

2018-08-25_10h20_30.png

初めてデバッグ構成をする(ソースコードに、.vscode/launch.jsonがない)場合は、コマンドパレットが表示されて、「Chrome/Node.js/More...」と選択肢が表示されます。ChromeでもNode.jsでもどちらでも構いませんが、とりあえず「Node.js」を選択してください。

2018-08-25_10h24_16.png

そうすると、launch.jsonが作成されて以下のようなファイルが表示されます。


launch.json

{

// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

{
"type": "node",
"request": "launch",
"name": "プログラムの起動",
"program": "${file}"
}
]
}


作ったのですが、これはちょっと簡素すぎるので、作り直していきます。

再度、「構成の追加」をします。

2018-08-25_10h20_30.png

すると、今度は、以下のように選べる状態になりますので、「Node.js: NPMによる起動」を選択します。

2018-08-25_10h32_36.png

すると、以下のようなファイルになります。

このファイルを直接編集します。


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" <- これで 「dev-debug」に書き換える
],
"port": 9229
},
{ <- このカッコの構成は不要なので削除する
"type": "node",
"request": "launch",
"name": "プログラムの起動",
"program": "${file}"
}
]
}

上記の「launch.json」に記載したように、「runtimeArgs」の「debug」を「package.json」に追記した「dev-debug」に書き換えます。

そして、その下の不要な構成は削除します。

最終的には、「launch.json」は以下のようになります。


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",
"dev-debug"
],
"port": 9229
}
]
}


Node.jsのデバッグ環境のテスト

デバッグ環境のテストというと回文みたいで微妙ですが、きちんと動くか確認します。以下の図の手順で実行していきます。

2018-08-25_10h41_57.png


  1. VS Codeのサイドバーのデバッグアイコンをクリックして、デバッグモードにします。

  2. デバッグ構成が1つだけの場合は、すでに「Launch Via NPM」になっていると思いますが、なっていない方は、ドロップダウンから選択します。

  3. 「デバッグ開始ボタン」を押してデバッグスタート

  4. Node.jsが起動します。一応、「http://localhost:3000」を開いてNuxt.jsのアプリが見えればOKです。

  5. 最後に「停止ボタン」を押してデバッグを停止します。

そしたら、次にChromeの設定をしていきましょう。


Chromeのデバッグ環境

VS Code上で「構成の追加」を選択します。2度目なので大丈夫ですよね?

今度は、「Chrome: Launch」を選択します。

2018-08-25_10h52_31.png

すると、「launch.json」が以下のようになります。


  1. ポート番号が「8080」なので、「3000」に変更

  2. Chromeの起動引数として、「"--remote-debugging-port=9222"」を追加します。


launch.json

{

// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080", <- 80803000に変更する
"webRoot": "${workspaceFolder}",
"runtimeArgs": [ <- ここからの3行を追加する
"--remote-debugging-port=9222"
]
},
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"dev-debug"
],
"port": 9229
}
]
}


Chromeのデバッグ環境のテスト

Node.jsのテストと同様に、デバッグスタートします。

2018-08-25_11h13_51.png

そうすると、以下のようなブラウザが起動します。

Nuxt.jsを実行していないので、「サイトにアクセスができません」が表示されてもOKです。

2018-08-25_11h03_21.png

デバッグを停止すると、自動でブラウザを閉じてくれます。


デバッグ環境の統合

以上で、Node.jsとChromeのデバッグ環境ができましたので、統合していきます。

まずは、「launch.json」を開きます。

2018-08-25_11h05_53.png

そして、以下のように「compounds」を追記します。


launch.json

{

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


統合環境のテスト

何度かしたように、「Full-stack」の構成で「デバッグをスタート」します。


  1. ブラウザが起動します(ただし、Nuxt.jsの実行環境が立ち上がり中の場合は、表示されない場合があります)

  2. Node.jsのデバッグ環境が立ち上がります。

  3. ブラウザをリロードします。

  4. デバッグポイントで停止をしました。

2018-08-25_11h24_42.png

停止する場合は、以下のように2つデバッグ環境が動いていますので、「停止ボタン」を2回押します。

2018-08-25_11h27_02.png


最後に

これでデバッグができるので学習も捗るというものです。

何かあればコメントいただけると幸いです。


参考文献