评论

微信开发者工具下载的 sourcemaps 怎么用。

微信开发者工具下载的 source map 文件怎么用

什么是 Sourcemaps

uglifyjs、bable 等工具会对 源代码 进行编译处理生成编译后的代码(下称目标代码),而 sourcemaps 就是保留了目标代码在源代码中的 位置信息

--------- 大神分割线 ---------

如何解读 Sourcemaps

Sourcemaps 是一个 json

{
  "version": 3,  
  "sources": ["a.js", "b.js"], // 源文件列表,这个表示是由 a.js 和 b.js 合并生成
  "names": ["myFn", "test"], // 如果开启了变量名混淆,这里会保留变量名在源文件中名字信息
  "sourcesContent: [], // 可选项,保存源码信息,顺序与 sources 字段对应,chrome 的 sources 面板中源码使用了这个字段的内容进行展示
  "sourceRoot": "", // 源文件所在的目录信息
  "file": "dist.js", // 可选,编译后的文件名
  "mappings": "" // 这个是重点,是目标代码和源文件的位置的映射关系
}

mappings

目标文件"行"的信息

mappings 是使用 ; 分隔的,每个部分对应目标代码的行

如: “;AAAA;AAAA,BBBB;;”

本例子目标文件有 4 行
第 0 行和第 3 行没有源文件对应信息,所以这两行是编译过程中加入的代码

目标文件的"列"信息

如: “AAAA,CAEA,CAEA;”

‘,’ 表示行内的位置信息分隔符
本例表示目标文件的这一行有三个有效的位置信息。

位置信息的第一位表示目标文件的列的 偏移 信息
本例中,表示列的信息是 ‘A’、‘C’、‘C’,对应的数字为 0、+1、+1,(vlq 编码在线编解码工具
注意,这个是偏移信息;
列数从 0 开始,依次累加偏移值可以算出当前的位置信息对应的真正的列
所以本例中表示的是目标文件的第 n 行中的第 0 列,第 1 列,第 2 列(没错是第 2 列)

源文件的信息

如:‘AAAA;ACAA;ADAA;’

位置信息的第二位表示源文件的信息,本例子中是 ‘A’、‘C’、‘D’,对应数字是 0、+1、-1
如果 sourcemaps 中的 sources 字段只有一个文件的话,那么位置信息中第二位一直是 A(不需要偏移)
假设 sourcemaps 中 sources: [‘a.js’, ‘b.js’] 本例的意思是

AAAA: 目标文件第 0 行第 0 列 对应 第 0 个文件 a.js
ACAA; 目标文件第 1 行第 0 列 对应 第 1 个文件 b.js
ADAA; 目标文件第 2 行第 0 列 对了 第 0 个文件 a.js (偏移是 -1 又回到了 a.js)

源文件的行信息

位置信息的第三位表示源文件中的行的信息, 理解了位置偏移的概念,我们很容易理解

如:‘AACA,CACA;AACA;‘
那么
AACA: 目标文件的第 0 行第 0 列 对应 第 0 个文件的第 1 行
CACA: 目标文件的第 0 行第 0+1 列 对应 第 0 个文件的第 1+1 行
AACA:目标文件的第 1 行第 0 列 对应 第 0 个文件的第 1 行 (注意:’;’ 后的行列偏移信息归 0)

源文件中的列信息

位置信息的第四位表示源文件中的列的信息

如:'AAAA,CAAC;'
那么
AAAA: 目标文件的第 0 行第 0 列 对应 第 0 个文件的第 0 行第 0 列
CAAC: 目标文件的第 0 行第 0+1 列 对应 第 0 个文件的第 0 行第 0+1 列

位置信息的第五位

第五位表示变量的偏移,对应 sourcemaps 中的 names 字段,表示目标文件中的变量名对应域源文件中的变量
如:’AAAA,CAACC;AAAAD;'
sourcemaps 中 names 字段是 [‘a’, ‘b’]
那么
AAAA: 目标文件的第 0 行第 0 列 对应 第 0 个文件的第 0 行第 0 列,没有变量的信息
CAACC: 目标文件的第 0 行第 0+1 列 对应 第 0 个文件的第 0 行第 0+1 列,有变量信息,变量在源文件中是 ‘b’ (0+1=1)
AAAAD: 目标文件的第 1 行第 0 列 对应 第 0 个文件的第 0 行第 0 列,有变量信息,变量在源文件中是 ‘a’ (1-1=0)

--------- 大神分割线 ---------

怎么使用 Sourcemaps

Q: 线上小程序报错,我怎么通过 sourcemaps 还原到源代码中?
A: 如报错 appservice.js 1:15000, 表示目标文件第一行 第 15000 列位置报错。根据上文介绍的,通过 mappings 字段算。

Q: 不会。
A: 如果你会写代码的话,参考下边

import fs = require('fs')
import {SourceMapConsumer} from 'source-map'


async function originalPositionFor(line, column) {
  const sourceMapFilePath = '如果你不真的替换的成 sourcemaps 在硬盘中的位置,那你还是放弃自己写代码吧。 '
  const sourceMapConsumer = await new SourceMapConsumer(JSON.parse(fs.readFileSync(sourceMapFilePath, 'utf8')))

  return  sourceMapConsumer.originalPositionFor({
      line,
      column,
   })
}

originalPositionFor(出错的行,出错的列)

Q: 不会写代码
A: 下载最新版的开发者工具,菜单-设置-拓展设置-调试器插件

Q: 为啥都是 null?
A: 每个小程序版本都应该对应一个sourcemap文件。 运营中心那里下载的 sourcemap 是对应线上最新的小程序版本。但运营中心的报错集合了多个小程序版本。拿旧小程序版本的报错信息,和最新版本的 sourcemap,是匹配不出的。开发者工具和ci 上传的时候,会提示下载对应版本的 sourcemap 信息,可以自助保存。

Q: 怎么确定有没有版本对应上
A: 下载的 sourcemap 中有个 wx 字段,标明了该 sourcemap 文件对应小程序版本号。

最后一次编辑于  05-19  
点赞 16
收藏
评论

44 个评论

  • 飞
    03-06

    这个玩意我就一直没定位到过错误,真不知道咋用

    03-06
    赞同 10
    回复 5
    • 👔🇨🇳
      👔🇨🇳
      06-24
      6月24号来打卡,  点匹配永远都是请确认报错行是否匹配 , 版本都一致..
      06-24
      1
      回复
    • 邱枫
      邱枫
      06-24
      和楼上的一样的结果,
      06-24
      回复
    • odriver
      odriver
      08-18
      应该把这个模块的人开除
      08-18
      1
      回复
    • odriver
      odriver
      08-18
      换个靠谱的人来设计调试模块,这个模块对于程序的质量是十分关键的
      08-18
      1
      回复
    • 王明
      王明
      09-13
      问题解决了么,这东西到底怎么玩
      09-13
      回复
  • 哇咔咔
    哇咔咔
    2020-07-01

    看来只能转行了,大家有什么好的行业推荐吗?

    2020-07-01
    赞同 8
    回复 3
    • Thomas Anderson
      Thomas Anderson
      2020-09-08
      我家门口有家卖猪油饼的,生意很火爆,准备去拜师学艺了。
      2020-09-08
      回复
    • 哇咔咔
      哇咔咔
      2020-09-08回复Thomas Anderson
      猪油饼真新鲜,难怪生意火爆啊,我去卖卫生纸可能也不错哦
      2020-09-08
      回复
    • SUNSHINE
      SUNSHINE
      2020-10-10回复哇咔咔
      炒河粉也不错
      2020-10-10
      回复
  • Ezio™风间🇨🇳
    Ezio™风间🇨🇳
    2020-12-30

    写出一个让人解出全是null的玩意,最后还嘲讽要人转行。特么,该转行的是你们!!!!!!!!!

    2020-12-30
    赞同 4
    回复 9
    • 工号 019743
      工号 019743
      2020-12-30
      首先,你要确认你的 sourcemap 是不是对应上了。出现null的情况基本就是没对应上的原因
      2020-12-30
      回复
    • 郝悦
      郝悦
      01-06回复工号 019743
      在这个地方下载的sourcemap文件会出现对应不上的问题吗?下载下来解析全是null,请给一个转行的理由好吧
      01-06
      回复
    • 郝悦
      郝悦
      01-06回复工号 019743
      我更新了开发者工具,这个版本应该是最新的吧,调试器插件没有你说的那个sroucemap工具,给个解释吧
      01-06
      回复
    • 布丁
      布丁
      01-25回复工号 019743
      开发者工具里面的sourcemap选择文件点击没反应,这什么鬼?
      01-25
      回复
    • 飞
      03-06回复工号 019743
      这个怎么样确定有木有对应上?
      03-06
      回复
    查看更多(4)
  • 小羊cium
    小羊cium
    2020-07-29

    不管是开发工具控制台,自己用source-map,还是浏览器插件 返回都是{ source: null, line: null, column: null, name: null }

    是不是文件太大了的原因 我的app-service.map.map也就1.2m

    2020-07-29
    赞同 4
    回复 12
    • 风清月明
      风清月明
      2020-08-12
      我也是,你的解决了吗?
      2020-08-12
      回复
    • 黄永泰
      黄永泰
      2020-11-19
      我也是 你们解决了吗 无论怎么样都是null
      2020-11-19
      回复
    • 小恐龙在哪儿
      小恐龙在哪儿
      2020-11-24
      同样问题 下载了 两种方案全部都是 { source: null, line: null, column: null, name: null }    用其他的source map可以有结果 后台下载的不行
      2020-11-24
      回复
    • 小恐龙在哪儿
      小恐龙在哪儿
      2020-11-24
      @小程序技术专员-binnie 官方是否试过 是否可以给个方案
      2020-11-24
      回复
    • 🐱xin
      🐱xin
      2020-11-28
      插眼
      2020-11-28
      回复
    查看更多(7)
  • 窦亮5637
    窦亮5637
    04-01

    版本对应上了,结果还是null。官方就没个人出来真正解决问题!!!

    04-01
    赞同 3
    回复
  • 一昂杨
    一昂杨
    2020-11-15

    话是这么说,但是你看看我的问题https://developers.weixin.qq.com/community/develop/doc/000404e52fc15066234b404d351c00?fromCreate=0

    下载下来的map中并没有小程序后台的报错文件(下载的是app-service.map.map,报错的是vendor.js)

    这就很不符合常理。

    你说呢!!

    2020-11-15
    赞同 3
    回复
  • 创博
    创博
    04-27

    未匹配到结果的问题我解决了,确实是因为 sourcemap 和异常版本不匹配,因为下载的 sourcemap 是线上版本,但是异常信息包含历史版本。解决方法是,筛选异常只看线上版本的,这样就都可以匹配上了。

    但是这里希望小程序官方直接显示匹配了 source map 以后的原始文件位置,因为微信既有 sourcemap 又有异常信息,其实完全可以帮开发者做好这一步。


    04-27
    赞同 1
    回复 2
    • 养乐多
      养乐多
      05-26
      下载了指定版本还是不行,全是null
      05-26
      回复
    • 王明
      王明
      09-13
      解决没,这东西怎么玩的呃
      09-13
      回复
  • cobish.
    cobish.
    01-17

    解出全是 null 的不是你们的错。

    打开下载的 map 文件,搜索 mappings 看看。所以说下载下来的文件本身就有问题

    {
        "mappings": ";;;;;;;;;;;"
    }
    
    01-17
    赞同 1
    回复 3
    • cobish.
      cobish.
      01-17
      补充一下, 把 mappings 前面的 ";;;;;;;;" 删掉试试,就不会返回 null 了
      01-17
      回复
    • 他
      06-22
      真的可以吗?我看之前全是;     解析了半天解析不出来,全是null,现在已经解决了吗
      06-22
      回复
    • 糊糊
      糊糊
      09-27
      试了下这个方法,真的解决了一直提示版本不匹配的问题,感谢
      09-27
      回复
  • 吴奕群
    吴奕群
    2020-07-01

    跟binnie一起学习~

    2020-07-01
    赞同 1
    回复
  • 小程序技术专员-binnie
    小程序技术专员-binnie
    2020-07-01

    学习~

    2020-07-01
    赞同 1
    回复 1
    • 小恐龙在哪儿
      小恐龙在哪儿
      2020-11-24
      官方是否试过 是否可以给个方案 两种方案全部都是 { source: null, line: null, column: null, name: null }  其他渠道的sourcemap 没有问题
      2020-11-24
      1
      回复

正在加载...

登录 后发表内容