SourceMap简介

合并与压缩JavaScript和CSS的代码,是能为你的网站提升性能的最简单的举措之一。但是如果想要调试这些压缩过的文件,又会怎么样呢?那简直是噩梦了。

SourceMap(源代码映射)提供了一个映射,将压缩后的文件和原始文件联系起来。目前Chrome和Firefox开发者工具都内建支持源代码映射。Chrome开启SourceMap方法为:打开开发者工具(快捷键ctrl+shift+i),点击右上角的三个点进入设置,勾选Enable Javascript source maps选项。

  • 什么是SourceMap

简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。

  • 如何启用Source map

在转换后的代码尾部,加上一行代码就可以了,例如//@ sourceMappingURL=/path/to/file.js.map

  • Source map的格式

基本格式如下,可以查看JQ的Source map

{
    "version" : 3,
    "file": "jquery.min.js",
    "sourceRoot" : "",
    "sources": ["jquery.js"],
    "names": ["src", "maps", "are", "fun"],
    "mappings": "AAgBC,SAAQ,CAAEA"
}
// version:Source map的版本,目前为3
// file:转换后的文件名
// sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。
// sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。
// names:转换前的所有变量名和属性名。
// mappings:记录位置信息的字符串
  • mappings属性

例如文件http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js和文件http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.map就是通过map文件里面的mappings属性实现一一对应的。

mappings属性是一个很长的字符串,它分成三层:

第一层是行对应,以分号(;)表示,每个分号对应转换后源码的一行。第一个分号前的内容,就对应源码的第一行。第二个分号前的内容,就对应源码的第二行。有多少个分号,就表示源码有多少行加一。

第二层是位置对应,以逗号(,)表示,每个逗号对应转换后源码的一个位置。

第三层是位置转换,以VLQ编码表示,代表该位置对应的转换前的源码位置。

例如mappings属性的内容如下mappings:"AAAAA,BBBBB;CCCCC"就表示,转换后的源码分成两行,第一行有两个位置,第二行有一个位置。

  • 位置对应的原理

每个位置使用五位,表示五个字段。从左边算起

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

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

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

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

第五位,表示这个位置属于names属性中的哪一个变量。
Author:tenado
CeateTime:2019-02-26
Link:https://www.kelede.win/posts/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3SourceMap/
License:本站博文无特别声明均为原创,转载请保留原文链接及作者
Previous:PWA的概念以及用途 Next:YAML语言介绍