相关文章推荐
欢乐的佛珠  ·  视频号助手功能介绍| 微信开放社区·  2 月前    · 
重情义的刺猬  ·  Springboot应用中设置Cookie的 ...·  11 月前    · 
没读研的便当  ·  python,predict参数_mob64 ...·  1 年前    · 
宽容的黑框眼镜  ·  CompletableFuture ...·  1 年前    · 
茫然的风衣  ·  跨平台编译工具CMake之语法详解与演练-c ...·  1 年前    · 
风流倜傥的匕首  ·  typeerror object of ...·  1 年前    · 
小百科  ›  大程序 sourcemap 文件归零原因排查 | 微信试办社区
微信小程序 社区功能
不开心的小蝌蚪
1 年前

交流专区
服务市场
微信学堂
文档
小程序
  • 常用主页

    小程序

    小游戏

    企业微信

    微信支付

  • 服务市场
    微信学堂
    文档
登录
评论

置顶 小程序 sourcemap 文件失效原因排查 精选 热门

John von Neumann 02-10
2391 浏览
1 评论

小程序 sourcemap 文件失效原因排查

前提

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. 如果排查到是这一步导致的问题,请在社区上联系我们,我们会在后续版本进行修复。

依旧排查不出原因?

先整理一下按照上述步骤排查的结论,再在社区上联系我们协助

最后一次编辑于 02-10
点赞 1
收藏
分享

扫描小程序码分享

复制链接

删除文章后,文章内容和评论将一并被删除,且不可恢复。

删除 取消
评论
关闭

请选择投诉理由

  • 广告内容
  • 违法违规
  • 恶意灌水内容
  • 其他

1 个评论

  • 覆盆子
    覆盆子
    03-16
 
推荐文章
欢乐的佛珠  ·  视频号助手功能介绍| 微信开放社区
2 月前
重情义的刺猬  ·  Springboot应用中设置Cookie的SameSite属性 - KevinBlandy - 博客园
11 月前
没读研的便当  ·  python,predict参数_mob649e81593bda的技术博客_51CTO博客
1 年前
宽容的黑框眼镜  ·  CompletableFuture future.get 遇到 java.util.concurrent.TimeoutException_future多线程调用方法报空指针_master-dragon的博客-CSDN博客
1 年前
茫然的风衣  ·  跨平台编译工具CMake之语法详解与演练-cmake 跨平台编译
1 年前
风流倜傥的匕首  ·  typeerror object of type queryset is not json serializable django-掘金
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
小百科 - 百科知识指南
© 2024 ~ 沪ICP备11025650号