Source Map介绍

在做网站性能优化的时候，我们经常会做js和css代码压缩。但是压缩之后的代码在调试的时候就会异常困难。source map就是解决问题的一种解决方案

浏览器source map

chrome sourcemap功能设置界面

source map 使用介绍和原理

第一种方式
在你的压缩文件末尾加上下面注释。如果你开了devtool并且开启了sourcemap功能，浏览器就会去加载这个map文件
```
//# sourceMappingURL=/path/to/script.js.map
```
第二种方式
在HTTP响应头上面设置X-SourceMap如下
```
X-SourceMap: /path/to/script.js.map
```
sourcemap文件格式基本介绍
```
{version: 3,file: "script.js.map",sources: ["app.js","content.js","widget.js"],"sourcesContent": [
" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require funct"],sourceRoot: "/",names: ["slideUp", "slideDown", "save"],mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}
```
- version：Source map的版本，目前为3。
- file：转换后的文件名。
- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
- sourceContent：转换前文件的内容。当没有配置sources的时候会使用该项
- names：转换前的所有变量名和属性名。
- mappings：一个base64 VLQ编码映射到真实代码位置的字符串。
  - mappings字符串用;分割的一组对应生成代码中的一行；
    每一组用,分割的一段对应生成代码中的一个位置信息；
    每一段里是5个数字的Base64 VLQ编码，比如[9,0,0,1,1]这5个数字的编码是SAACC：
    第0个数字，表示这个位置在生成代码的第几列；
    第1个数字，表示这个位置属于sources属性中的哪一个文件；
    第2个数字，表示这个位置属于原始代码的第几行；
    第3个数字，表示这个位置属于原始代码的第几列；
    第4个数字，表示这个位置属于names属性中的哪一个变量。这个数字不是必需的，可以省略。
    由于Base64 VLQ编码是变长的，所以每一段可以由多个字符构成。
    VLQ在线编码解码工具

浏览器支持

目前，Chrome、Firefox、Safari和IE11都支持Javascript和CSS的Source Map了，并且默认都是启用的，你可以用下面的方式确认一下。

参考链接

前端构建：Source Maps详解
An Introduction to Source Maps
阮一峰 JavaScript Source Map 详解
Introduction to JavaScript Source Maps
Source Map详解

Source Map介绍 -浏览器篇相关推荐

Source Map的原理探究
摘要: Source Map很神奇,它的原理挺复杂的- 原文:source map 的原理探究地址:https://www.cnblogs.com/Wayou/p/understanding_fro ...
Source Map入门教程
部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...
ts 打开sourcemap_调试篇 – Source Map - Node.js 调试指南
4.1.1 什么是 Source Map? 对于 Source Map,想必大家并不陌生,在前端开发中通常要压缩 JavaScript,CSS,以减小体积,加快网页显示.但带来的后果是如果出现错误,就 ...
【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
Source Maps介绍
结合并压缩你的JavaScript和CSS文件能够让你的网站更加优秀.但是,当你需要调试这些压缩文件中的代码就会变成一个噩梦.不要害怕,我们可以通过Source Maps解决这个问题. Source ...
.map文件源映射(Source Map)详解
一.什么是源映射为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场 ...
今天给在家介绍一篇健身俱乐部信息管理系统设计与实现
项目描述临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等.这里根据疫情当下,你 ...
大家介绍一篇学生选课系统的设计与实现
项目描述临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等.这里根据疫情当下,你 ...
今天给大家介绍一篇基基于SSM超市管理系统的设计与实现
项目描述临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等.这里根据疫情当下,你 ...

Source Map介绍 -浏览器篇

Source Map介绍 - 浏览器篇

Source Map介绍

浏览器source map

source map 使用介绍和原理

浏览器支持

参考链接

Source Map介绍 -浏览器篇相关推荐

最新文章

热门文章