针对 Source Maps 的一篇介绍（翻译）

组合并且压缩你的JavaScript 和 CSS文件是提高性能最方便的方式之一。但是当你需要调试这些压缩后的代码的时候会发生什么呢？它可能是异常噩梦。不过不用怕，这里有一个通过source maps的name来解决的问题的方案。

source maps提供了一种将压缩后的文件代码映射到源文件的初始位置的方式。这意味着在软件的帮助下，你可以轻易的调试你的应用甚至在你已经做了代码优化（压缩）处理的情况下。谷歌以及火狐浏览器的开发者工具目前都内置了对source maps的支持。

这篇博客将告诉你source maps的工作原理以及如何生成。我们将主要关注JS的源映射，CSS的源映射也是相同原理。

注意：Firefox的开发人员工具默认启用对源映射的支持。您可能需要在Chrome中手动启用支持。要执行此操作，请启动Chrome开发工具并打开“ 设置”窗格（右下角的齿轮）。在常规选项卡中，确保启用JS源地图和启用CSS源的地图都打勾。

源映射的工作原理

顾名思义，源映射由一大堆文件组成，使压缩后的代码可以映射回源文件。你可以为每一个压缩后的文件提供不同的源映射。

通过在优化（压缩）后的文件的底部添加特殊注释，向浏览器提供可用的源映射。

//# sourceMappingURL=/path/to/script.js.map

此注释通常由用于生成源映射的程序添加。如果启用了对源映射的支持并且开发人员工具已打开，则开发人员工具将仅加载此文件。

您还可以通过X-SourceMap在压缩的JavaScript文件的响应中发送HTTP header来指定源映射。

X-SourceMap: /path/to/script.js.map

源映射文件包含一个JSON对象，其中包含有关映射本身和原始JavaScript文件的信息。这是一个简单的例子：

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}

让我们仔细看看每个属性。

version- 此属性指示文件所遵循的源映射规范的版本。
file - 源映射文件的名称。
sources - 原始源文件的URL数组。
sourceRoot- （可选）sources将解析数组中所有文件的URL 。
names - 包含源文件中所有变量和函数名称的数组。
mappings- 包含实际代码映射的Base64 VLQ字符串。（这是魔术发生的地方。）

使用UglifyJS生成源映射

UglifyJS是一个受欢迎的命令行工具，可以对你的文件进行组合压缩。版本2 支持大量的命令行标志用以生成source maps。

--source-map - 源映射的输出文件。
--source-map-root- （可选）这将填充sourceRoot地图文件中的属性。
--source-map-url - （可选）服务器上源映射的路径。这将被放在优化文件的注释中。//# sourceMappingURL=/path/to/script.js.map
--in-source-map - （可选）输入源映射。如果要压缩已从其他位置的源文件生成的JavaScript文件，这可能很有用。想想JavaScript库。
--prefix或-p- （可选）n从sources属性中显示的文件路径中删除多个目录。例如，-p 3将从文件路径中删除前三个目录，因此one/two/three/file.js将成为file.js。使用-p relative将使UglifyJS为您找出源地图和原始文件之间的相对路径。

如下示例：

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m

除此之外还有其他的工具可以用来生成source maps。列表如下：

谷歌浏览器开发者工具中的Source Maps

如果你正确设置了源映射，则应该会看到Sources选项卡的文件窗格中列出的每个原始JavaScript文件。

检查页面的HTML，确认仅引用了压缩的JavaScript文件。开发工具正在加载源映射文件，然后获取每个原始源文件。

火狐浏览器开发者工具中的Source Maps

Firefox用户可以在开发者工具的“ 调试器”选项卡中查看各个源文件。dev工具再次确定源映射可用，然后获取每个引用的源文件。

如果您希望查看压缩版本，请单击选项卡右上角的齿轮图标，然后取消选择 Show original sources（显示原始源）。

总结

使用Source Maps允许开发人员维护以及修复代码时，直接进行调试，同时优化其站点以提高性能。

针对 Source Maps 的一篇介绍（翻译）

源映射的工作原理

使用UglifyJS生成源映射

谷歌浏览器开发者工具中的Source Maps

火狐浏览器开发者工具中的Source Maps

总结

参考链接