JavaScript sourceMap 笔记

不才 等级 793 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

收藏
评论区

相关推荐

JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
JS的另类写法(书签栏工具原型)
<script type="text/javascript"> javascript : void (function(version) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript';
Canvas + JavaScript 制作图片粒子效果
学习canvas,javascript的小伙伴,可以跟着我这篇文章的思路一起做一个小效果出来,代码都齐全了。 首先看一下源图和转换成粒子效果的对比图: ![Canvas + JavaScript 制作图片粒子效果](https://oscimg.oschina.net/oscnet/ded02015391ee81719a21ffa584785e84c2.
Console Api 让 JS 调试更简单、高效
> 所有Console Api  <script type="text/javascript"> console.dir(console); </script> ![](https://oscimg.oschina.net/oscnet/95a860f3d4ec5a09ee3f53761b64594745e.jpg)
Fundebug前端异常监控插件兼容低版本的Android浏览器
![](https://image.fundebug.com/2019-06-03-fundebug-javascript-upgrade.jpg) ### Fundebug前端BUG监控服务 [Fundebug](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.fundebug
JavaScript 踩坑心得— 为了高速(下)
#####**一.前言** 本文的上一篇 [JavaScript 踩坑心得— 为了高速(上)](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fnews.oneapm.com%2Fbi-javascript%2F) 主要和大家分享的是 JavaScript 使用过程中的基本原则以及编写过程中的
JavaScript中8个常见的陷阱
**译者按:** 漫漫编程路,总有一些坑让你泪流满面。 原文: [Who said javascript was easy ?](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fhackernoon.com%2Fwho-said-javascript-easy-f4a1d5b399b8)
JavaScript动画实例:李萨如曲线
        在“[JavaScript图形实例:阿基米德螺线](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwenku.baidu.com%2Fview%2F5c4a2dfb152ded630b1c59eef8c75fbfc77d94cf)”和“[JavaScript图形实例:曲线方
JavaScript在物联网中的应用
> 凡是能用JavaScript写出来的,最终都会用JavaScript写出来。 —— Atwood定律 在那篇《[最流行的编程语言JavaScript能做什么?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMjM5Mjg
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
PhotoShop脚本指南
**Photoshop脚本语言** Photoshop支持三种脚本语言:AppleScript,VBScript,JavaScript。其中AppleScript为苹果系统,VBScript为Windows操作系统,JavaScript兼容苹果和Windows操作系统。 ![](https://oscimg.oschina.net/oscnet/up-2
Python 与 Javascript 之比较
最近由于工作的需要开始开发一些Python的东西,由于之前一直在使用Javascript,所以会不自觉的使用一些Javascript的概念,语法什么的,经常掉到坑里。我觉得对于从Javascript转到Python,有必要总结一下它们之间的差异。 ### **基本概念** [Python](https://www.oschina.net/action/G