Fundebug微信小程序BUG监控服务支持Source Map

逃离我推掉我的手 2024-04-17 06:03 101阅读 0赞

**摘要：** 自动还原真实出错位置，快速修复BUG。

![format_png][]

### 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按钮，就可以切换压缩前后的堆栈：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOC0wOC0yNC1mdW5kZWJ1Zy13ZWNoYXQtbWluaXByb2dyYW0tc291cmNlbWFwLmdpZg][]

如果希望使用Source Map功能，用户则需要：

*  从微信小程序管理后台[下载Source Map][Source Map]文件
 *  在Fundebug项目管理后台[上传Source Map][Source Map 1]文件

### 下载Source Map文件 ###

*  登陆[微信公众平台][Link 1]
 *  切换到左侧"开发"页面
 *  点击链接"下载线上版本Source Map文件"

### 上传Source Map文件 ###

将下载的Source Map文件解压缩，仅需上传解压缩的文件中的\*\*\_\_APP\_\_/app-service.map.map\*\*文件。

**上传步骤**

*  进入Fundebug『控制台』
 *  选择『项目设置』
 *  点击『Source Map』
 *  选中需要上传的Source Map文件(支持上传多个Source Map文件)
 *  点击『上传』

上传Source Map时可以配置应用版本:

![format_png 1][]

下图为已经上传的不同版本的Source Map文件:

![format_png 2][]

若希望区分不同版本微信小程序的Source Map文件，则需要在接入Fundebug插件时，配置对应的[appversion][]属性，与上传Source Map时设置的版本保持一致：

fundebug.init({ 
        appVersion: "3.2.5"
    });

Fundebug微信小游戏BUG监控服务的Source Map功能也将尽快推出，敬请期待。

最后，感谢青团社的小伙伴的协助~

### 参考 ###

*  [Fundebug文档： 微信小程序Source Map][Fundebug_ _Source Map]
 *  [Source Map入门教程][Source Map 2]

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了20亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家[免费试用][Link 2]！

[![img][]][img 1]

转载时请注明作者 **Fundebug**以及本文地址：  
[https://blog.fundebug.com/2019/08/26/fundebug-wechat-miniprogram-support-sourcemap/][https_blog.fundebug.com_2019_08_26_fundebug-wechat-miniprogram-support-sourcemap]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNDIyLXd4anNfdXBkYXRlLmpwZw?x-oss-process=image/format,png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOC0wOC0yNC1mdW5kZWJ1Zy13ZWNoYXQtbWluaXByb2dyYW0tc291cmNlbWFwLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOC0wOC0yNC1mdW5kZWJ1Zy13ZWNoYXQtbWluaXByb2dyYW0tc291cmNlbWFwLmdpZg
[Source Map]: https://docs.fundebug.com/notifier/wxjs/sourcemap/download.html
[Source Map 1]: https://docs.fundebug.com/notifier/wxjs/sourcemap/upload/
[Link 1]: https://mp.weixin.qq.com/
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0yNC11cGxvYWQtc291cmNlLW1hcC5wbmc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wOC0yNC1zb3VyY2UtbWFwLWZpbGVzLnBuZw?x-oss-process=image/format,png
[appversion]: https://docs.fundebug.com/notifier/wxjs/customize/appversion.html
[Fundebug_ _Source Map]: https://docs.fundebug.com/notifier/wxjs/sourcemap/
[Source Map 2]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[Fundebug]: https://www.fundebug.com/
[Link 2]: https://www.fundebug.com/team/create
[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zdGF0aWMuZnVuZGVidWcuY24vd2VjaGF0X3Nsb2dhbi5wbmc?x-oss-process=image/format,png
[img 1]: https://static.fundebug.cn/wechat_slogan.png
[https_blog.fundebug.com_2019_08_26_fundebug-wechat-miniprogram-support-sourcemap]: https://blog.fundebug.com/2019/08/26/fundebug-wechat-miniprogram-support-sourcemap/