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

三、 结言

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

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互