JavaScript source map

2018-10-17  本文已影响0人  soulsun

我知道现在前端的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

上一篇下一篇

猜你喜欢

热点阅读