前言
最近,使用uni-app开发个微信小程序项目,打开调试器,突然看到一串黄色警告。
点击打印出来的console.log
的跳转的到已编译的源码,没有跳转到映射的对应源码里。
SourceMap
映射文件失效了。
什么是SourceMap
在处理问题之前,有必要了解下什么是SourceMap,它是用来干什么的。SourceMap文件是js文件压缩后,文件的变量名替换对应、变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map,压缩后通过变量替换规则可能会被替换成a,这时SourceMap文件会记录下这个mapping的信息,这样的好处就是说,在调试的时候,如果有一些JS报错,那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试,这样会给我们带来很大的方便!
排查错误开始
这是什么原因呢?直接百度 DevTools failed to parse SourceMap
,搜到的文章都是如何关闭这个黄色警告的教程,这肯定不行,没有解决问题的根源。
查看打包后的文件,确实存在对应的map文件。
直接点击连接http://127.0.0.1:41311/.sourcemap/mp-weixin/common/main.js.map
的.map链接,提示我403错误
重启微信开发工具,项目重启都无效。
最后翻了下微信小程序文档,觉得应该是开发工具的配置问题,试修改了几下,终于定位出了问题,就是需要开启微信开发者工具的增强编译功能。
解决方案
修改project.config.json
下的setting
配置,把enhance
改成true
。
打开微信开发工具的增强编译功能:
{
"setting": {
"enhance": true
}
}
文档中对增强编译功能的说明:
uni-app
打包会把es6转换成es5,所以我把增强编译功能关闭了,看来关闭会影响SourceMap
文件的映射。
推荐阅读:
移动端真机调试指南-对调试说easy
Vue SEO的四种方案
TypeScript + Vite + Vue3 + Element Plus 项目初探
震惊,SourceMap居然失效了?
请将你的npm依赖版本锁定