Quasar × VSCodeでのデバッグ(ブレークポイント張ったりなど)

1 概要

Quasar FrameworkをVSCodeでデバッグするときの手順
公式サイト

サクッと3ポイント

①Debugger for Chromeをインストールしましょう
.vscode\launch.jsonを作成してこれをコピペ！

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Quasar App: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
          }
        }
    ]
}

②quasar.conf.jsにsource-mapの設定を追加

quasar.conf.js

    build: {
      //他の設定とか
      devtool: 'source-map',   //←追加
      extendWebpack(cfg) {
      }

③quasar devコマンドを実行後、VSCode側からデバック実行をスタート！

終わり

後はブレークポイント張るなり、お好きにどうぞ
quasar devで立ち上げた環境にVSCode側からアタッチするような感じの動きになっているようです