前提
1.确保发生错误的小程序版本和下载回来的 sourcemap 版本是一致的。
a. 下载 sourceMap 文件,可在 mp 后台或开发者工具上传成功弹窗下载
2.确保 map 文件和发生错误的 js 文件是对应的。sourcemap 的目录和文件说明
a. APP 是主包,FULL 是整包(仅在不支持分包的低版本微信中使用),其他目录是分包
b. 每个分包下都有对应的 app-service.js.map 文件。
c. 如果是使用了按需注入特性(app.json中配置了lazyCodeLoading),那么每个分包下还会有 appservice.app.js.map(对应分包下非页面的js),和所有页面的 xxx.js.map
以上事情都确保正确之后,还是出现行列号匹配不出来的情况。那就需要进一步排查。
线上运行的小程序 sourcemap 文件是怎么生成的?
处理流程:源码 [ a.js a.js.map b.js b.js.map ] -> 开发者工具(JS转 ES5,压缩)-> 微信后台(合并 js 文件)[ appservice.app.js appservice.app.js.map]。
注意:如果源码在交给工具之前是经过了 webpack 等打包工具的处理,那源码这里需要有 map 文件。否则不需要存在 map 文件。
可以看出,map 文件经过三个步骤的处理,每个步骤都有可能导致出错,因此开发者需要先排查,是否是前两个步骤出错导致的 map 文件失效的。
如何排查前两个步骤产生的 map 文件是否有问题。
1.排查 a.js.map 文件是否有问题。
a. 可以在 a.js 的代码中写一下 throw new Error(‘test sourcemap’)。
b. 使用了 webpack 的情况下,要构建为生产环境的版本。
c. 在开发者工具模拟器中运行对应的页面,看看控制台中的报错,错误行列号是否能正常映射到源文件。
2.排查 开发者工具(JS转 ES5,压缩)步骤是否有问题。
在排查完第一步的基础上,点击预览,用微信上扫码预览,并打开调试 vConsole 功能,检查 vConsole 中是否有报错信息,检查报错信息中的行列号是否能正常映射到源文件。
如何排查 微信后台(合并 js 文件)是否有问题。
a. 一定要先排查完前两个步骤再来排查这一步,一般情况下,这一步是不会出错的。
b. 如果有问题,也只会导致 map 文件中的行号信息出现偏移。比如 Error 信息中显示报错地址是 100: 200,行号是 100。那么你可能直接用 100: 200 在 map 文件中搜索不出信息,但是如果 用 150: 200 就可以搜索出来,说明行号偏移了 50。那其他报错也可以偏移 50 后再进行搜索就找到结果。
c. 怎么排查偏移了多少?可以结合 error.message 的内容,初步判断大概错误的内容是什么。把对应的 map 文件放到这个网站上 source-map-visualization 进行搜索,找出哪些相同列号的地方。再结合 error.message 的内容进行判断。
d. 如果排查到是这一步导致的问题,请在社区上联系我们,我们会在后续版本进行修复。
依旧排查不出原因?
先整理一下按照上述步骤排查的结论,再在社区上联系我们协助
你好, sourceMap排查是67行,但是结合报错来看应该是59行的情况有出现过。也不是所有的都有问题,就目前这个项目而言偏移的情况还蛮多的。 需要提供什么吗?
同样的map文件和同样版本号,我的小伙伴能匹配到源码,而我的却不能,这什么情况
1、webpack打包后,用开发者工具上传,下载的sourcemap文件
app-service.js 可以提供下载吗,目前只能下载 app-service.js .map。不然我怎么使用 source-map-visualization 进行查看呢
咱们这个sourceMap查找功能,能出一个可调用的命令行工具,或者基于nodejs的npm包就更好了。
现在这种打开IDE手动一个个输入,太麻烦了
sourcemap一堆分号,we分析报错全是WASubContext
我上传第三方平台指定的小程序,但是为啥拉不到我上传的草稿箱sourcemap。执行ci下载的是这个小程序的线上版本。