Vue.jsをVSCodeでデバッグする

投稿日: by keruu

Vue3のプロジェクトをVSCodeからデバッグ する手順です。

環境

  • Vue 3.0.6
  • Vue CLI 4.5.11
  • VS Code
  • Chrome
  • macOS

手順

VS Codeに Debugger for Chrome (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) をインストールします。

Vue CLIでVueプロジェクトを作成します。ここではVue3で作成しました。

$ vue create app1

作成したプロジェクトをVS Codeで開きます。

$ cd app1
$ code .

vue.config.jsをプロジェクトのルートディレクトリに作成し、次のように記述します。ソースマップを作成するように記述しました。

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
  },
}

サイドバーのデバッグアイコンから “create a launch.json file” をクリックし、続く環境の選択では”chrome”を選びます。

.vscode/launch.json が作成されるので、次のように編集します。”url” と”webRoot”、”sourceMapPathOverrides”は環境に合わせて適宜調整します。

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

※ 公式 (https://v3.vuejs.org/cookbook/debugging-in-vscode.html)に紹介されている設定ですと、自分の環境ではブレークポイントが機能しなかったため、”webRoot”、”sourceMapPathOverrides”を調整し、上記のようにしています。

VS Code上でブレークポイントをセットします。例として main.js の createApp を呼ぶ箇所にセットします。

●←赤丸をセット  createApp(App).use(router).mount('#app')

ローカルサーバーを起動します。

$ npm run serve

サイドバーのデバッグアイコンをクリックし、三角ボタンからデバッガを開始します。もしくはF5キーでも開始できます。

セットしたブレークポイントで止まれば成功です。

止まらない場合は、手動で debugger をコード上に記述した上でデバッグを実行し、debugger で止まるか確認します。

debugger ←追加
createApp(App).use(router).mount('#app')

止まるなら .vscode/launch.json の “webRoot” もしくは “sourceMapPathOverrides” のパスの設定が合っていない可能性があります。

以上です。

VSCode Vue.js