Vue Devtoolsを使ってVue.js × VSCodeでデバッグができるようにする

やりたいこと

• Vue.jsのコードをデバッグしたい
  • ブラウザから入力 => ソースコード上で処理の流れを追いたい

どうすればできそうか

• Vue Devtoolsという拡張機能を使えば、Chrome等のブラウザを使ってデバッグできそう
• 全体的な方針は以下の記事を参考にすれば良さそう
  • https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html

やったこと・手順

• Chromeの拡張機能でVue.js devtoolsをインストールし、設定変更
  • ブラウザから拡張機能をインストールする
  • ブラウザの拡張機能の設定で、「ファイルの URL へのアクセスを許可する」をONにする
• VSCode側で設定を行う
  • vue.config.js に設定を追加する
  • launch.jsonに設定を追加する

vue.config.js

// Vue CLI 3 を使っている場合、vue.config.js 内の devtool プロパティを設定もしくは更新してください:
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

• ブレイクポイントを設定する
• VSCodeからアプリケーションを起動させる

=> 無事ブレイクポイントにデバッガが止まった！

つまった箇所

• 拡張機能をONにしたけどデバッグできない
  • エラー。VSCode側（ソースコード側）で、ライブラリのインストールが必要なのか？
  • 原因は、前述した「vue.config.js に設定を追加する」をやっていなかったため。手順を見直して解決。

Download the Vue Devtools extension for a better development experience:https://github.com/vuejs/vue-devtools`

参考サイト

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