微信小程序Source Map 的使用

1,096 阅读2分钟

小程序后台运行中的报错信息(Web分析-JS分析),代码都是压缩混淆的,需要在代码找到对应的位置,下面我们说明如何使用微信开发者工具 Source Map。

image.png

1.下载sourceMap文件

小程序后台 -》开发管理 -》运维中心 -》错误日志 可以下载线上最新版本的 Source Map 文件。

下载的 sourceMap 的目录和文件说明。

1. `APP` 是主包,`FULL` 是整包(仅在不支持分包的低版本微信中使用),其他目录是分包。
2. 每个分包下都有对应的 `app-service.js.map` 文件。
3. 如果是使用了按需注入特性(`app.json`中配置了`lazyCodeLoading`),那么每个分包下还会有 `appservice.app.js.map`(对应分包下非页面的js),和所有页面的 `xxx.js.map`。
查看错误信息,如果错误信息为https://components/......,则一般对应为主目录下components组件文件,并且后面标注的就是具体的行号:列号,如果错误信息结尾是......app-service.js,则一般为主包或者分包下的错误,找到发生错误对应的分包,选择分包的map文件。

打开下载的 sourceMap 中有个 wx 字段,标明了该 sourceMap 文件对应小程序版本号。 其中 userVersion 未上传是填的版本号, userNotes 为项目备注。

2.查找对应位置

第一种方法

(1)下载 sourceMap 匹配调试器 打开微信开发者工具,在菜单栏选择"设置 -》通用设置 -》扩展 -》调试器插件",进入插件下载页面,添加 sourcemap匹配调试插件。添加成功后,即可在调试器使用该插件。

未命名.png (2)打开 调试器 -》sourcemap,选择对应的 map 文件,第二个输入框填入对应的错误信息中的 行号:列号 ,点击匹配,可直接跳转到对应文件对应的行数。

image.png 第二种方法

(1)复制代码,直接在浏览器打开,选择对应的文件,输入行:列,点击确定查看代码信息