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

三、 结言

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

相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron