配置:
launch.json
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://127.0.0.1:9528",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
官方说明文档:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
使用流程:
1、安装Debugger for Chrome插件
2、Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个
launch.json
的文件。如上图,项目运行地址配置为:http://127.0.0.1:95283、项目设置断点
4、在终端并使用 Vue CLI 开启这个应用:npm run serve。实际代码为:vue-cli-service serve
5、来到 Debug 视图,选择“vuejs:chrome/firefox”配置,然后按 F5 或点击那个绿色的 play 按钮
6、命中断点