vue中debugger无法调试

本文指导如何在Vue项目中配置webpack,以便在浏览器中通过VSCode调试源代码,重点在于更新devtool属性为source-map,无论使用VueCLI2还是VueCLI3。
摘要由CSDN通过智能技术生成

在浏览器中展示源代码
在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool property。将其更新为:

如果你使用的是 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’
}
}

### 如何在 Vue 项目集成 Debugger 进行调试 为了在 Vue 项目有效集成并使用调试工具,可以按照如下方法操作: #### 配置开发环境支持源映射(Source Map) 确保 `vue.config.js` 文件配置了正确的开发工具选项以便于调试。通过设置 source map 可以让开发者更容易定位到原始代码的错误位置。 ```javascript module.exports = { configureWebpack: { devtool: 'source-map' } } ``` 当处于开发模式下时,上述配置会启用详细的 source maps 功能[^1]。 #### 安装必要的依赖包 对于基于 Chrome 浏览器的前端应用来说,通常不需要额外安装特定的 JavaScript 调试库;因为现代浏览器自带强大的开发者工具集成了断点、变量监视等功能。不过如果想要更深入地分析性能瓶颈等问题,则可能需要用到专门的 profiling 工具或第三方插件。 #### 使用 VSCode 和 Chrome DevTools 协同工作 VSCode 是一个非常流行的编辑器,并且提供了多种扩展来增强其功能。结合 Chrome 的 Developer Tools ,可以在本地环境高效地进行单步执行、查看调用栈等操作。具体做法是在 VSCode 打开待调试的应用程序目录,在启动项 (launch.json) 添加相应的配置条目指向要运行的服务端口以及是否自动附加至页面加载过程等等。 另外还可以利用 Git 上开源的一些辅助脚手架如 spy-debugger 来简化部分流程[^2]。 #### 实际调试技巧分享 - 设置好 breakpoint 后刷新网页触发暂停; - 利用 console.log() 输出间状态信息作为临时手段; - 掌握 watch expression 特性观察复杂对象变化情况; - 学习理解异步任务处理机制下的 promise chain 或 async-await 关键字行为特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值