vue代码中使用debugger不生效或无法跳转源码终极解决方案

一、 debugger不生效问题

代码中使用debugger,浏览器控制台也打开了,但无法进入调试模式。

解决这个问题,需要检查下,配置文件中是否将devtool设置为source-map

1.如果你直接使用的是webpack,请检查webpack.config.dev.js(名字可能不一样),但对应的一定是开发环境的配置。

javascript 复制代码
devtool: "source-map"

2.如果使用的是VUE CLI,请检查vue.config.js

javascript 复制代码
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

二、debugger生效,但进入的不是源码

代码中使用debugger,打开控制台浏览器可以进入断点,但进入的不是源码,而是打包后的代码。

定位到浏览器Sources(源码)栏位:

说明: 你的Sources有可能和我的不一样,如果你装了插件,会有一些插件的代码,为了方便演示,我把插件卸载掉了。这里我们只需关注两个目录:localhost:8888(运行代码目录,即打包后的目录)和webpack(源码目录)。

这里我们会发现,debugger虽然进去了,但进入的是打包后的代码,而并非我们实际编写的源码。

要解决这个问题,要修改浏览器配置(chrome为例,其他类似):

步骤:打开控制台--->点击左上角设置⚙️---> Preference(首选项)---> Sources(源码)---> JavaScript source maps(JavaScript源码映射)

一定要勾选上JavaScript source maps,浏览器才能定位到源码位置。

勾选上之后,刷新浏览器,再次进入断点位置,就可以定位到webpack里面的源码了。

三、 结言

如果通过上面的配置,还没能解决您的问题,可以留言,让我们一起解决。

相关推荐
mCell12 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip12 小时前
Node.js 子进程:child_process
前端·javascript
excel15 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼17 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping17 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
颜如玉17 小时前
HikariCP:Dead code elimination优化
后端·性能优化·源码
石金龙18 小时前
[译] Composition in CSS
前端·css
白水清风18 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix18 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts