JavaScript source map

我知道现在前端的JavaScript多数时候放在生产环境的时候，去进行压缩和混淆。

那如何在生产环境用debug JavaScript呢？这里就用到了map文件。

打开Source map文件，它大概是这个样子：

{

　　　　version : 3,

　　　　file: "out.js",

　　　　sourceRoot : "",

　　　　sources: ["foo.js", "bar.js"],

　　　　names: ["src", "maps", "are", "fun"],

　　　　mappings: "AAgBC,SAAQ,CAAEA"

}

整个文件就是一个JavaScript对象，可以被解释器读取。它主要有以下几个属性：

　　- version：Source map的版本，目前为3。

　　- file：转换后的文件名。

　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。

　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。

　　- names：转换前的所有变量名和属性名。

　　- mappings：记录位置信息的字符串。

一般现在有两种方法加入map文件进行调试。

1. 

打开Chrome DevTools，确保"Enable JavaScript source maps" 打开。

右击压缩JS文件，"Add source map"

2. 

使用 //# sourceURL= 和 //# sourceMappingURL= 这种形式加入压缩文件中。

确保同一目录下源文件，source map会加载源文件。

这样我们就可以在浏览器里调试压缩文件啦。

参考

https://www.cnblogs.com/Wayou/p/understanding_frontend_source_map.html