在 VS Code 中调试vue项目

1.VS Code 中安装Debugger for Chrome扩展的最新版本：

image.png

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

devtool: 'source-map'

3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：

image.png

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:9847/template/list/1",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      // "file": "${workspaceFolder}/index.html"
    }
  ]
}

4.在vue项目的文件中设置断点
5.启动vue项目：

npm start

6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。

image.png

7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉vscode的断点处。

遇到的问题：
官网中的launch.json配置中"url": "http://localhost:8080"，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：
在 VS Code 中调试：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html