解读SourceMap

最新推荐文章于 2024-07-04 20:30:00 发布
最新推荐文章于 2024-07-04 20:30:00 发布
阅读量365 收藏
点赞数
文章标签： 前端 javascript webpack 开发语言 ecmascript
原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649852676&idx=2&sn=0914e37acea1f7361153e2765b37f5b1&chksm=f17541c7c602c8d1d87b9c8edd42dfde404a9bfcca9153a0b8212e2b84dd9c6bafec86edb787&scene=126&sessionid=0
版权

大厂技术  坚持周更  精选好文

本文为来自 字节教育-成人与创新前端团队 成员的文章，已授权 ELab 发布。

SourceMap的用途

前端工程打包后代码会与源码产生不一致，当代码运行出错时控制台会定位出错代码的位置。SourceMap的用途是可以将转换后的代码映射回源码，如果你部署了js文件对应的map文件资源，那么在控制台里调试时可以直接定位到源码的位置。

SourceMap的格式

我们可以生成一个SouceMap文件看看里面的字段分别都对应什么意思，这里使用webpack打包举例。

源码：

//src/index.js
function a() {
  for (let i = 0; i < 3; i++) {
    console.log('s');
  }
}
a();

打包后的代码：

//dist/main-145900df.js
!function(){for(let o=0;o<3;o++)console.log("s")}();
//# sourceMappingURL=main-145900df.js.map

.map文件：

//dist/main-145900df.js.map
{
  "version": 3,
  "file": "main-145900df.js",
  "mappings": "CAAA,WACE,IAAK,IAAIA,
  EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
  "sources": ["webpack://source-map-webpack-demo/./src/index.js"],
  "sourcesContent": ["function a() {\n  for (let i = 0; i < 3; i++) {\n    console.log('s');\n  }\n}\na();"],
  "names": ["i", "console", "log", "a"],
  "sourceRoot": ""
}

  • version：目前source map标准的版本为3；

  • file：生成的文件名；

  • mappings：记录位置信息的字符串；

  • sources：源文件地址列表；

  • sourcesContent：源文件的内容，一个可选的源文件内容列表；

  • names：转换前的所有变量名和属性名；

  • sourceRoot：源文件目录地址，可以用于重新定位服务器上的源文件。

这些字段里大部分都很好理解，接下来主要解读mappings这个字段是通过什么规则来记录位置信息的。

mappings字段的定义规则

"mappings": "CAAA,WACE,IAAK,IAAIA,
  EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",

为了尽可能减少存储空间但同时要达到记录原始位置和目标位置映射关系的目的，mappings字段按照了一些特殊的规则来生成。

  1. 生成文件中的一行作为一组，用“；”隔开。

  2. 连续的字母共同表示一个位置信息，用逗号分隔每个位置信息。

  3. 一个位置信息由1、4或5个可变长度的字段组成。

    1. // generatedColumn, [sourceIndex, originalLine, orignalColumn, [nameIndex]]

    2. 第一位，表示这个位置在转换后的代码第几列，使用的是相对于上一个的相对位置，除非这是这个字段的第一次出现。

    3. 第二位（可选），表示所在的文件是属于sources属性中的第几个文件，这个字段使用的是相对位置。

    4. 第三位（可选），表示对应转换前代码的第几行，这个字段使用的是相对位置。

    5. 第四位（可选），表示对应转换前代码的第几列，这个字段使用的是相对位置。

    6. 第五位（可选），表示属于names属性中的第几个变量，这个字段使用的是相对位置。

  4. 字段的生成原理是将数值通过vlq-base64编码转换成字母。

vlq原理

vlq是Variable-length quantity的缩写，是一种通用的，使用任意位数的二进制来表示一个任意大的数字的一种编码方式。

SourceMap中的编码流程是将位置从十进制数值—>二进制数值—>vlq编码—>base64编码最终生成字母。

//   Continuation
//   |    Sign
//   |    |
//   V    V
//   101011

vlq编码的规则：

  • 一个数值可能由多个字符组成

  • 对于每个字符使用6个2进制位表示

    • 如果是表示数值的第一个字符中的最后一个位置，则为符号位。

    • 否则用于实际有效值的一位。

    • 0为正，1为负（SourceMap的符号固定为0），

    • 第一个位置是连续位，如果是1，代表下一个字符也属于同一个数值；如果是0，表示这个字符是表示这个数值的最后一个字符。

    • 最后一个位置

  • 至少含有4个有效值，所以数值范围为(1111到-1111)即-15到15的可以由一个字符表示。

    • 数值的第一个字符有4个有效值

    • 之后的字符有5个有效值

最后将6个2进制位转换成base64编码的字母，如图。

c9a77a3eb882fc09a4790b18ea6e035d.png

举例编码数值29

数值29（十进制）=11101（二进制）

1｜1101

先取低四位，数值的第一个字符有四个有效值1101

11010-----------最后加上符号位

111010----------开头加上连续位1（后面还有字符表示同一个数值）

6---------------转换为base64编码对应是6

数值的第二个字符

00001----------补充有效位

000001--------开头加上连续位0（表示是数值的最后一个字符）

B---------------转换为base64编码

29=》6B

我们将上述转换的规则通过代码方式呈现：

代码实现vlq编码

先在最后添加一个符号位，从低位开始截取5位作为一个字符，截取完若还有数值则在截取的5位前添加连续位1，即生成好一个字符；最后一个字符的数值直接与011111进行与运算即可。

//https://github.com/mozilla/source-map/blob/HEAD/lib/base64-vlq.js
const base64 = require("./base64");

//移动位数
const VLQ_BASE_SHIFT = 5;

// binary: 100000
const VLQ_BASE = 1 << VLQ_BASE_SHIFT;
//1左移5位：100000=32

// binary: 011111
const VLQ_BASE_MASK = VLQ_BASE - 1;

// binary: 100000
const VLQ_CONTINUATION_BIT = VLQ_BASE;

//符号位在最低位
//1.1左移一位并在最后加一个符号位
function toVLQSigned(aValue) {
  return aValue < 0 ? (-aValue << 1) + 1 : (aValue << 1) + 0;
}

/**
 * Returns the base 64 VLQ encoded value.
 */
function base64VLQ_encode(aValue) {
  let encoded = "";
  let digit;

  let vlq = toVLQSigned(aValue);//第一步：左移一位，最后添加符号位
  
  do {
    digit = vlq & VLQ_BASE_MASK;
    //第二步：vlq和011111进行与运算，获取字符中已经生成好的后5位
    //从低位的5位开始作为第一个字符
    vlq >>>= VLQ_BASE_SHIFT;//vlq=vlq>>>5 
    //第三步：vlq右移5位用于截取低位的5位，对剩下的数值继续进行操作
    if (vlq > 0) {
      //说明后面还有数值，则要在现在这个字符开头加上连续位1
      digit |= VLQ_CONTINUATION_BIT;//digit=digit|100000,与100000进行或运算
    }
    encoded = encoded+base64.encode(digit);//第四步:生成的vlq字符进行base64编码并拼接
  } while (vlq > 0);

  return encoded;
};
exports.encode = base64VLQ_encode;

举例解码字符6B

6B

第一个字符

6=>111010--------base64解码并转换为二进制

111010------------符号位

110110------------连续位（表示后面有字符表示同一个数值）

第一个字符有效值value=1101

第二个字符

B=>000001------base64解码并转换为二进制

000001----------有效值

000001----------连续位（表示后面没有字符表示同一个数值）

第二个字符的有效值value=00001

合并value=000011101转为十进制29

代码实现vlq解码

从左到右开始遍历字符，对每个字符都先去除连续位剩下后5位数值，将每个字符的5位数值从低到高拼接，最后去除处在最低一位的符号位。

//https://github.com/Rich-Harris/vlq/blob/HEAD/src/index.js
/** @param {string} string */
export function decode(string) {
  /** @type {number[]} */
  let result = [];

  let shift = 0;
  let value = 0;

  for (let i = 0; i < string.length; i += 1) {//从左到右遍历字母
    let integer = char_to_integer[string[i]];//1.base64解码

    if (integer === undefined) {
      throw new Error('Invalid character (' + string[i] + ')');
    }

    const has_continuation_bit = integer & 100000;//2.获取连续位标识

    integer =integer & 11111;//3.移除符号位获取后5位

    value = value + (integer << shift);
    //4.从低到高拼接有效值

    if (has_continuation_bit) {
      //5.有连续位
      shift += 5;//移动位数
    } else {
      //6.没有连续位，处理获取到的有效值value
      const should_negate = value & 1;//获取符号位

      value =value >>>1;//7.右移一位去除符号位,获取最终有效值

      if (should_negate) {
        result.push(value === 0 ? -0x80000000 : -value);
      } else {
        result.push(value);
      }

      // reset
      value = shift = 0;
    }
  }

  return result;
}

整个转换流程举例

源码：

//src/index.js

function a() {
  for (let i = 0; i < 3; i++) {
    console.log('s');
  }
}
a();

打包后的代码：

//dist/main-145900df.js

!function(){for(let o=0;o<3;o++)console.log("s")}();
//# sourceMappingURL=main-145900df.js.map

.map文件：

//dist/main-145900df.js.map
{
  "version": 3,
  "file": "main-145900df.js",
  "mappings": "CAAA,WACE,IAAK,IAAIA,
  EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
  "sources": ["webpack://source-map-webpack-demo/./src/index.js"],
  "sourcesContent": ["function a() {\n  for (let i = 0; i < 3; i++) {\n    console.log('s');\n  }\n}\na();"],
  "names": ["i", "console", "log", "a"],
  "sourceRoot": ""
}

CAAA

[1,0,0,0]

转换后的代码的第1列

sources属性中的第0个文件

转换前代码的第0行。

转换前代码的第0列。

对应function

WACE

[11,0,1,2]

转换后的代码的第12(11+1)列

sources属性中的第0个文件

转换前代码的第1行。

转换前代码的第2列。

对应for

IAAK

[4,0,0,5]

转换后的代码的第16(12+4)列

sources属性中的第0个文件

转换前代码的第1行。

转换前代码的第7(2+5)列。

对应let

SourceMap使用的规则是如何优化存储位置信息空间的？

SourceMap规范进行了版本迭代，最初，规范对所有映射都有非常详细的输出，导致SourceMap大约是生成代码的10倍。第二个版本减少了50% 左右，第三个版本又减少了50% 。

因为如果生成的位置信息内容比源码还多未免有些得不偿失，所以这样的规则是在尽可能的减小存储空间。

我们可以来总结一下这个规则里使用到的优化点：

  1. 使用相对位置，使位置数值尽可能小，在后续计算中获取真实的位置数值，从而减少存储空间；

  2. 使用vlq-base64编码减少存储空间，如32000=》ggxT，通过计算减少存储空间；

  3. 行数信息直接用；分割来表示。

解析babel生成SourceMap的实现方式

我们日常的各种转译/打包工具是如何生成SourceMap的，这里来解析一下babel生成SourceMap的实现方式。

我们大概需要以下三个步骤来生成SourceMap：

  1. 获取源码的行列信息

  2. 获取生成代码的行列信息

  3. 将前后一一对应起来，然后进行vlq-base64编码并按照规则生成sourcemap文件。

babel流程

babel主要执行了三个流程：解析（parse），转换（transform），生成（generate）。

parse解析阶段（获得源码对应的ast）=》transform（plugin插件执行转换ast）=》generate通过ast生成代码

parse和transform阶段

在解析和转换的阶段，源码对应的ast经过一些plugin的执行后节点的类型或者值会发生改变，但节点中有一个loc属性（类型为SourceLocation）会一直记录着源码最开始的行列位置，所以获取到源码的ast就能够得到源码中的行列信息。

generate阶段生成SourceMap

generator阶段通过ast生成转译后的代码，在这个阶段会对ast树进行遍历。

针对不同类型的ast节点根据节点的含义执行word/space/token/newline等方法生成代码，这些方法里都会执行append方法添加要生成的字符串代码。

在此之中有一个记录生成代码的行列信息属性会按照添加的字符串长度进行不断的累加，从而得到转译前后行列信息的对应。

//packages/babel-generator/src/index.ts
export default function generate(
  ast: t.Node,
  opts?: GeneratorOptions,
  code?: string | { [filename: string]: string },
) {
  const gen = new Generator(ast, opts, code);
  //1.传递ast新建一个Generator对象
  return gen.generate();
}
class Generator extends Printer {
  generate() {
    return super.generate(this.ast);
  }
}

//packages/babel-generator/src/printer.ts
class Printer {
  generate(ast) {
    this.print(ast);
    //2.通过ast生成代码
    this._maybeAddAuxComment();

    return this._buf.get();
  }
  
  print(node, parent?) {
  
    if (!node) return;

    const oldConcise = this.format.concise;
    if (node._compact) {
      this.format.concise = true;
    }

    const printMethod = this[node.type];
    //获取不同节点类型对应的生成方法
    
    //....
  

    //调用
    this.withSource("start", loc, () => {
      printMethod.call(this, node, parent);
    });

    // this._printTrailingComments(node);

    // if (shouldPrintParens) this.token(")");

    // end
    this._printStack.pop();

    this.format.concise = oldConcise;
    this._insideAux = oldInAux;
  }
}

例如，遍历到一个SwitchCase类型的ast节点，会在里面调用Printer对象的word/space/print/token等方法，而这些方法内部都会调用append方法用于逐个添加要生成的字符串，并计算得到对应的行列信息。

//packages/babel-generator/src/generators/statements.ts
export function SwitchCase(this: Printer, node: t.SwitchCase) {
  if (node.test) {
    this.word("case");
    this.space();
    this.print(node.test, node);//用于遍历，执行节点下的节点的方法
    this.token(":");
  } else {
    this.word("default");
    this.token(":");
  }

  if (node.consequent.length) {
    this.newline();
    this.printSequence(node.consequent, node, { indent: true });
  }
}

Printer对象中声明了word/space/print/token等方法，这些方法都会将字符串添加到Buffer对象中。

//packages/babel-generator/src/printer.ts
class Printer {
   constructor(format: Format, map: SourceMap) {
        this._buf = new Buffer(map);
  }
  
  //...
  
  _append(str: string, queue: boolean = false) {
    if (queue) this._buf.queue(str);
    else this._buf.append(str);
  }
 
  word(str: string): void {
    // prevent concatenating words and creating // comment out of division and regex
    if (
      this._endsWithWord ||
      (this.endsWith(charCodes.slash) && str.charCodeAt(0) === charCodes.slash)
    ) {
      this._space();
    }

    this._maybeAddAuxComment();

    this._append(str);

    this._endsWithWord = true;
  }
  
  token(str: string): void {
    // space is mandatory to avoid outputting <!--
    // http://javascript.spec.whatwg.org/#comment-syntax
    const lastChar = this.getLastChar();
    const strFirst = str.charCodeAt(0);
    if (
      (str === "--" && lastChar === charCodes.exclamationMark) ||
      // Need spaces for operators of the same kind to avoid: `a+++b`
      (strFirst === charCodes.plusSign && lastChar === charCodes.plusSign) ||
      (strFirst === charCodes.dash && lastChar === charCodes.dash) ||
      // Needs spaces to avoid changing '34' to '34.', which would still be a valid number.
      (strFirst === charCodes.dot && this._endsWithInteger)
    ) {
      this._space();
    }

    this._maybeAddAuxComment();
    this._append(str);
  }
  
}

Buffer对象的append方法会去计算生成代码的行列信息，并将生成代码的行列信息和原始代码的行列信息传递给SourceMap对象，SourceMap对象将前后位置信息对应起来并进行编码从而生成最终的SourceMap。

//packages/babel-generator/src/buffer.ts
class Buffer {
    constructor(map?: SourceMap | null) {
        this._map = map;
      }
    
   //用于记录生成代码的位置
     _position = {
        line: 1,
        column: 0,
      };

 
  //第1步:执行内部_append方法
  append(str: string): void {
    this._flush();
    const { line, column, filename, identifierName } = this._sourcePosition;
    this._append(str, line, column, identifierName, filename);
  }
  
  //第2步:计算传递进来的字符串参数对应的位置
  _append(
    str: string,
    line: number | undefined,
    column: number | undefined,
    identifierName: string | undefined,
    filename: string | undefined,
  ): void {
    this._buf += str;
    this._last = str.charCodeAt(str.length - 1);

    let i = str.indexOf("\n");//查找换行符位置
    let last = 0;
    
    if (i !== 0) {
    //排除开头是换行符的情况，其他情况执行标记
      this._mark(line, column, identifierName, filename);
    }

    // Now, find each reamining newline char in the string.
    while (i !== -1) {
    //2-1.当存在换行符时，改变行数
      this._position.line++;
      this._position.column = 0;
      last = i + 1;//换行符后一位

      // We mark the start of each line, which happens directly after this newline char
      // unless this is the last char.
      if (last < str.length) {
        this._mark(++line, 0, identifierName, filename);//改变行数,行数+1
      }
      i = str.indexOf("\n", last);//寻找下一个换行符
    }
    //2-2.改变列数，列数加上字符的长度
    this._position.column += str.length - last;
  }
  
  //第3步：调用sourcemap对象的mark方法
  _mark(
    line: number | undefined,
    column: number | undefined,
    identifierName: string | undefined,
    filename: string | undefined,
  ): void {
    this._map?.mark(this._position, line, column, identifierName, filename);
  }
}

export default class SourceMap {
//第4步：将前后行列信息对应起来后对位置信息进行编码
  mark(
    generated: { line: number; column: number },
    line: number,
    column: number,
    identifierName?: string | null,
    filename?: string | null,
  ) {
    this._rawMappings = undefined;

    maybeAddMapping(this._map, {
      name: identifierName,
      generated,
      source:
        line == null
          ? undefined
          : filename?.replace(/\/g, "/") || this._sourceFileName,
      original:
        line == null
          ? undefined
          : {
              line: line,
              column: column,
            },
    });
  }
}

相关链接

Introduction to JavaScript Source Maps

Source Map Revision 3 Proposal

https://github.com/babel/babel

https://github.com/Rich-Harris/vlq

https://github.com/mozilla/source-map

3a9fe09bbab925b7f965a6062e531d5b.png

往期推荐

面试遇到 性能优化 必答的 9 个点，加分！

54c70a3a5b93986121ccedfa933f5349.png

【基础篇】 如何为 Vue3 组件标注 TS 类型，看这个就够了！

4e5f1851b697b0c625e2d3765fb5e293.png

axios的替代方案的思考和实践

9c44c97dd85006c9b624d85dd0458609.png


最后

  • 欢迎加我微信，拉你进技术群，长期交流学习...

  • 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

20852260889b4904b94699bc9892bc25.jpeg

9ce8b68375ac031133db9d191bd959de.png

点个在看支持我吧

639863cad8a4802379e68d8c946fc56e.gif

winty~~
关注
【Flink】Flink 1.13 版本 KafkaSource 代码解读
九师兄
12-17 893
因为最近看到新版本的kafka source进行改版了，于是就想测试一下看看最新版本的如何使用，顺便debug一下，看看实现原理【Flink】Flink 1.14.0 全新的 Kafka Connector。
IA-YOLO项目中DIP模块的初级解读（生成带雾图片）
a486259的博客
08-27 8641
IA-YOLO项目源自论文，其提出端到端方式联合学习CNN-PP和YOLOv3，这确保了CNN-PP可以学习适当的DIP，以弱监督的方式增强图像检测。IA-YOLO方法可以自适应地处理正常和不利天气条件下的图像。阅读论文发现只介绍了IA-YOLO的实际效果，对DIP模块和CNN-PP介绍较少，故此查阅源码分析其实现。通过分析发现，IA-YOLO使用filtered_image_batch 与 input_data_clean的mse loss优化CNN-PP模块的输出。
前端异常解析：Source Map
XXHolic
12-14 841
引子 在前端异常解析中介绍了异常的解析，这些异常信息上报后，一般也难以直接的看出什么错误源，因为正式的线上环境中，代码往往都经过了压缩混淆，异常的一些信息都是指向压缩文件。这时候可以根据 Source Map 文件追溯源文件的位置。 Origin My GitHub 简介 最初的源映射格式是由 Joseph Schorr 创建，在 Closure Inspector（谷歌的公共工具）中用来开启 JavaScript 源码级别的调试优化。随着使用了源映射的项目规模扩大，格式冗余开始成为一个问题。v2 版本
SourceMap 映射原理解析
weixin_43294560的博客
08-28 926
真实场景中，有些情况下某些字段其实不必要，这时就可以将其省略。VLQ 以二进制方式的方式呈现。
Webpack: 基于Sourcemap源码映射原理与使用技巧
最新发布
Wang的专栏
07-04 1119
Sourcemap 协议最初由 Google 设计并率先在 Closure Inspector 实现，它的主要作用就是将经过压缩、混淆、合并的产物代码还原回未打包的原始形态，帮助开发者在生产环境中精确定位问题发生的行列位置，例如：在 Webpack 内部，这段生成 Sourcemap 映射数据的逻辑并不复杂，一句话总结：在钩子遍历产物文件assets数组，调用提供的map方法，最终计算出asset与源码之间的映射关系。
源映射(Source Map)详解
yuyongkun4519的博客
08-24 1511
http://www.cnblogs.com/xuld/p/5882677.html 一、什么是源映射 为了提高性能，很多站点都会先压缩 JavaScript 代码然后上线， 但如果代码运行时出现错误，浏览器只会显示在已压缩的代码中的位置，很难确定真正的源码错误位置。 这时源映射就登场了。 源映射(Source Map)是一种数据格式，它存储了源代码和生成代...
聊一聊SourceMap
趣谈前端
03-06 711
大厂技术坚持周更精选好文前言我们项目的代码在经过编译打包后，会将开发时多个文件的代码合并到同一份文件中，而且还会经过各种压缩，合并，代码丑化等等操作，转换完最终生成的代码才会用于线...
JavaScript Source Map 详解
ICode联盟
06-02 614
转载地址：点击打开链接 推荐学习requirejs（按需加载js） jQuery 1.9发布。 这是2.0版之前的最后一个新版本，有很多新功能，其中一个就是支持Source Map。 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部，你可以看到最后一行是
Vite 源码解读系列（图文结合） —— 插件篇
qq_34621851的博客
03-05 3966
哈喽，很高兴你能点开这篇博客，本博客是针对 Vite 源码的解读系列文章，认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。 Vite 是一种新型的前端构建工具，能够显著提升前端开发体验。 我将会使用图文结合的方式，尽量让本篇文章显得不那么枯燥（显然对于源码解读类文章来说，这不是个简单的事情）。 如果你还没有使用过 Vite，那么你可以看看我的前两篇文章，我也是刚体验没两天呢。（如下） Vite + Vue3 初体验 —— Vite 篇 Vite + Vue3 初体验 —— Vue3
cartographer运行没有map_Cartographer_ros解读
weixin_42519565的博客
01-12 998
Cartographer_ros主要实现Topics的订阅与发布。订阅是指从IMU，激光雷达，里程计取数据，然后传给Cartographer库。发布是指从Cartographer拿处理的结果，然后发布给ROS，然后可以在rivz上显示。1. cartographer_ros/docs/source/ros_api.rst此文件描述 了Cartographer_ros订阅与发布了哪些topics及服...
vue-cli3.0 特性解读
08-27
这包括但不限于基础路径（baseUrl）、输出目录（outputDir）、是否在保存时进行 lint 检查（lintOnSave）以及生产环境的 sourceMap 设置。此外，还可以通过 `chainWebpack` 和 `configureWebpack` 选项直接修改或...
sourcemapping:解析并映射javascript错误日志到源代码-Source code world
03-25
源映射 介绍 考虑到发布环境不附加sourcemap文件，收集到的错误总是被改过的，需要一个解析工具进行解析，映射到源文件。 本工具基于官方映射工具以及工具 专门针对前端[removed] 到的JSON.stringfy（errorObj.stack）进行解析 根据相应的中的每个帧信息查找指定路径下对应的sourcemap文件进行解析，最终生成映射到二进制后的细分信息 用法 需要预算[removed]中捕获的JSON.stringfy(errorObj.stack)即需要被解析的转换字符串，以及放置sourcemap文件的相对路径。 sourcemap文件命名为各压缩替代工具的替代规则： javascript文件名.map ，需要直接放置在指定路径下 安装 npm install sourcemapping - g Usage: sourcemapping [ opt
babel-sourcemap:重现Babel错误，当用作React子代时，字符串文字被错误地映射
03-27
Babel Sourcemap Repro 该存储库演示了Babel Sourcemap生成的问题。 跑步： cd repro npm install cd .. npm install npm start 在输出中： "div" source: src/App.jsx:5:5 target: lib/App.js:13:39 "App" source: src/App.jsx:5:19 target: lib/App.js:14:15 "h1" source: src/App.jsx:6:7 target: lib/App.js:15:35 "Welcome to my application!" source: src/App.jsx:6:7 target: lib/App.js:15:46 "This is my app!" source:
axy-sourcemap-base64vlq:用于 Node.js 的 VLQ（可变长度数量）Base64 算法（用于源映射）的编解码器
06-13
axy-sourcemap-base64vlq VLQ（可变长度数量）Base64 算法（Node.js）的编解码器。 GitHub: NPM： 执照： 作者：奥列格·格里戈里耶夫 VQL + Base64 Base64 允许我们在文本字符串中表示一系列数字，可以以文本格式（JSON、XML 等）存储和传输。 VLQ 允许我们在一个数字容量很小的序列号中表示一个整数。 例如 6 位是 Base64 的限制。 结果数字称为“VLQ 数字”。 小输入数字由比大数字更少的 VLQ 数字表示。 因此，如果输入序列主要包含小数，则 VLQ 最有效。 VLQ+Base64 允许我们以文本格式有效地表示一个整数序列（以少数为主）。 例如，它用于 。 算法 例如，我们有一个数字块： [12345, -12345, 0] 。 (1). VLQ 仅适用于无符号整数。 将符号位传送到整数的末尾
SourceMap源码映射详细讲解
qq_42880714的博客
04-09 2127
SourceMap源码映射详细讲解
source map 的原理探究
weixin_33727510的博客
10-08 798
线上产品代码一般是编译过的，前端的编译处理过程包括不限于 转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart) 压缩/Minifiers (UglifyJS) 这里提及的都是可生成source map 的操作。 经过这一系...
sourcemap
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-12 1009
map。
使用Chrome sourcemap在线调试Webpack中的SASS/SCSS代码
weixin_34184158的博客
02-12 459
使用chrome sourcemap 在线编辑代码的开发体验非常畅快， 最简单的souorcemap是在线调试原始的css代码， 只需要将项目文件夹添加到chrome中，然后就可以直接在chrome中以所见即所得的方式编辑css了。简单的soucemap调试可以看下这篇文章Chrome 浏览器的 source-map 功能 但是随着前端开...
线上监控 source-map
weixin_43294560的博客
03-07 361
线上定位
STL源码剖析：侯捷解读SGI STL
STL（Standard Template Library，标准模板库）是C++编程语言中的一个重要组成部分，它提供了各种高效的数据结构（如vector、list、map等）和算法（如排序、查找等），极大地提高了程序员的生产力。SGI STL是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值