怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，接口请求，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。 当然，这些问题并非不能克服，让我们来一起看看如何去监控并定位线上的问题吧。
这是搭建前端监控系统的第六章，主要是介绍如何使用js进行页面截屏和录屏，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。
===============================================================================
= 开源项目：前端监控系统 --- 只需要简单几步，就可以搭建一套属于自己的前端监控系统，快试试吧。 =
===============================================================================
用户使用App的时候，对于我们开发人员来说，就是一个黑匣子，因为你看不见也摸不着啊。 如果用户上报了一个错误，测试人员找到你让你解决，那你就是两眼一抹黑，因为很多线上问题是很难复现的。我问过很多前端工程师，他们的回答都是：如果你没法复现Bug，我怎么去解决这个Bug呢？你咋一想，好像说得很有道理啊，那么，我们有没有一个办法可以解决用户和前端程序员之间的障碍呢？
如果我们能够做到：用户使用我们app的过程中，不再是黑匣子，而是透明的。用户的页面长什么样，他们都做了什么操作，发生了什么错误，我们都能够清晰的知道，那么，再有问题上报的时候，我们就不会再显得那么力不从心了。
一、JS怎么实现截图呢？
如果用户在页面上产生一些特殊行为，比如报错，白屏的时候，我们想看看页面长什么样子的，就可以利用js截屏技术达到我们的目的。这样我们对用户当时的页面有个直观的感受，解决问题的时候也会的得心应手一些。
我们需要用到一个开源库叫 html2Canvas ，这个库的名字，我想大家也是耳熟能详了，毕竟git上辣么多颗星星呢。 关于他原理的介绍，有篇文章已经说得很详细了，如何实现web录屏。
既然我们可以对页面进行截图了，那么接下来的问题就是上传了。html2canvas的截图是图片数据，多则大几百Kb, 少则也有个上百Kb, 这么大的流量，对用户端，损耗确实过大。也许未来5G的大时代到了，这点流量根本不算什么，但是现在主要还是4g时代，这样的流量损耗不容忽视。所以我们需要对截图的质量有个选择，以下是我对我的网站进行的截图，分别用了三种压缩方式。
当然因为我的网站不支持手机版，丑了点，这不是重点哈，我主要看数据：
参数 截图方式一 截图方式二 截图方式三
字符串长度 11783 34047 68111
图片压缩率 72% 40% 0%
截图大小 23Kb 66Kb 133Kb
综上分析，截图方式一， 压缩率高，虽然截图不是很清晰，但是，也能够看得出，线上用户页面是什么样子的。而且，也解决了，在低端机上截图消耗性能过大的弊端，二十几Kb的流量，也是我们完全能够接受的大小了。由此可见，该方式能够满足我们追踪用户行为的需求了，当然，也可以适当的提高清晰度，以实际情况而定。
那么如何使用html2canvas进行截图呢，代码如下：
/**
* js处理截图
*/
this.screenShot = function (cntElem, callback) {
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 0.6; //定义任意放大倍数 支持小数
canvas.style.display = "none";
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(cntElem, opts).then(function(canvas) {
var dataURL = canvas.toDataURL();
var tempCompress = dataURL.replace("data:image/png;base64,", "");
var compressedDataURL = Base64String.compress(tempCompress);
callback(compressedDataURL);
});
}
二、JS怎么实现录屏？
Fundebug很久之前出了一个录屏功能，进入Fundebug首页，第一条便是 黑科技！支持录屏。 这下就惊呆我了，js做前端监控，居然还能录屏？ 你丫这是要逆天啊？ 所以，赶紧注册了账号，进行试用。 因为当时fundebug的录屏功能还在适用阶段，所以我还误以为是靠一连串的截图组成的视频，反倒惹人笑话