环境为
vue-cli3、webpack、vscode
首先需要在VSCode中安装 Debugger for Chrome 插件
下载Chrome debugger
然后在debug配置中添加如下配置
配置调试器
配置代码
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080", //改成自己的端口就行
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
webpack的配置
-
使用
vue-cli3的话，在vue.config.js中configureWebpack项中添加以下两个配置configureWebpack: { devtool: 'source-map',// 保证源码正确加载 }, -
使用其他的方式构建项目，在conf/index.js中修改
将devtool: 'cheap-module-eval-source-map'修改为devtool: 'source-map'
网友评论