提高网站性能最简单的方式之一是合并压缩JavaScript和CSS文件。但是当你需要调试这些压缩文件中的代码时，那将会是一场噩梦。不过也不用担心，souce maps将会帮你解决这一问题。
Source map提供了一种方式，能够将压缩文件中的代码映射回源文件中对应的位置。这意味着，你可以借助一些软件很轻易地调试应用程序中那些经过优化处理过的资源。Chrome和Firefox提供的开发者工具都内置了对source maps的支持。
本文将介绍source maps的工作原理，以及如何生成它们。我们将主要关注JavaScript代码的source maps，不过这些原理也同样适用于CSS。
提示：Firefox开发者工具中的source maps默认是开启的。对于Chrome而言，你可能需要手动启用这一功能（译者：目前看来，Chrome中这一功能默认也是开启的）。在Chrome中打开开发者工具（译者：默认的快捷键是F12），然后找到“设置”面板（译者：开发者工具面板的右上角，点击有三个点的菜单，其中可以找到“Settings”菜单），在“General”选项卡中勾选“Enable JS source maps”和“Enable CSS source maps”（译者：我所使用的Chrome版本中，这两个设置项在“Preferences”选项卡中）。
顾名思义，source map中包含了许多能够将压缩文件中的代码映射回源代码的信息。对于每一个压缩文件，你可以为其指定不同的source map。
通过在经过优化的压缩文件的末尾添加一行特殊的注释，来告诉浏览器有可用的source map。
//# sourceMappingURL=http://www.likecs.com/path/to/script.js.map