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
