source map 简介(翻译)
原文地址： http://blog.teamtreehouse.com/introduction-source-maps?utm_source=CSS-Weekly&utm_campaign=Issue-91&utm_medium=email 翻译的不好，见谅。另注：关于文中提到的，这里有一篇中文的 介绍 译文： 我们常常使用一个提升站点性能的办法，就是把js文件和css文件打包压缩。但是压缩以后如果我们要调试或者修改呢？那简直是恶梦。不过，现在有一种可以部分解决这个问题的方式，叫做Source Map，我们翻译成源码图吧。 Source Map可以把压缩的文件转换成压缩前的样子。这就意味着，你可以尽管压缩你的代码，然后还可以方便的调试源码。现在chrome和firefox浏览器的开发工具已经支持SourceMap了。 本文介绍SourceMap的工作原理和生成方法，我们只介绍js的sourcemap。 备注：firefox默认支持SourceMap，Chrome浏览器需要手动开启支持。设置方法：在chrome浏览器的控制面板里（settings），里面的常规选项卡里有Enable js sourcemap 和Enable css source map 两个选项，勾选即可。 Source Map 工作方式 顾名思义,源图由一大堆信息组成,把压缩的代码转换成阅读的原始代码。您可以指定一个不同的源映射。做法就是把压缩的代码中加入一句注释： //# sourceMappingURL=/path/to/script.js.map 支持Source Map的js压缩工具会自动加入这句注释，浏览器只在开发工具打开的时候才会识这句注释并加载map文件（如果是chrome浏览器，则需要设置打开）。 map文件其实是一个json格式的文件，包含一些相关性的信息，示例如下： { version: 3, file: "script.js.map", sources: [ "app.js", "content.js", "widget.js" ], sourceRoot: "/", ...