VisualStudioCode vue.js debug


優先パラメータ


1.赤い矢印1番RunnadDebugをクリック


2. create a lunch.json fileをクリックしてjsonファイルを作成し、次のjsonコードを入力します。


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

3.sourceフォルダのルート(srcフォルダと同じ場所)にvueを設定します。config.次のコードをjsファイルに追加

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

4.npm run serveローカルサーバを実行した後、下のrunanddebug画面の▶ボタンをクリックすると、ローカルサーバ8080ポートのWebブラウザが実行され、ブレークポイント矢印部分チェックボックスが選択されているsourceのみがブレークポイントで停止し、値watchで値を表示します