//第一步:在扩展商店搜索debugger for chrome 进行安装
//第二步:在launch.json 文件进行配置
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8081",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
注:url的端口号是npm run serve 的端口号
//第三步:vue-cli3创建的项目
//在vue.config.js 配置
//函数写法
configureWebpack: (config) => {
config.devtool = 'source-map'
}
//对象写法
configureWebpack:{
devtool: 'source-map'
}
// 如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool property:
devtool: 'source-map',
第四步:启动项目 npm run serve
第五步:开始调试 快捷键 F5
在vscode打断点,运行程序就会进入到断点;
.vue文件上打断点!!!
vuejs vscode调试文档地址:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html