【踩坑记】如何解决前端调试无法显示正确的soureceMap映射，并且无法在控制台断点调试的问题

Wonder233

已于 2022-07-01 19:38:41 修改

阅读量1.3k

点赞数 1

分类专栏：前端杂文文章标签： vue.js 前端 javascript sourceMap

于 2022-07-01 13:55:52 首次发布

本文链接：https://blog.csdn.net/wonder233/article/details/125557330

版权

在electron + vue + ts + webpack4项目中，由于browserlist依赖升级导致调试问题。通过对比不同环境的yarn.lock，发现@babel/core@7.17.5版本起存在错误。解决方案是将@babel/core及其子孙依赖锁定在@babel/core@7.17.4，以恢复正确的sourceMap映射和断点调试功能。

摘要由CSDN通过智能技术生成

blob:https://maxiang.io/04d5a8a7-1202-4c4e-95cd-4a418807fd25

项目技术栈

electron + vue + ts + webpack4

背景：

最近项目要打包上线时报错，排查时发现是因为 browserlist 深夜更新了一个版本4.21.0，browserlist内部有一个依赖项:electron-to-chromium
“electron-to-chromium”: “^1.4.147”,升级到了 “electron-to-chromium”: “^1.4.164”,
而electron-to-chromium也更新了版本，把我们的项目打包给给搞崩溃了。于是我们决定将项目依赖锁死，不想再出现突发依赖升级导致项目崩溃了。

然而，当大家把本地的 yarn.lock 及 node_modules 删除重新拉线上的 yarn.lock 并下载依赖后，之前部分可以在调试控制台断点调试的同学都出现了无法调试的问题。（本来就陆陆续续有同学说已经无法调试，只能在代码里打 console.log调试，这次锁死依赖后，全部的同学都无法调试了）

排查步骤

最开始在网上疯狂谷歌搜索，想看看是否有解决方案出来，结果网上给的结论是让改 devtools。按照网上说的改成各种各样的，什么 eval-source-map、inline-source-map 等等，都无效。于是我决定自行排查一下问题到底出在哪里。

首先，我想看看 vue-cli 官网自己生成的项目按照我们项目进行配置看是否有问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GL3kSnm7-1656654757453)(./1656646666584.png)]
用脚手架生成了一个 vue-ts 项目，运行后发现，依旧无法调试。断点出现在了一片空白处。不过可以看到 call stack 里堆栈信息是正确的函数，只是其对应的文件不正确。