使用map来调试压缩混淆过的文件

最新推荐文章于 2024-05-13 17:15:40 发布

larrywangsun

最新推荐文章于 2024-05-13 17:15:40 发布

阅读量2.6k

点赞数 1

本文链接：https://blog.csdn.net/larrywangsun/article/details/28115867

版权

前端--工具专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.写个demo测试下map功能

第一步，生成压缩文件和map文件

代码结构如下:

test_map.js的代码如下

  var fs = require('fs');
  var uglifyjs = require("uglify-js");
  var result = uglifyjs.minify("../js/zepto.js", {
      outSourceMap: "zepto.min.js",
      sourceRoot:'../js/'
  });

  fs.writeFile('../js/zepto.min.js', result.code, function(){
      console.log('uglify js success!');
  });

  fs.writeFile('../js-map/zepto.js.map', result.map, function(){
      console.log('uglify map success!');
  });

执行test_map.js，生成zepto.min.js和zepto.js.map这两个文件
执行test_map.js
```
node test_map.js
```
生产的新文件的路径如下：

第二步，修改压缩文件和map文件，将zepto.min.js文件和zepto.js.map关联起来。

在zepto.min.js中末尾加上这么一行

//@ sourceMappingURL=../js-map/zepto.js.map

第三步，开启chrome的map调试功能

第四步，写个demo.html并将代码放到apache下，进行调试

将上面uglify-js-map下的代码放到apache根目录下，写一个demo.html用来测试，位置如上图所示，代码如下：

<!DOCTYPE html><html><head>
    <title></title></head><body><script type="text/javascript" src="../js/zepto.min.js"></script><script type="text/javascript">
    Zepto('body').append('<p>success</p>');
</script></body></html>

通过url http://localhost/uglify-js-map/html/demo.html 进行测试；如果我们跟进到Zepto函数的内部，我们会发现，我们看到的是没压缩过的文件。

2.map文件说明

上面demo中生产的zepto.js.map的内容如下

{
    "version":3,
    "file":"zepto.min.js",
    "sources":["../js/zepto.js"],
    "names":["Zepto","type","obj","String",... "nativeGetComputedStyle"],
    "mappings":"AAGA,GAAIA,OAAQ,..."UAIZrF",
    "sourceRoot":"../js/"
}

version：Source map的版本，目前为3。
file：转换后的文件名。
sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
names：转换前的所有变量名和属性名。（太长啦，这里只列了一部分）
mappings：记录位置信息的字符串，下文详细介绍。（太长啦，这里只列了一部分）

3.zepto.min.js是如何和zepto.js关联起来的

参考：
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

larrywangsun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用map来调试压缩混淆过的文件

1.写个demo测试下map功能第一步，生成压缩文件和map文件代码结构如下:test_map.js的代码如下 var fs = require('fs'); var uglifyjs = require("uglify-js"); var result = uglifyjs.minify("../js/zepto.js", {
复制链接

扫一扫

专栏目录