JavaScript sourceMap 笔记

不才 等级 505 0 0
标签: httpsJavascript

js source map

建议打开一个真实的项目的sourceMap对照食用

由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map

它是个什么东西

简单说,sourceMap就是一个文件,里面储存着位置信息。

仔细点说,这个文件里保存的,是转换后代码的位置,和对应的转换前的位置。

有了它,出错的时候,通过断点工具可以直接显示原始代码,而不是转换后的代码。

为什么有它

前端部署生产环境代码,一般可能出现下面几种情况,最后上线的代码和实际生产环境代码相差甚远,导致线上出问题无法进行调试定位错误

(1)压缩,减小体积。

(2)多个文件合并,减少HTTP请求数。

(3)其他语言编译成JavaScript。

怎么用它

webpack vue 生产环境

它的结构

xxx.js.map

- version:Source map的版本,目前为3。

- file:转换后的文件名。

- sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。

- sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。

- names:转换前的所有变量名和属性名。

- mappings:记录位置信息的字符串(主要部分)

- sourcesContent: 转换前的文件内容列表,与sources列表依次对应

mappings

它是一个很长的字符串,分为三层。

每个分号(;)对应转换后源码的一行;(行对应)
每个逗号(,)对应转换后源码的一个位置;(位置对应)
以VLQ编码表示,代表该位置对应的转换前的源码位置。(位置转换)

VLQ

举个🌰

mappings:"AACvB,gBAAgB,EAAE;AAClB"

就表示,转换后的源码分成两行,第一行有三个位置,第二行有一个位置

位置对应的原理
- 第一位,表示这个位置在(转换后的代码的)的第几列。

- 第二位,表示这个位置属于sources属性中的哪一个文件。

- 第三位,表示这个位置属于转换前代码的第几行。

- 第四位,表示这个位置属于转换前代码的第几列。

- 第五位,表示这个位置属于names属性中的哪一个变量。

有几点需要说明。

首先,所有的值都是以0作为基数的。其次,第五位不是必需的,如果该位置没有对应names属性中的变量,可以省略第五位。再次,每一位都采用VLQ编码表示;由于VLQ编码是变长的,所以每一位可以由多个字符构成。

如果某个位置是AAAAA,由于A在VLQ编码中表示0,因此这个位置的五个位实际上都是0。它的意思是,该位置在转换后代码的第0列,对应sources属性中第0个文件,属于转换前代码的第0行第0列,对应names属性中的第0个变量。

VLQ编码表

JavaScript  sourceMap 笔记

硬核 分析

console

源文件

console.log(123);

编译后的文件

console.log(123);
//# sourceMappingURL=1.js.map

map文件

{
  "version":3,
  "sources":["1.js"],
  "names":["console","log"],
  "mappings":"AAAAA,QAAQC,IAAI"
}

mappings 通过;分割 得到1行, 再通过,分割每一行得到位置 [3]

分析

AAAAA 0, 0, 0, 0, 0
QAAQC 16, 0, 0, 16, 2
IAAI 8, 0, 0, 8

0   1.js    0/0     console
16  1.js    0/16    log
8   1.js    0/8     

参考文章

JavaScript Source Map 详解
【JS基础】sourceMap是个啥

我的链接

不才's blog
不才 GitHub

收藏
评论区

相关推荐

What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
舒文:浅谈阿里前端的多样化
2007年,Jeff Atwood 提出了一个著名的观点, 戏谑又似认真地称其为 Atwood's Law(https://blog.codinghorror.com/theprincipleofleastpower/): _any application that can be written in JavaScript, will event
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写