关于前端页面监控工具的设想和实践

目录

前言：

关于前端页面监控工具的设想和实践

想法产生背景

寻找解决方案

为什么重造轮子

重造轮子

页面样式收集工具

数据、对比和报告

---

前言：

在前端开发中，我们经常需要监控页面的性能和状态，以便快速发现和解决潜在的问题。但是，由于页面的构建方式和数据来源多样，我们需要一种可靠的方法来监控页面的状态和性能。

关于前端页面监控工具的设想和实践

---

必读：本人语文作文没及过格，请见谅

想法产生背景

　　公司背景：
　　游戏媒体公司

　　想法产生的原因：
　　领导让我每天检查已上线的 web 项目，其实就是查看样式是否有会问题，我粗略算了一下，每天需要检查 50-60 个页面，这需要大量的检查时间，所以我需要一个检查页面样式的工具，来替我检查页面样式，我只需要查看最后的结果。

　　为什么页面样式会产生错误？
　　原因 1.人为原因，因为后台限制不足或没有限制，导致人工录入时错误，比如该填写的字段没有填写，填写的字段参数错误等。
　　原因 2.开发修改导致。因为开发动了项目 1 的线上代码，而项目 2 使用了项目 1 的部分功能。导致项目 1 出错。
　　原因 3.我想不起来了...

寻找解决方案

　　既然有了需求，我们就需要寻找工具，来解决目前的问题。
　　工欲善其事必先利其器。目前页面回归有两个方向：图片对比和 DOM 对比

　　图片对比
　　图片对比就是截取页面的部分图片，与历史图片对比，通过阀值来提示是否出错。工具有 PhantomCSS 等。

图片引用自参考

　　图片对比的缺点：文字较多，图片内容较少的页面不太试用。经常变换的图片不适用
　　
　　图片对比适用于局部的检查。

　　DOM 对比
　　个人觉得 dom 对比更适合页面回归的检查。同样是于历史记录进行对比。通过结构的变化，如新增节点、删除的节点、样式变化来监控页面。工具有：page-monitor

图片引用自参考

<