【VSCode】Vue.jsのデバッグを行う方法

2019年6月3日2019年6月4日

Vue.jsはブラウザ上でもデバッグすることが可能ですが、開発者コンソール上のsourceでは同じファイル名でいくつもファイル名が存在するので少し分かりづらく面倒臭く感じてしまいます…。

ですので、VSCode上のコードのブレークポイントをを貼ってデバッグする方法を紹介します。

※Vue CLI3系での手順を記載します。2系は記載しませんのでページ下部の更新URLにてご確認ください。

開発者コンソール上ではファイルが分かりづらいことも…

冒頭で申し上げた通りですが、Chrome等の開発者コンソール上でデバッグを行うときにいくつもファイルが表示されてしまうことがあります。以下の画像は私が開発中のコードを開発者コンソール上で表示しているものです。

末尾のパラメータ以外は同じファイル名のファイルがいくつもあります。末尾にパラメータが付いていないものがオリジナルファイルかと思いきや、そういうわけでもないです…。

私は良く混乱させられてしまいます。

VSCode上でデバッグをできるようにする

ここからは実際にデバッグをできるように設定する手順を記載していきます。

※私は基本的にChromeを使用しているので、Chromeで方法を記載します。

VSCodeのプラグインを導入する

まずは、以下のプラグインを導入します。

[Deprecated] Debugger for Chrome - Visual Studio Marketplace

Extension for Visual Studio Code - Debug your JavaScript cod ...

https://marketplace.visualstudio.com/items?itemName=msjsdiag...

※Firefox用のプラグインもあるので、Firefoxでのデバッグを行いたい場合はFirefox用のプラグインを入れましょう。

vue.config.jsに設定を追加

デバッグの際にソースマップが必要となるとのことで以下の設定をvue.config.jsに追加します。

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

デバッグ定義を追加

VSCodeのデバッグ画面を開き、歯車ボタンを押下します。

すると以下のようなデバッグ環境の選択が出てくるので、Chromeを選択します。

すると、launch.jsonというファイルが作成されるので、内容を以下のように書き換えます。

※urlの値はアプリ毎に異なると思うので、自身のものに置き換えてください。

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

設定はこれで完了です。