SourceMap源码映射详细讲解

news2025/1/12 15:51:45

SourceMap源码映射详细讲解

前端工程打包后代码会跟项目源码不一致，当代码运行出错时控制台上定位出错代码的位置跟项目源码上不对应。这时候我们很难定位错误代码的位置。SourceMap的用途是可以将转换后的代码映射回源码，如果设置了js文件对应的map资源，那么就可以在控制台进行调试时直接定位到源码位置。

SourceMap生成方式

前端的构建工具很多，文章只举例两个常用的：vite和webpack

vite生成SourceMap

在vite在文档介绍中可以看到直接设置build.sourcemap配置即可。

sourcemap可配置的值类型为（boolean, ‘inline’, ‘hidden’）几种：

  • boolean: true | false
    默认为false，不生成map文件。当设置成true时，会生成单独的map文件，并且在对应的bundle文件中生成相应注释指明map文件。

    请添加图片描述

  • inline
    请添加图片描述

    将source map作为一个data url附加在输出文件中。

  • hidden

    跟true类似，生成一个map文件，但是在bundle问价中并不会生成注释。

webpack生成SourceMap

在webpack中也只需要通过设置devtool配置即可。值有以下多种：

  • eval

    会生成被eval函数包裹的模块内容，其中添加了注释用来标识源文件位置（sourceURL用来指定文件名）
    请添加图片描述

    这种方式因为不需要生成map文件，所以很快，只需要提供对应的源文件地址就可以就进行映射。但是缺少了很多映射信息（行、列等），同时eval方法因为安全问题也不建议使用。

  • source-map

    生成一个map文件，并在bundle文件中添加注释指向map文件。

  • cheap

    跟source-map类似，不过生成的map文件不会生成源码的列信息（只会映射到源码的行）跟loader中的sourcemap。

    通常在定义错误时，只需要关注到行就可以知道错误原因，列信息不是非常必要，这样在打包时也能更快。不过对于需要经过多loader处理的文件，由于不会生成loader相关的sourcemap，可能会导致映射信息不精确。

  • module

    生成的sourcemap包含了loader相关的sourcemap信息。

  • inline

    和vite的inline配置一样，直接将生成的map文件内容作为data url添加到bundle文件中，不单独生成一个map文件。

  • hidden

    也和vite的hidden配置一样。

  • nosources

    生成的map文件中不包含sourceContent字段（sourceContent和sources字段都可以映射源码），使得map文件体积可以更小。

除了上述几个外，webpack还支持组合方式，详情可以[文档中的devtool配置]https://www.webpackjs.com/configuration/devtool/#devtool

sourceMap 使用

对于生成的map文件，我们需要解析工具将源代码跟sourcemap进行映射。

浏览器

在目前的浏览器中大多都默认开启了sourcemap映射功能。

在浏览器中按F12进入到开发者工具可以看到：
请添加图片描述

如果js文件中有sourcemap注释，可以映射到源码中。

没有配置sourcemap时：
请添加图片描述
请添加图片描述

配置了sourcemap：
请添加图片描述
请添加图片描述

手动映射

对于生产环境，为了安全一般都不会在浏览器中进行映射。但是为了能监控定位到错误，我们可以使用手动隐射的方式。

安装source-map

npm i source-map -D

启动一个node服务用来接受错误信息并进行记录：

const { SourceMapConsumer } = require('source-map');
const fs = require('fs');

const rawSourceMap = fs.readFileSync(__dirname + '/dist/main.38f7f9c4.js.map', 'utf-8');
console.log(rawSourceMap)
originalPosition('main.38f7f9c4.js:733')
function originalPosition(info) {
  const [bundleName, line, column] = info.split(':');
  SourceMapConsumer.with(rawSourceMap, null, (consumer) => {
    const originalPosition = consumer.originalPositionFor({
      line: parseInt(line),
      column: parseInt(column)
    })
    console.log(originalPosition);
  })
}

请添加图片描述

现在也有许多监控平台（例如sentry）可以实现源码映射，不需要我们手动映射。

SourceMap文件格式

使用webpack打包举例来看一个map文件里都有什么字段。

// index.js
function log() {
  for(let i = 0; i < 5; i++) {
    console.log(i)
  }
}

log()

在webpack的配置文件中添加devtool: 'source-map'设置。

// 打包后的文件
!function(){for(let o=0;o<5;o++)console.log(o)}();
//# sourceMappingURL=main.js.map

可以看到在打包过程中，代码经过压缩，去空格以及编译转化后，由于代码之间差异性过大，造成无法debug的问题。不过在打包文件的最后有一行//# sourceMappingURL=main.js.map注释指向了对应的map文件。

// main.js.map
{
  "version":3,
  "file":"main.js",
  "mappings":"CAAA,WACE,IAAI,IAAIA,EAAI,EAAGA,EAAI,EAAGA,IACpBC,QAAQC,IAAIF,GAIhBE",
  "sources":["webpack:///./index.js"],
  "sourcesContent":["function log() {\r\n  for(let i = 0; i < 5; i++) {\r\n    console.log(i)\r\n  }\r\n}\r\n\r\nlog()"],"names":["i","console","log"],
  "sourceRoot":""
}
  • version: 目前source map的标准版本是3。
  • file: 转换后的文件名。
  • mappings: 记录位置信息的字符串。
  • sources: 源文件地址列表，是一个数组，表示可能是多文件进行合并。
  • sourcesContent: 源文件内容（可选的源文件内容列表）。
  • names: 转换前的所有变量名和属性名。
  • sourceRoot: 源文件目录地址，可以用于重新定位服务器上的源文件。

mappings

上述的大部分字段都很好理解，就是mappings很令人疑惑。

为了尽可能减少存储空间且达到记录原始位置和目标位置的映射关系，mappings也是按照了一定的规则生成。

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

    比如说mappings字段为AAAAA,BBBBB;CCCCC表示转换后的源码分成两行，第一行有两个位置，第二行有一个位置。

  2. 连续的字母共同表示一个位置信息，用逗号分隔每个位置信息。
  3. 一个位置信息由1、4或5个可变长度的字段组成（generatedColumn,[sourceIndex, originLine,originColumn, [nameIndex]]）。
  • 第一位表示这个位置在转换后的代码第几列，使用的是相较于上一个的相对位置，除非这个字段是第一次出现。
  • 第二位（可选）表示所在文件是属于sources属性中的第几个文件。
  • 第三位（可选）表示转换前代码的第几行。
  • 第四位（可选）表示转换前代码的第几列。
  • 第五位（可选）表示属于names属性中的第几个变量（如果该位置没有对应names属性中的变量，可以省略第五位）。
  1. 字段生成原理是将数值通过vlq编码转成字母。

编码原理

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

vlq编码

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

规则：

  • 一个数值可能由多个字符组成
  • 每个字符使用6个二进制
    • 如果是表示数值的第一个字符中的最后一个位置，则为符号位，否则用于实际有效值的一位。
    • 0为正，1为负（sourcemap的符号固定为0）
    • 第一个位置是连续位，如果是1，表示下一个字符也属于同一个数值；如果是0，表示这个字符是表示这个数值的最后一个字符。
    • 最后一个位置
  • 至少含有4个有效值，数值范围是-1111到1111，也就是-15到15（十进制）可以由一个字符表示
    • 数值的第一个字符有4个有效值
    • 之后的字符有5个有效值。

最后将6个二进制转成base64编码的字母：
在这里插入图片描述

编码实例 - 将29进行 vlq编码

  1. 将29转换成二进制11101
  2. 在最右边补充符号位，29是正数，符号位为0，整个数变成111010
  3. 从右边的最低位开始，将整个数每隔5位，进行分段，变成1和11010，如果最高位所在的段不足5位，则前面补0，因此两段变成00001和11010
  4. 将两段顺序调转变成11010和00001
  5. 在每一段的最前面添加一个连续位，除了最后一段为0，其他都变成1，变成111010和000001
  6. 将每段都转成base64编码为6和B，所以最终29在经过编码后成6B

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/416258.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java每日一练(20230416)

Java每日一练(20230416)

目录 1. 三数之和 &#x1f31f;&#x1f31f; 2. 基本计算器 &#x1f31f;&#x1f31f;&#x1f31f; 3. 通配符匹配 &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java…
阅读更多...
Android:编译libevent动态库并移植jni中，在Android AVD虚拟机上实现一个http服务器

Android:编译libevent动态库并移植jni中，在Android AVD虚拟机上实现一个http服务器

libevent源码&#xff1a;libevent-2.1.8-stable Android Studio版本&#xff1a;Android Studio Electric Eel | 2022.1.1 Patch 2 AVD虚拟机为x86. https://developer.android.google.cn/studio/run/emulator-networking?hlzh-cn#connecting 大体步骤&#xff1a; 1.在ws…
阅读更多...
Vue2_01_data_插值

Vue2_01_data_插值

插值语法 {{name}} data: vue实例的数据对象 data中数据变化时将重新渲染容器 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!--引入vue,引入之后vue.js 创建了一个全局变…
阅读更多...
c语言进阶篇_动态内存管理(数组可以自动扩容?)

c语言进阶篇_动态内存管理(数组可以自动扩容?)

前言 &#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏: &#x1f354;&#x1f35f;&#x1f32f; c语言初阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f349;本篇简介:>:讲解c语言中的动态内存管理知识,涉及malloc函数、call…
阅读更多...
微信小程序运行及更新机制

微信小程序运行及更新机制

微信小程序运行及更新机制1、微信小程序运行机制1.1 前台和后台1.2 小程序启动&#xff1a;冷启动和热启动1.3 小程序销毁2、微信小程序更新机制2.1 启动时同步更新定期检查发现版本更新用户长时间未使用小程序2.2 启动时异步更新开发者手动触发更新2.3 小程序管理后台的相关设…
阅读更多...
软件测试分类详解

软件测试分类详解

一图看清软件测试分类 一、按测试技术分&#xff08;是否查看代码&#xff09; **1. 黑盒测试**&#xff1a;软件功能是否正常使用【功能的测试】 **2. 白盒测试**&#xff1a;代码逻辑是否正确【结构的测试】 **3. 灰盒测试**&#xff1a;介于两者之间的测试&#xff0c;也…
阅读更多...
第12章_集合框架

第12章_集合框架

第12章_集合框架 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 本章专题与脉络 1. 集合框架概述 1.1 生活中的容器 1.2 数组的特点与弊端 一方面&#xff0c;面向对象语言对事物的体现都是以对…
阅读更多...
iOS 项目嵌入Flutter 运行

iOS 项目嵌入Flutter 运行

一 创建Flutter 模块命令行flutter create --template module my_flutter创建完成后&#xff0c;该模块和普通的Flutter项目一直&#xff0c;可以通过Android Studio或VSCode打开、开发、运行&#xff1b;和之前项目不同的iOS和Android项目是一个隐藏文件&#xff0c;并且我们…
阅读更多...
黑马点评缓存练习题shop-type缓存,附带详细解析

黑马点评缓存练习题shop-type缓存,附带详细解析

黑马点评缓存练习题shop-type缓存 依照shop详情的缓存 Controller代码 public class ShopTypeController {Resourceprivate IShopTypeService typeService;GetMapping("list")public Result queryTypeList() {return typeService.queryList();} }创建service接口方…
阅读更多...
SentenceTransformers介绍

SentenceTransformers介绍

SentenceTransformer使用范例 1使用SentenceTransformers获得句子向量嵌入 from sentence_transformers import SentenceTransformer#模型下载 model SentenceTransformer(paraphrase-MiniLM-L6-v2)# 编码句子 sentences [Python is an interpreted high-level general-pur…
阅读更多...
JavaScript【五】JavaScript中的对象

JavaScript【五】JavaScript中的对象

文章目录&#x1f31f;前言&#x1f31f;对象&#xff1a;&#x1f31f;声明对象&#xff1a;&#x1f31f;隐式创建对象&#xff1a;&#x1f31f;实例化Object&#xff1a;&#x1f31f;实例化自定义构造函数&#xff1a;(会重复占用内存)&#x1f31f;new运算符具体做了什么…
阅读更多...
自动内存管理之【常量池】

自动内存管理之【常量池】

首先上一段代码&#xff0c;一起思考&#xff0c;打印的结果&#xff0c;基于jdk1.8。 StringBuilder sbnew StringBuilder("我爱我媳妇儿");String s sb.toString();System.out.println(s.intern()s); //falsesb.append("&#xff0c;她也很爱我&#xff01;&…
阅读更多...
C++——入门讲解

C++——入门讲解

作者&#xff1a;几冬雪来 时间&#xff1a;2023年4月16日 内容&#xff1a;C入门讲解 目录 前言&#xff1a; 1.什么是C&#xff1a; 2.C关键字&#xff1a; 3.命名冲突&#xff1a; 4.域和::操作符&#xff1a; 5.std内容讲解&#xff1a; 6.<<符&#xff1a…
阅读更多...
STM32F4_独立看门狗详解(IWDG)

STM32F4_独立看门狗详解(IWDG)

目录 1. 独立看门狗是什么 2. 独立看门狗 IWDG简介 3. 独立看门狗的主要特性 4. 独立看门狗功能 4.1 独立看门狗功能框图 4.2 IWDG寄存器 4.2.1 关键字寄存器 IWDG_KR 4.2.2 预分频器寄存器 IWDG_PR 4.2.3 重载寄存器 IWDG_RLR 4.2.4 状态寄存器 IWDG_SR 5. 库函数…
阅读更多...
OpenCV实战之人脸美颜美型（六）——磨皮

OpenCV实战之人脸美颜美型（六）——磨皮

1.需求分析 有个词叫做“肤若凝脂”，直译为皮肤像凝固的油脂，形容皮肤洁白且光润，这是对美女的一种通用评价。实际生活中我们的皮肤多少会有一些毛孔、斑点等表现，在观感上与上述的“光润感”相反，因此磨皮也成为美颜算法中的一项基础且重要的功能。让皮肤变得更加光润，就…
阅读更多...
interface陷阱

interface陷阱

A1 interface Duck Typing: 当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子&#xff0c;那么这只鸟就可以被称为鸭子 目的: 在 Go 中&#xff0c;Interface&#xff08;接口&#xff09;只是一组方法集合。描述事物的外部行为而非内部结构。 通过接口实现多态的概…
阅读更多...
微服务架构——SpringCloud快速入门

微服务架构——SpringCloud快速入门

认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 单体架构 将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 优点&#…
阅读更多...
如何保证缓存和数据库的数据一致性

如何保证缓存和数据库的数据一致性

文章目录1、错误的解决方案1.1、 先更新数据库&#xff0c;再删除缓存1.2、 先更新数据库&#xff0c;再更新缓存1.3、 先删除缓存&#xff0c;再更新数据库1.4、 先更新缓存&#xff0c;再更新数据库2、正确的解决方案2.1、使用 CAS2.2、使用分布式锁2.3、使用消息队列异步更新…
阅读更多...
字符串匹配—KMP算法

字符串匹配—KMP算法

字符串匹配的应用非常广泛&#xff0c;例如在搜索引擎中&#xff0c;我们通过键入一些关键字就可以得到相关的搜索结果&#xff0c;搜索引擎在这个过程中就使用字符串匹配算法&#xff0c;它通过在资源中匹配关键字&#xff0c;最后给出符合条件的搜索结果。并且我们在使用计算…
阅读更多...
SpringBoot解决用户重复提交订单（方式三：通过Redis实现-升级版）

SpringBoot解决用户重复提交订单（方式三：通过Redis实现-升级版）

文章目录前言1、方案实践1.1、引入Redis依赖1.2、添加Redis环境配置1.3、编写服务验证逻辑&#xff0c;通过 aop 代理方式实现1.4、在相关的业务接口上&#xff0c;增加SubmitLimit注解即可2、小结前言 在上一篇文章中&#xff0c;我们详细的介绍了随着下单流量逐渐上升&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023