这是我参加帖子挑战的第7天，详情请见：帖子挑战

1 简介

这几个月忙于业务，不是在求审的路上，就是在求审的路上，就是在审稿的路上！！！！

这周时间比较充裕，又受不了小程序报警群每天的信息轰炸，就花了点时间修复了一些线上的错误。本文是实践过程的总结，目的是指导大家如何修复线上的错误信息，欢迎指正~

2. 如何接收微信提醒？

首先在微信公众平台后台->开发管理->监控报警->找到系统接口报警群->扫码加入群

那么当线上有错误信息出现的时候，报警组就会收到类似如下的信息：

现在我们回归正题，看看定位问题怎么用吧~

3. 调试

为了方便开发者利用文件定位代码问题，增加调试插件，优化匹配调试，保留目标代码在源代码中的位置信息！！！

在打包微信小程序的时候，所有的js代码都会被打包成一个文件，以减小体积，加快访问速度。

运行环境：下载并安装开发者工具1.03或以上版本。

4. 使用教程

A.打开微信开发者工具→设置→扩展设置→调试器插件→添加配套调试插件

下图是增加了调试器插件【如果微信开发者工具直接从旧版本升级到新版本，调试器上可能不会显示该选项，这里记得开启】。

B. 导入文件

文件下载路径有两种：

C. 确定错误信息的版本号

找到需要修复的错误信息，点击详情跳转到错误信息详情页，在列表中我们可以看见小程序的版本。

其实，我们也可以在错误内容过滤条件中直接指定某个版本并进行修复。

D.查看对应版本号

先不要管版本号，我们来看看里面是什么：其实就是一个json文件。

在下载的文件中找到app-.map.map文件，里面有记录小程序版本号的wx字段，如下图。

{ "version":3, "sourceroot":"", // 源文件所在的目录信息 "sources":[‘x.js’,'y',.....], // 源文件列表、这里表示由x文件和y文件和....文件合并生成 "names": [’variableA','variableB', ......], // 若开启了变量名混淆、这里会保留变量名在源文件中的名字信息 "mappings": "", // 这个是重点、是目标代码和源文件的位置的映射关系 "sourcesContent": [], // 可选项、保存源码信息、顺序与sources字段对应 -> 你可以理解为把sources文件内的代码原封不动地放入该数组中 "wx": { "version": 1, "userVersion”: "线上微信小程序的版本号", "userNotes”: "xxx", "packageVersion”: "包的版本号" } }

看完内容，头疼不已，这里就不细说了，如果想知道这些是怎么映射的，请点击这个链接：//d…

E.在微信开发者工具→调试器→tab中导入刚刚下载的文件，然后输入目标行号后点击匹配按钮就可以得到匹配的结果。

先在mp后台锁定自己想要修复的错误信息内容：

然后导入文件&&输入行号和列号并单击匹配。

此时，您可以继续进行下一步。

E.根据匹配结果，找到相应文件并修复。

例如上一步中的文件位置为：//.js，由于代码涉及到实际业务，这里就不再单独贴出来了。

简化的错误代码如下：

const res = res // 或者 const res = null、注意若res为''、其代码本身是不会报错的[留意代码的健壮性] let { code } = res console.log('报错', code)

经过排查发现，如果res为null，直接获取里面的值会出错，错误信息为：is not an！

5. 问题总结 5.1 如何获取行号和列号？

找到要修复的错误信息，在里面找app-.js这个东西，然后复制后面的行号和列号，就可以得到源码中该错误信息对应的页面路径行号和列号信息（注意它们之间是以:分隔的）。

查找 app-.js：

小贴士：如果从错误信息中看不到具体的行数和列数，该怎么办？

你可以选择暂时不处理，有时会出现多个相同的错误，有些会有行号和列号 → 过一会儿再观察即可。

5.2 app-.map.map应该从哪个目录获取？

将我们的小程序项目解压之后大概可以得到如下目录（分包加载，解压之后是一个文件夹，里面有多个文件）

如果能定位到某个具体文件，看看它是在主包还是子包中。如果是子包，一般都在其中，需要在对应的子包文件下找；如果在主包中，一般都在

实际可能会有差异，请根据实际情况寻找。

5.3 未找到符合条件的结果

如果我们用小程序老版本的错误信息去匹配最新版本的文件，是匹配不上的，会报出以下错误【错误其实是A版本的，但是But行上的文件是B版本的】：

6. 最后的想法

如有错误请留言，我们会及时修改！

如果觉得对你有帮助的话，就点个赞或者收藏吧！