【Vue】VS Code で Vue をデバッグするには

Vue VS Code

■ はじめに

VS Code を使って、Vueのプロジェクトに対して、
ブレイクポイントを張って、デバッグするのに
結構ハマったので、メモっておく。

基本的には、以下のサイトを読みながらやればできるが
自分の環境では、それだけだとブレイクポイントを張っても
「Breakpoint set but not yet bound」って言われて
上手く止まってくれなかったので、その辺も含めて記録しておく。

https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html
https://qiita.com/sugasaki/items/71d16a9dbf331e77a902
https://note.com/mono01012/n/n130a5333774a

目次

【０】前提条件
【１】ブラウザの拡張機能インストール
【２】コードの修正
【３】VS Code の launch.json の追記
【４】デバッグ
　１）ブレイクポイントを張る
　２）ローカルサーバを起動する
　３）デバッグを開始する

【０】前提条件

以下の環境で行った。

設定環境例 

* OS : Windows10
* VS Code（Ver1.52.1）
* ブラウザ：Chrome

Vue プロジェクト 

* 以下の関連記事の「例：vue init コマンド」で行った通り。
 => 今回のプロジェクト名は「my-app」とする

https://dk521123.hatenablog.com/entry/2020/12/22/192553

【１】ブラウザの拡張機能インストール

デバックしたいブラウザに対応するデバッガの拡張機能をインストールする
 => 「Install」ボタン押下したら、「Visual Studio Code を開きますか？」って
　　聞いてくるので、その流れでインストールする
 => 今回は、「Chrome」でデバッグする

Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Debugger for Firefox
https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug
Debugger for Edge
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge

【２】コードの修正

* /src/vue.config.js を修正・追記する

/src/vue.config.js 

module.exports = {
  "transpileDependencies": [
    "vuetify"
  // ↓↓修正・追記↓↓
  //]
  ],
  configureWebpack: {
    devtool: 'source-map'
  }
  // ↑↑修正・追記↑↑
}

【３】VS Code の launch.json の追記

[1] VS Code の左側にある Activity Bar の Debugging アイコン （バグ＋再生アイコン）を選択
[2] 歯車アイコンをクリックして launch.json ファイルを作成（以下「launch.json」を参考に）

launch.json 

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "runtimeArgs": [
        "--args",
        "--disable-web-security",
        "--allow-file-access-from-files",
        "--allow-running-insecure-content",
        "--ignore-certificate-errors",
      ],
      "webRoot": "${workspaceFolder}/my-app/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

補足：個人的にハマったポイント

大抵のサイトは「"webRoot": "${workspaceFolder}/src",」って書いてあって
その通りにやってみたが、いざ、Debug startした場合に
「Breakpoint set but not yet bound」って言われて
上手く止まってくれなかった。

色々調べて、以下のサイトにたどり着いた。

https://stackoverflow.com/questions/59456976/visual-studio-code-1-14-breakpoint-set-but-not-yet-bound

より一部抜粋
～～～～～
"webRoot": "${workspaceFolder}/<vue-app-folder>/src",

You need replace the <vue-app-folder> with your folder name.
～～～～～
で、<vue-app-folder>は、今回、「my-app」ってしたので
～～～～～
"webRoot": "${workspaceFolder}/my-app/src",
～～～～～
っとしている。

【４】デバッグ

１）ブレイクポイントを張る

* VS Code で任意の場所にブレイクポイントを張る

２）ローカルサーバを起動する

~~~~
npm run serve
~~~~
などで起動する

３）デバッグを開始する

* VS Code で f5 又は [Run]-[Start Debugging]を選択すると
　対象ブラウザ（今回は、「Chrome」）が勝手に立ち上がる
 => あとは、設定したブレイクポイントの場所に行くように
　　Webページを遷移してあげれば、ブレイクポイントに止まるはず。

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue CLI ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/22/192553