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

[lou1swu]

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

如何将错误内容可视化

其实就是把错误代码所在的代码块给呈现出来，以字符串的形式或以图片的形式呈现出来

1. 以字符串的形式呈现
   由于错误代码所在的源文件可能会很大，将源文件全部内容渲染出来可能会导致可视化过程有较大延迟，所以我可视化的只是错误代码周围的内容，比如说：以错误代码为基线，向上和向下辐射10行。�
   但是这样是不准确的，开发人员想要的结果肯定是将错误代码所在的代码块呈现出来。那么如何选取代码块呢？

• 截取源文件
  从源码中截取部分内容来做分析。这里需要思考的是截取的范围，我的思考结果后续再补上，这里先暂时设置截取范围为25。
  比如说，错误代码所在行号为25，那么截取的范围就是 源文件 [0,50] 的内容。
• 生成映射表
  
  这张映射表描述的是错误代码所在行的缩进数以及该行行号的映射关系。
• 显示代码块
  
  大家看到这里，应该能发现，我定义代码块的方法就是根据缩进数。
  比如说，错误代码所在行的缩进数是8，那么将错误代码包裹起来的缩进数为4的代码块就是我要呈现的。当然如果需要呈现更多内容的话，我们可以将缩进数为0并且包裹错误代码的代码块呈现出来。

2. 以图片的形式呈现
   暂时想到的思路是用canvas来呈现，由于需要兼容ie6-8，暂时不讨论。

总结

在压缩代码中精准定位错误，我们需要经过3个阶段

1. 生成sourcemap文件
2. 解析sourcemap文件，获取错误内容所在的源文件内容和位置
3. 显示错误内容所在的代码块

优点：

1. 可视化错误；拒绝不同工种之间的甩锅，拒绝调试代码全靠感觉，提高开发、测试的效率
2. 精准定位错误；更快捷地定位错误发生的源头，更高效地解决错误

缺点：

1. 无法捕捉跨域脚本的错误；这个要解决的话需要运维对需要被监控的脚本开启cors，暂时先列入无法解决这一行
2. 通用性不高；这个方案对开发人员的代码规范有要求，比如单次缩进必须是4个空格，这个之后我想办法解决下

以上就是本小节全部内容
>上一节内容

---

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