vuejsのVS Code によるデバッグ

Vus.jsでWebアプリケーション開発を始めるにあたりデバッグ方法を調べました。　 Vue > Visual Studio Code デバッグ - Qiitaに沿って進めるとうまくいきました。

ポイントは、2点。 vue.config.jsを作成する。

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

launch.jsを修正

      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"

$ vue create hello-world

はリンクの通りにBPで止めることができました。 私が開発しているWebアプリケーションはtypescriptを使っているせいか、debugger文を追加しないと止めることができませんでした。

不具合修正できてめでたしめでたし。

リンク

• Vue > Visual Studio Code デバッグ - Qiita
• VS Code によるデバッグ — Vue.js