nuxtjsのデバック方法

package.jsonファイルの記述

• おそらくdevなどは指定してあると思いますので、"debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",の記述を追記する

  "scripts": {
　~~ (省略) ~~
    "dev": "cross-env NODE_ENV=\"local\" nuxt",
    "debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",
　~~ (省略) ~~
  },

デバックできる状況を作る

• ターミナルを２つ起動してそれぞれのコマンドで実行します。

$ yarn debug
$ yarn dev

開発環境にchromeでアクセスする

• localhost:3000にアクセスして「デベロッパーツール」を起動します。nodejsのアイコンがあるので、そちらをクリックする

• 下記の画面が表示されるので、「source」タブをクリックする

• 「add folder to workspaces」をクリックして、デバックしたいソースが格納されているフォルダを選択します。

ブレイクポイントの設定

• chrome developer tool上で直接ファイルを修正できますので、「debugger」という文字列を追記するか、 　直接ブレイクポイントを設定することができます。 　ファイルを修正している状況ではブレイクポイントを指定することができませんので、必ず保存してから設定してください。