评论

微信开发者工具下载的 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'


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

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

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

Q: 不会写代码
A: 会 ctrl + c 和 ctrl +v 的话,

  1. 打开下载的文件,全选拷贝
  2. 打开微信开发者工具,在控制台中,输入 setSourceMapContent( 粘贴内容 )
  3. 控制台中输入originalPositionFor( 错误的行,错误的列 )

Q: 还是不会
A: 转行吧。

最后一次编辑于  07-01  
点赞 14
收藏
评论

18 个评论

  • 对方正在输入...
    对方正在输入...
    07-01

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

    07-01
    赞同 7
    回复 2
    • Arno Dorian
      Arno Dorian
      09-08
      我家门口有家卖猪油饼的,生意很火爆,准备去拜师学艺了。
      09-08
      回复
    • 对方正在输入...
      对方正在输入...
      09-08回复Arno Dorian
      猪油饼真新鲜,难怪生意火爆啊,我去卖卫生纸可能也不错哦
      09-08
      回复
  • 吴奕群
    吴奕群
    07-01

    跟binnie一起学习~

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

    学习~

    07-01
    赞同 1
    回复
  • 小七
    小七
    08-25

    null的可能要先确认下sourceMap文件对不对

    08-25
    赞同
    回复
  • L
    L
    08-13

    Error: "null" is not in the SourceMap

    08-13
    赞同
    回复
  • 小羊 CIUM
    小羊 CIUM
    07-29

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

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

    07-29
    赞同
    回复 1
    • 风清月明
      风清月明
      08-12
      我也是,你的解决了吗?
      08-12
      回复
  • 小刺猬
    小刺猬
    07-28

    你好,根据originalPositionFor(4826, 592),总是返回Error: "null" is not in the SourceMap.这是为什么呢

    07-28
    赞同
    回复
  • ffffffffffff
    ffffffffffff
    07-15

    怕不是真的要转行了。。报错解出来就是null

    07-15
    赞同
    回复 1
    • ffffffffffff
      ffffffffffff
      07-15
      搞个这么大的对象在命令行。。我的命令行也变得奇卡无比。。果然还是只能转行了
      07-15
      回复
  • ???
    ???
    07-10

    还好我会复制粘贴不然就要失业了

    07-10
    赞同
    回复
  • Chaos's
    Chaos's
    07-04

    哎,想转行了,转行之前再帮我看看这个吧...

    1.小游戏里的代码,比较大,3.2m的sourcemap...复制到微信开发工具里会有以下错误

    Error saving setting with name: consoleHistory, value length: 8012153. Error: Failed to set the 'consoleHistory' property on 'Storage': Setting the value of 'consoleHistory' exceeded the quota.

    2.如果是自己写代码解析的花,会报json解析错误的问题,主要是在sourcescontent里的代码,不符合json格式,把sourcescontent删掉以后,虽然可以运行,但是返回的全是null。

    { source: null, line: null, column: null, name: null }




    07-04
    赞同
    回复 1
    • Can🌴
      Can🌴
      07-06
      emm,抽空我看一下太长的 sourcemap 会有问题不。
      2. 你确认下你souremap 文件是正常的?
      07-06
      回复

正在加载...

登录 后发表内容