Visual Studio CodeでVue.jsのデバッグを行う方法

Visual Studio CodeでVue.jsのデバッグを行う方法をご紹介します。

1 環境
2 事前準備
3 各種ファイルの追加／追記など
4 ブレークポイントの設定
5 デバッグの開始
6 参考
- 6.1 Vue.js：VS Code によるデバッグ

環境

node.js v14.17.0
npm 6.14.13
@vue/cli 4.5.13
Windows 10
Chrome

事前準備

拡張機能

Visual Studio Codeの拡張機能で、「Debugger for Chrome」をインストールします。

プロジェクトの作成

ターミナルでコマンドを実行し、適当なプロジェクトを作成します。

> vue create test_vue

プリセットの指定

とりあえず動けばよいので、Default (Vue 3)を選択します。

Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

作成後のプロジェクト構成

作成直後は以下のような構成となっています。

各種ファイルの追加／追記など

HelloWorld.vueに追記

HelloWorld.vueのscriptタグ内に、コンソール出力を追記します。

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  created() {
    console.log("debug!!!!!!!!!!!")
  }
}
</script>

vue.config.jsの追加

作成したプロジェクトに「vue.config.js」を以下の内容で追加します。

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

プロジェクトの構成は以下のようになります。

ディレクトリの移動

ターミナルで、作成したプロジェクトのディレクトリに移動します。

> cd test_vue

サーバーの起動

test_vue> npm run serve

サーバーが起動して、ターミナルに以下のような表示が出ていることを確認します。

launch.jsonの作成

実行とデバッグのボタンを押して、「launch.json ファイルを作成します。」という文字列を選択します。

環境の選択というリストが表示されるので、「Chrome」を選択します。

作成された「launch.json」を以下のように編集します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "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}/*"
            }
        }
    ]
}