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中一样的设备调试效果。远程调试工具很好的解决了开发因为本地无法复现，需要测试同学手上特定机器才能复现的问题，同时可以在远程看到页面实时运行的日志、接口等信息，大大提升问题定位效率。

下面是整个操作步骤：

**第一步：**如下图，点击页面中的悬浮球，出现远程调试按钮，点击可以开启远程调试。

**第二步：**在管理平台的远程列表中可以看到所有连接的设备。

**第三步：**远程查看，点击上一步骤中的inspect按钮，可以进入如下调试页面。

**第四步：**双向操作同步

在手机执行操作，远程界面同步发生变化，实时显示请求和日志，同样如果远程修改样式或者执行操作，手机端也会同步执行相同操作。

3.2 接入方式

3.3 实现原理

远程调试工具主要包括三个部分：客户端 ，中转服务 ，远程调试端(devtools)。

它们的运转模式如下图：

**第一步：**启动一个node服务作为中转服务器，然后创建webSocket服务用来连接客户端和远程调试端。

**第二步：**在客户端需要调试的网页中注入target.js 脚本，该脚本会创建 WebSocket 连接，通过订阅发布来监听DOM、Log、Network、Css、Storage、Debug等相关操作指令。

**第三步：**远程调试界面通过CDP（Chrome DevTools Protocol）协议来和服务进行通信，当执行控制模板某项操作时，比如点击DevTools中的"Elements"面板来检查页面元素，DevTools会通过CDP向服务发送一个命令，请求DOM树信息，服务接收到这个命令后，通过渲染进程查询具体的DOM信息，并将结果返回给DevTools，DevTools前端再将这些信息可视化呈现给开发者。

四、利剑三：WEB多人抓包代理工具

4.1 工具介绍

工作中经常需要抓包、代理等操作，主流的抓包工具有：Charles、Fiddler等，这些工具都必须安装客户端，且都是1对1的，对多人协助不是很友好。比如：开发需要获取测试同学的的抓包信息分析问题时，目前都是测试同学把报文导出来，发给开发，开发再去导入到工具里面进行分析。

在此背景下，我们就在思考，能否实现一个在线的抓包、代理平台，让大家使用方便、分享方便，降低门槛。于是就有了这款工具的诞生，工具是基于mitmproxy进行了二次开发，容器化部署了一套在线代理服务，只需通过浏览器就能实现抓包、代理等操作。

该在线抓包工具具备如下优势：

• 简单： 无需安装客户端，有浏览器就能使用，易上手。

• 方便： 直接在浏览器中进行抓包，而且可通过链接分享给他人。

• 易用： 支持断点、修改报文，集成了录制回放工具、远程调试工具，且支持开发、测试、线上环境任意切换。

4.2 使用简介

设置代理

用户可以通过手机安装的App扫描页面上二维码，建立连接，也可以直接在手机WIFI代理设置中输入固定的代理IP和端口号。

抓包、代理

代理成功后，自动跳转到抓包页面，页面中会显示当前设备，也支持新增设备，可以同时对多个设备进行抓包、代理。并且支持对报文的篡改及环境的代理。

工具注入

我们还在抓包工具中集成了上面的录制回放工具和远程调试工具，只需要打开开关，便会去识别入口html，动态注入工具的sdk，并进行初始化，这样用户再次刷新页面时，页面中便会出现工具的悬浮球。

环境切换

工作中还涉及到一个场景，在产品和UI验收时，由于验收环境都是在测试环境，需要配置host，对于产品和UI同学来讲，环境的配置其实是比较陌生的，为了方便验收，我们提供了一键切换环境的能力。用户只需要在页面上选择自己的项目，然后开启对应的环境，这样手机环境便能切换过来。

4.3 实现原理

在mitmproxy基础上，根据设备ip对拦截的请求进行分类，当用户查看抓包数据时，通过ip进行过滤，这样就可以只看到自己ip的抓包数据。

4.4 问题解决

4.4.1 如何实现1对N

既然是在线抓包服务，那每个人肯定都是独立的，不能相互影响，如何让1个代理服务支持多人操作就成了问题。

解决方案：

• 用户连接代理后，代理服务器可以获取到用户的IP地址，根据IP地址分别进行分发及报文存储。

• 前台查询时，终端ip地址作为入参，便只会查询当前ip相关的抓包信息。

• 前台修改报文、环境等信息时，代理服务器会根据ip分别存储修改后的信息。

4.4.2 性能问题

多人在线抓包时，报文数据量非常大，几十万甚至上百万条，而且单条报文数据量也非常的大，包括：请求头、响应头、响应内容等等，所以如何快速查询及展示就成了问题。

解决方案：

• 采用虚拟滚动列表，提升页面流畅性。

• 优化报文结构，列表只返回固定的几个字段，等点击时再去查询报文详情。

• 优化后，即使上万条报文也能很快返回，用户操作也不会卡顿。

// 报文结构
[{    "id": "ccae12b0-a4f9-4379-98df-03360b6a3912",    "s": 200,    "m": "POST",    "u": "https://bbs.vivo.com.cn/",    "z": 649,    "b": 1742888674.46417,    "e": 1742888674.51759  },  ...]

五、总结

整体回顾下，本文主要介绍了开发同学在项目中遇到的问题定位、沟通等痛点，通过对痛点的拆解和思考，孵化出三个在前端项目中提升效率的工具：

• 录制回放：精准还原问题出现的场景，提供分析问题所需的必要数据（环境、日志、抓包、操作过程等），提升解决问题的效率。

• 远程调试：远程直连真机进行调试，快速解决特定机型的问题。

• 多人抓包：让抓包变的更加便捷，在线即可完成，极大地提高了团队在抓包调试工作中的协作效率。

希望本文采取的方案以及解决问题的思路对你能有所帮助，也欢迎在评论区一起交流讨论。