我知道現(xiàn)在前端的JavaScript多數(shù)時候放在生產(chǎn)環(huán)境的時候每强，去進行壓縮和混淆。
那如何在生產(chǎn)環(huán)境用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：轉(zhuǎn)換后的文件名恭应。
- sourceRoot：轉(zhuǎn)換前的文件所在的目錄。如果與轉(zhuǎn)換前的文件在同一目錄耘眨，該項為空昼榛。
- sources：轉(zhuǎn)換前的文件。該項是一個數(shù)組剔难，表示可能存在多個文件合并胆屿。
- names：轉(zhuǎn)換前的所有變量名和屬性名。
- mappings：記錄位置信息的字符串偶宫。
一般現(xiàn)在有兩種方法加入map文件進行調(diào)試非迹。
1.?
打開Chrome DevTools，確保"Enable JavaScript source maps" 打開读宙。
右擊壓縮JS文件彻秆，"Add source map"
2.?
使用?//# sourceURL=?和?//# sourceMappingURL=?這種形式加入壓縮文件中。
確保同一目錄下源文件结闸，source map會加載源文件唇兑。
這樣我們就可以在瀏覽器里調(diào)試壓縮文件啦。
參考
https://www.cnblogs.com/Wayou/p/understanding_frontend_source_map.html
