You need to enable JavaScript to run this app.
导航

SourceMap上传与反解

最近更新时间2023.03.16 14:27:20

首次发布时间2022.09.01 16:20:38

SourceMap是一个信息文件,它里面存储着代码转换前后的对应位置信息。APM控制台提供了SourceMap上传与反解的能力,帮助您解析JS详情中的错误堆栈。

步骤一:获取SourceMap

各个平台的小程序在上传时或上线后均可在指定后台获取SourceMap文件。下面以微信小程序为例进行详细介绍。

  1. 登录微信小程序开发者后台
  2. 在左侧导航栏,选择开发 > 开发管理
  3. 错误内容区域,单击下载线上版本SourceMap文件
    图片

步骤二:上传SourceMap

控制台提供了从JS错误详情页面和从管理SourceMap页面两个入口上传SourceMap。

JS错误详情

  1. 登录应用性能监控全链路版控制台
  2. 单击目标应用下的小程序pro监控
  3. 在控制台左上角选择全部功能 > JS总览
  4. 在错误及页面总览中,单击目标错误内容,进入错误详情页面。
  5. 在错误堆栈区域,单击minified
  6. 在目标JS文件后,单击上传按钮。
    图片
  7. 上传sourcemap页面,上传与当前JS文件名对应的SourceMap文件,选择小程序类型、env和release版本,然后单击确定,平台会解析出当前代码的上下文。
    图片

管理sourcemap

  1. 登录应用性能监控全链路版控制台
  2. 单击目标应用下的小程序pro监控
  3. 在控制台左上角选择全部功能 > 管理sourcemap
  4. 单击上传Sourcemap
    图片
  5. 上传sourcemap页面,输入js sourcemap文件名、上传SourceMap文件、选择小程序类型、env和release版本,然后单击确定
    图片
  6. 在控制台左上角选择全部功能 > JS总览
  7. 在错误及页面总览中,单击目标错误内容,进入错误详情页面。
  8. 在错误堆栈区域查看反解的内容。

步骤三:验证SourceMap

您可以通过微信官方文档来验证您下载的SourceMap。如果SourceMap可用,开发者工具将会出现类似以下内容:
图片

注意事项

  • 用原生小程序开发时,源文件是没有SourceMap的,这时用小程序开发者工具上传后生成的SourceMap的大小只有几K~几十K,因为只包含了代码行列反解的功能,并没有携带上下文。
  • 当您使用Taro、Uni App三方框架并且开启SourceMap时,打包出来的产物本身自带了SourceMap,在小程序开发工具上传时也会包含源码的上下文,这个SourceMap会比较大可能几百K~几M,反解后就可以看到当前错误的具体上下文。