やりたいこと

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

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

つまった箇所

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

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

参考サイト