压缩代码如何精准定位错误？兼容ie6-8+移动端的解决方案（上）

[lou1swu]

No description provided.

[lou1swu]

日常工作中，实际在编写代码的时间其实很少，我们会花很多的时间和精力在发现bug和解决bug上，�特别是低版本浏览器和移动端，如果能快速地定位bug，在效率上会提高很多，我们也可以有更多的时间去提升自己。

本文将提出一种可以辅助前端开发人员、测试人员高效定位ie6-8及移动端bug的解决方案
GitHub: https://github.com/Lighting-Jack/Jack-blog/issues/1

优化路径

利用sourcemap在压缩文件中去定位源文件错误

下图是一段压缩代码出错后，用window.onerror回调抓出来的错误信息，可以看到错误发生在压缩代码的第1行，第32列，而这不足以让开发人员可以一眼定位错误来源。

我们想要实现的可以直接在源文件去定位错误的位置，那么利用sourcemap就可以实现

1. 什么是sourcemap
   这里仅介绍sourcemap核心原理，详细请看阮一峰老师对sourcemap的解读
   sourcemap其实就是源文件和生成文件之间关于位置和内容的映射表，运用了base64-vlq的编码规则。VLQ编码是变长的。如果（整）数值在-15到+15之间（含两个端点），用一个字符表示；超出这个范围，就需要用多个字符表示。它规定，每个字符使用6个两进制位(引用自sourcemap的解读)
   
   这里介绍几个sourcemap解码工具

• base64-vlq在线解码器
• mozilla官方base64-vlq解码器
• source-map-builder (这个是我目前使用的)

2. 前端如何使用sourcemap

• sourcmap文件的生成
  gulp、grunt、webpack有生成sourcemap的插件
  gulp-sourcemaps
  grunt-contrib-uglify
  webpack
• sourcemap文件的解析
  这里分析的是把sourcemap文件放在前端来解析，以source-map-builder为例，对这个库的基本使用方法做个演示

<script src="./js/sourceMap.js"></script>
<script>
// sourcemap 映射表
var sourceMap = {
  version: 3,
  file: 'min.js',
  names: ['bar', 'baz', 'n'],
  sources: ['one.js', 'two.js'],
  sourceRoot: 'http://example.com/www/js/',
  mappings: 'CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA'
};
// 创建实例
var smb = new SourceMapBuilder(sourceMap);
// 解析出在压缩文件中第1行，第28列发生的bug在源文件中的位置等信息
var mappedResult = smb.getSource(1,28);
// { sourcePath: 'http://example.com/www/js/two.js',
//    line: 1,
//    column: 10,
//    name: 'n' 
//  }
</script>

如何获取发生bug的生成文件所对应的源文件

上一步我们已经可以找到生成文件中的bug在源文件中的位置，但是仅仅知道错误类型、错误行、错误列，并不足以让我们一目了然。
这个时候我们需要拉取源文件，把bug在源文件中的具体代码可视化。

1. 如何拉取源文件呢？

• 拉取js源文件
  优点：简便易用，工程化方面不用做什么改动，只要配置好源文件目录，在需要的时候拉取对应的源文件就好
  缺点：未压缩，体积大，占用不必要的带宽.......
• 拉取js源文件的压缩包
  优点：体积小
  缺点：工程化需要额外配置，前端需要将压缩包进行解压处理
• 利用sourcemap获取源文件
  优点：体积小
  缺点：暂无
  综合考虑：为了在请求源文件时能更快的响应，我选择第三种方案。

2. 前端如何在sourcemap中获取源文件？
   首先了解一下sourcemap文件的内容都有什么
   
   sourcemap中sourcesContent就对应于源文件的内容，我们要获取的也就是这部分的内容。

BTW. 前端如何处理压缩文件？
可以使用jszip-utils以Uint8Array格式获取压缩文件的内容，使用jszip来将Uint8Array格式的内容转换为String格式。
参考：How to read a file

// 拉取压缩文件

JSZipUtils.getBinaryContent("{源文件.zip}", function (err, data) {
    var zip = new JSZip();
    if (err) {
        return utils.log(err);
    }
    // 解压缩为string格式
    zip.loadAsync(data).then(function (data) { // ZipObject
        if(data.files&&data.files["{源文件名}"]) {
            zip.file({源文件名}).async('string').then(function success(text) { // 将压缩文件内容从Uint8Array格式转换为String格式
            // 获取到String格式的源文件后，进行排版和渲染
                                    
            }, function error(e) {
                return throw (e);
            })
        } else {
            // 找不到对应的压缩文件
        }

     });
});

以上就是本小节全部内容，下一小节将介绍，如何将错误可视化
压缩代码如何精准定位错误？兼容ie6-8+移动端的解决方案（下）

---

作者：Jack Wu
简介：关注前端性能优化、前端动画、webRTC