vivo前端三剑客发展历程和原理究竟是怎样的？

作者： vivo 互联网前端团队- Han Xuejian、Zhang Hao 异地协作模式，给开发和测试间的问题沟通及定位带来了诸多挑战。本文从前端开发视角出发， 阐述在这过程中遇到的痛点，探索解决的思路，并在过程中成功孵化出技术工具“前端三剑客”，文章深入解析了“前端三剑客”技术的实现原理及应用场景。 1分钟看图掌握核心观点 一、背景 随着公司业务的不断发展，异地协作成为一种常态，距离无疑给我们的沟通带来了很多不便，尤其是给问题反馈及解决增加了更多的成本，在这过程中我们遇到了很多痛点： 痛点一：沟通效率低 开发和测试只能通过消息或者电话进行沟通，为了将问题描述清晰，双方需要反复交流，有时还需提供录屏、截图以及抓包等信息，整个过程耗时长、效率低。 痛点二：复现难、定位难 经常会出现一些问题，开发在本地无法复现，需要使用特定的手机进行复现、解决。 痛点三：抓包协作难 分析问题时，经常需要抓包，但是目前主流的抓包工具都是1对1，对于异地实时抓包不是很方便，而且分享抓包内容也比较繁琐，无法在线实时查看。 为解决这些问题，我们基于开源工具与自研技术栈，孵化出前端三剑客： 利剑一：录制回放工具 - 让沟通更简单 利剑二：远程调试工具 - 像本地调试一样调试远程机器 利剑三：WEB多人抓包代理工具 - 在线抓包，更简单、更实时、更便捷 这是一套覆盖问题复现、远程调试、便捷抓包的一整套解决方案，助力开发人员快速、精准地分享解决问题。 二、利剑一：录制回放工具 2.1 工具介绍 对于前端开发而言，和测试沟通问题时，问的最多的几个问题： 你是怎么操作的？ 控制台有什么报错吗？ 抓个包给我看下接口请求数据吧？ 总结归纳起来就是以下三点： 基于以上的述求，我们基于开源框架rrweb，实现了从前台接入管理、后台回放管理及权限管控的一站式录制回放平台，接入简单，一键便可录制宿主信息、操作过程、接口信息、日志信息等数据。 录制过程 接入录制回放工具后，页面会出现一个悬浮球，用于开启和提交录制信息，录制完成后，会生成在线回放地址。录制过程如下图所示： 回放过程 录制成功后，后台管理系统中便能查询到该条录制信息，点击回放，可以看到该问题的操作过程，以及浏览器信息、接口信息、日志信息等数据，如下图所示： 整个操作的流程如下图： 2.2 接入方式 我们提供了一个在线sdk，用户只需引入该js文件，进行初始化即可使用： 2.3 实现原理 记录页面 DOM 变化 录制过程： 在初始化时使用document.cloneNode(true) 方获取页面的全量 DOM 快照，之后通过 Mutation- Observer 监听器监控页面的各种变化，如 DOM 的增删改、鼠标移动、滚动以及页面大小调整等，当这些变化发生时，会将变化信息序列化为 JSON 格式的数据并存储起来。 回放过程：读取记录的 JSON 数据，解析出页面的初始快照以及各个操作事件的时间序列，根据初始快照重建页面的 DOM 树，然后按照事件的时间顺序逐步应用每个操作事件。 接口录制 通过对全局XMLHttpRequest进行重写进行接口的拦截处理。 日志录制 通过对全局console.log进行重写 2.4 遇到的问题 问题1：跨页面录制 我们是通过在index.html中引入sdk，对于单页应用，切换路由时，录制可以连贯的衔接上，但是当遇到多页面的应用时，切换页面，会重新加载sdk，这样数据就会丢失，无法进行衔接，所以我们需要在切换页面时将录制数据存在本地，进入下一个页面时，获取这些数据进行合并，如下图： 问题2：iframe页面无法录制 对于很多后台的项目，可能存在很多iframe嵌入的子项目，如果iframe中的内容与父页面不在同一个域下，为了能够正常录制iframe中的内容，需要进行跨域处理，在iframe的页面中也嵌入sdk，并设置相应的跨域属性，记录数据，并通过iframe.content- Window.postMessage来同步数据到主页面中。 三、利剑二：远程调试工具 3.1 工具介绍 远程调试工具是基于开源工具chii进行二次封装，相较于vConsole,chii让跨设备、跨网络的Web应用调试变得简单便捷。通过远程连接的方式，像本地数据线连接手机一样，在本地的chrome Devtools中进行问题定位，实现和在chrome://inspect中一样的设备调试效果。远程调试工具很好的解决了开发因为本地无法复现，需要测试同学手上特定机器才能复现的问题，同时可以在远程看到页面实时运行的日志、接口等信息，大大提升问题定位效率。