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里面的源码了。

三、 结言

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

相关推荐
颜酱18 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金6112719 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo19 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁19 小时前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青19 小时前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序
hmfy19 小时前
那些前端老鸟才知道的秘密
前端
野葳蕤19 小时前
react总览
前端
不一样的少年_19 小时前
她说想要浪漫,我把浏览器鼠标换成了柴犬,点一下就有烟花(附源码)
前端·javascript·浏览器
顾青19 小时前
微信小程序实现身份证识别与裁剪(基于 VisionKit)
前端·微信小程序
星链引擎19 小时前
技术深度聚焦版(侧重技术原理与代码细节)
前端