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

三、 结言

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

相关推荐
Mikey_n几秒前
前台调用接口的方式及速率对比
前端
周之鸥6 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉12 分钟前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导24 分钟前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow30 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷36 分钟前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试37 分钟前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog40 分钟前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella252141 分钟前
10前端项目----商品详情页/滚轮行为
前端
阑梦清川1 小时前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库