震惊,SourceMap居然失效了?

3,165 阅读2分钟

前言

最近,使用uni-app开发个微信小程序项目,打开调试器,突然看到一串黄色警告。

image.png

点击打印出来的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错误

image.png

重启微信开发工具,项目重启都无效。

image.png

最后翻了下微信小程序文档,觉得应该是开发工具的配置问题,试修改了几下,终于定位出了问题,就是需要开启微信开发者工具的增强编译功能。

解决方案

修改project.config.json下的setting配置,把enhance改成true

打开微信开发工具的增强编译功能:

{

 "setting": {
    "enhance": true  
 }
}

文档中对增强编译功能的说明:

image.png

uni-app打包会把es6转换成es5,所以我把增强编译功能关闭了,看来关闭会影响SourceMap文件的映射。

推荐阅读:

移动端真机调试指南-对调试说easy
Vue SEO的四种方案
TypeScript + Vite + Vue3 + Element Plus 项目初探
震惊,SourceMap居然失效了?
请将你的npm依赖版本锁定