VS Code断点调试
1.安装Chrome Debug插件
2.创建Debug配置文件
修改配置文件,内容如下
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*", } }, "webRoot": "${workspaceFolder}" ] }
url中的端口是前端实际的访问端口
3.修改vue.config.js配置
如果你使用的是 Vue CLI 2,请设置并更新
config/index.js
内的devtool
property:
devtool: 'source-map',
如果你使用的是 Vue CLI 3,请设置并更新
vue.config.js
内的devtool
property:
module.exports = { configureWebpack: { devtool: 'source-map', }, }
到这步应该会有问题了,配置不对,触发断点无变化,断点一直呈现灰色
原因就是源码配置问题,大部分项目中已经有了
configureWebpack
的配置,所以不知道如何添加正确的姿势如下
configureWebpack: config => { //生产环境取消 console.log if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } }, //新添加配置 configureWebpack: { devtool: 'source-map', },
4.开启调试
以调试方式启动项目
启动调试插件,开始调试
设置断点,启动插件后触发断点就可以在VS Code中看到已经命中断点了
参考链接
本文作者:你滴风
本文链接:https://www.cnblogs.com/decent/p/15974649.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步