鏈接
首先安裝 vs-code 插件

接下來配置vs-code
我使用的vue-cli3構建的項目因此設置并更新 vue.config.js 內的 devtool property：

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

再之后
點擊在 Activity Bar 里的 Debugger 圖標來到 Debug 視圖，然后點擊那個齒輪圖標來配置一個 launch.json 的文件，選擇 Chrome/Firefox：Launch 環境。然后將生成的 launch.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}/*"
        }
      },
      {
        "type": "firefox",
        "request": "launch",
        "name": "vuejs: firefox",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
      }
    ]
  }

最后在需要調試的地方加 上debugger 就可以了