摘要: 自动还原真实出错位置,快速修复BUG。
![5bc54c240cc3637e0dd80e0f6244929a.png](https://i-blog.csdnimg.cn/blog_migrate/be7eefafd1f4f23f5500f9388e56c741.jpeg)
Source Map功能
微信小程序的Source Map功能目前只在 iOS 6.7.2 及以上版本支持。
微信小程序在打包时,会将所有 js 代码打包成一个文件,从而减少体积,加快访问速度。
然而,压缩代码的错误是很难Debug的,因为错误位置是这样的:
- 文件:app-service.js
- 行号:13782
- 列号:7974
这时,错误的位置信息(文件,行号和列号)失去了价值,因为开发者很难知道它所对应的源代码位置。
Fundebug的微信小程序BUG监控支持通过Source Map还原出错位置:
- 文件:utils/util.js
- 行号:573
- 列号:8
这样的话,开发者能够迅速定位出错的源代码。
在Fundebug控制台,只需要点击Source Map按钮,就可以切换压缩前后的堆栈:
![690a74db80ab8bf4933b4deb16e298b2.gif](https://i-blog.csdnimg.cn/blog_migrate/80c957916e58569b3890f231df60ca97.gif)
如果希望使用Source Map功能,用户则需要:
- 从微信小程序管理后台下载Source Map文件
- 在Fundebug项目管理后台上传Source Map文件
下载Source Map文件
- 登陆微信公众平台
- 切换到左侧"开发"页面
- 点击链接"下载线上版本Source Map文件"
上传Source Map文件
将下载的Source Map文件解压缩,仅需上传解压缩的文件中的__APP__/app-service.map.map文件。
上传步骤
- 进入Fundebug『控制台』
- 选择『项目设置』
- 点击『Source Map』
- 选中需要上传的Source Map文件(支持上传多个Source Map文件)
- 点击『上传』
上传Source Map时可以配置应用版本:
![435df3d76613b96be191de0cb4ff3de5.png](https://i-blog.csdnimg.cn/blog_migrate/d7859988e1385152b3b1bb86e65c93c0.jpeg)
下图为已经上传的不同版本的Source Map文件:
![88fc31d4b7f59211d855ccd430d5806f.png](https://i-blog.csdnimg.cn/blog_migrate/9ff68ba86f974961d9c42c5c32202319.jpeg)
若希望区分不同版本微信小程序的Source Map文件,则需要在接入Fundebug插件时,配置对应的appversion属性,与上传Source Map时设置的版本保持一致:
fundebug.init({
appVersion: "3.2.5"
});
Fundebug微信小游戏BUG监控服务的Source Map功能也将尽快推出,敬请期待。
最后,感谢青团社的小伙伴的协助~
参考
- Fundebug文档: 微信小程序Source Map
- Source Map入门教程
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了20亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!
![759362a4c2d61d669a3fa917009b5f2d.png](https://i-blog.csdnimg.cn/blog_migrate/a1a9ca10d7f9e9914ccc418122df850e.jpeg)
版权声明
转载时请注明作者 Fundebug以及本文地址: https://blog.fundebug.com/2019/08/26/fundebug-wechat-miniprogram-support-sourcemap/