vivo 前端三剑客发展历程及原理揭秘
<blockquote data-first-child="" data-pid="bJaZV84U">作者： vivo 互联网前端团队- Han Xuejian、Zhang Hao<br>异地协作模式，给开发和测试间的问题沟通及定位带来了诸多挑战。本文从前端开发视角出发， 阐述在这过程中遇到的痛点，探索解决的思路，并在过程中成功孵化出技术工具“前端三剑客”，文章深入解析了“前端三剑客”技术的实现原理及应用场景。</blockquote><p data-pid="RUGwXq7J">1分钟看图掌握核心观点</p>
<div class="GifPlayer css-1isopsn" data-size="normal" data-za-detail-view-path-module="GifItem"><img alt="动图封面" width="640" class="ztext-gif lazyload" data-thumbnail="https://picx.zhimg.com/v2-c62b7340099b45eb764797236da163ee_720w.jpg?source=d16d100b" data-size="normal" data-src="https://picx.zhimg.com/v2-c62b7340099b45eb764797236da163ee_720w.jpg?source=d16d100b">
<div class="GifPlayer-icon css-d39tw7"> </div>
</div>
<h2>一、背景</h2>
<p data-pid="GmVJCFUd">随着公司业务的不断发展，异地协作成为一种常态，距离无疑给我们的沟通带来了很多不便，尤其是给问题反馈及解决增加了更多的成本，在这过程中我们遇到了很多痛点：</p>
<p data-pid="gANvekwV">痛点一：沟通效率低</p>
<p data-pid="3O5UduIO">开发和测试只能通过消息或者电话进行沟通，为了将问题描述清晰，双方需要反复交流，有时还需提供录屏、截图以及抓包等信息，整个过程耗时长、效率低。</p>
<p data-pid="E3qPg-TA">痛点二：复现难、定位难</p>
<p data-pid="auEzBbAD">经常会出现一些问题，开发在本地无法复现，需要使用特定的手机进行复现、解决。</p>
<p data-pid="_N_2jbzf">痛点三：抓包协作难</p>
<p data-pid="FumGqyRz">分析问题时，经常需要抓包，但是目前主流的抓包工具都是1对1，对于异地实时抓包不是很方便，而且分享抓包内容也比较繁琐，无法在线实时查看。</p>
<p data-pid="q2EdRuZC">为解决这些问题，我们基于开源工具与自研技术栈，孵化出前端三剑客：</p>
<ul>
<li data-pid="4WeioEy0">利剑一：录制回放工具 - 让沟通更简单</li>
<li data-pid="CV3H5Xm_">利剑二：远程调试工具 - 像本地调试一样调试远程机器</li>
<li data-pid="-1qT8u8i">利剑三：WEB多人抓包代理工具 - 在线抓包，更简单、更实时、更便捷</li>
</ul>
<p data-pid="q1g0lfq-">这是一套覆盖问题复现、远程调试、便捷抓包的一整套解决方案，助力开发人员快速、精准地分享解决问题。</p>
<h2>二、利剑一：录制回放工具</h2>
<h2>2.1 工具介绍</h2>
<p data-pid="0_dednh_">对于前端开发而言，和测试沟通问题时，问的最多的几个问题：</p>
<ul>
<li data-pid="0lxM-AkN">你是怎么操作的？</li>
<li data-pid="8EoJiBTA">控制台有什么报错吗？</li>
<li data-pid="FPq7irT9">抓个包给我看下接口请求数据吧？</li>
</ul>
<p data-pid="FcmKLvpK">总结归纳起来就是以下三点：</p>
<img width="897" height="125" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="897" data-rawheight="125" data-original="https://picx.zhimg.com/v2-a90583115ae4c036fccb8216524bb400_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-a90583115ae4c036fccb8216524bb400_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-a90583115ae4c036fccb8216524bb400_720w.webp?source=d16d100b">
<p data-pid="EG3sfMvZ">基于以上的述求，我们基于开源框架rrweb，实现了从前台接入管理、后台回放管理及权限管控的一站式录制回放平台，接入简单，一键便可录制宿主信息、操作过程、接口信息、日志信息等数据。</p>
<p data-pid="L0uKTnzd">录制过程</p>
<p data-pid="31GJ582B">接入录制回放工具后，页面会出现一个悬浮球，用于开启和提交录制信息，录制完成后，会生成在线回放地址。录制过程如下图所示：</p>
<div class="GifPlayer css-1isopsn" data-size="normal" data-za-detail-view-path-module="GifItem"><img alt="动图封面" width="640" class="ztext-gif lazyload" data-thumbnail="https://pic1.zhimg.com/v2-b45abf6bda46749523f21e2d0caeb78f_720w.jpg?source=d16d100b" data-size="normal" data-src="https://pic1.zhimg.com/v2-b45abf6bda46749523f21e2d0caeb78f_720w.jpg?source=d16d100b">
<div class="GifPlayer-icon css-d39tw7"> </div>
</div>
<p data-pid="byTYeK6E">回放过程</p>
<p data-pid="DiqLVCXf">录制成功后，后台管理系统中便能查询到该条录制信息，点击回放，可以看到该问题的操作过程，以及浏览器信息、接口信息、日志信息等数据，如下图所示：</p>
<div class="GifPlayer css-1isopsn" data-size="normal" data-za-detail-view-path-module="GifItem"><img alt="动图封面" width="720" class="ztext-gif lazyload" data-thumbnail="https://picx.zhimg.com/v2-75caf9a39ebf685f3d4ddc81d4bfbd68_720w.jpg?source=d16d100b" data-size="normal" data-src="https://picx.zhimg.com/v2-75caf9a39ebf685f3d4ddc81d4bfbd68_720w.jpg?source=d16d100b">
<div class="GifPlayer-icon css-d39tw7"> </div>
</div>
<p data-pid="oucVR4sJ">整个操作的流程如下图：</p>
<img width="1584" height="462" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1584" data-rawheight="462" data-original="https://picx.zhimg.com/v2-5cd58001d5e0befb4ed6c15bfb742ca6_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-5cd58001d5e0befb4ed6c15bfb742ca6_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-5cd58001d5e0befb4ed6c15bfb742ca6_720w.webp?source=d16d100b">
<h2>2.2 接入方式</h2>
<p data-pid="B5dVFQFF">我们提供了一个在线sdk，用户只需引入该js文件，进行初始化即可使用：</p>
<img width="825" height="356" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="825" data-rawheight="356" data-original="https://picx.zhimg.com/v2-2665acf402cba4ad206ca22e7126a19e_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-2665acf402cba4ad206ca22e7126a19e_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-2665acf402cba4ad206ca22e7126a19e_720w.webp?source=d16d100b">
<h2>2.3 实现原理</h2>
<p data-pid="zwHjgdee">记录页面 DOM 变化</p>
<p data-pid="ZBmcUteP">录制过程：</p>
<p data-pid="W8GF3r9z">在初始化时使用document.cloneNode(true) 方获取页面的全量 DOM 快照，之后通过 Mutation-</p>
<p data-pid="-rOfLpAX">Observer 监听器监控页面的各种变化，如 DOM 的增删改、鼠标移动、滚动以及页面大小调整等，当这些变化发生时，会将变化信息序列化为 JSON 格式的数据并存储起来。</p>
<p data-pid="thyarUt8">回放过程：读取记录的 JSON 数据，解析出页面的初始快照以及各个操作事件的时间序列，根据初始快照重建页面的 DOM 树，然后按照事件的时间顺序逐步应用每个操作事件。</p>
<img width="1080" height="418" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="418" data-original="https://picx.zhimg.com/v2-9711ce74d396438ab2187dd08d11ebd7_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-9711ce74d396438ab2187dd08d11ebd7_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-9711ce74d396438ab2187dd08d11ebd7_720w.webp?source=d16d100b">
<p data-pid="XKqxBPY9">接口录制</p>
<p data-pid="qzqohPLa">通过对全局XMLHttpRequest进行重写进行接口的拦截处理。</p>
<img width="1080" height="703" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="703" data-original="https://pic1.zhimg.com/v2-94bb961d10b315721f7d2500ea23d682_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-94bb961d10b315721f7d2500ea23d682_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-94bb961d10b315721f7d2500ea23d682_720w.webp?source=d16d100b">
<p data-pid="B8mf3cjH">日志录制</p>
<p data-pid="3a12RLIY">通过对全局console.log进行重写</p>
<img width="1080" height="632" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="632" data-original="https://picx.zhimg.com/v2-32ff6a108231a555afe52bf4a3751366_r.jpg?source=d16d100b" data-actualsrc="https://pica.zhimg.com/v2-32ff6a108231a555afe52bf4a3751366_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://pica.zhimg.com/80/v2-32ff6a108231a555afe52bf4a3751366_720w.webp?source=d16d100b">
<h2>2.4 遇到的问题</h2>
<p data-pid="MuyUkHcI">问题1：跨页面录制</p>
<p data-pid="SZ00ll6w">我们是通过在index.html中引入sdk，对于单页应用，切换路由时，录制可以连贯的衔接上，但是当遇到多页面的应用时，切换页面，会重新加载sdk，这样数据就会丢失，无法进行衔接，所以我们需要在切换页面时将录制数据存在本地，进入下一个页面时，获取这些数据进行合并，如下图：</p>
<img width="1080" height="365" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="365" data-original="https://picx.zhimg.com/v2-70ad56c24d7961a192e1c0871a8e5636_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-70ad56c24d7961a192e1c0871a8e5636_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-70ad56c24d7961a192e1c0871a8e5636_720w.webp?source=d16d100b">
<p data-pid="OoDETOCd">问题2：iframe页面无法录制</p>
<p data-pid="MTFlbxt9">对于很多后台的项目，可能存在很多iframe嵌入的子项目，如果iframe中的内容与父页面不在同一个域下，为了能够正常录制iframe中的内容，需要进行跨域处理，在iframe的页面中也嵌入sdk，并设置相应的跨域属性，记录数据，并通过iframe.content-</p>
<p data-pid="_hUey9RX">Window.postMessage来同步数据到主页面中。</p>
<h2>三、利剑二：远程调试工具</h2>
<h2>3.1 工具介绍</h2>
<p data-pid="cNtpCXgX">远程调试工具是基于开源工具chii进行二次封装，相较于vConsole,chii让跨设备、跨网络的Web应用调试变得简单便捷。通过远程连接的方式，像本地数据线连接手机一样，在本地的chrome Devtools中进行问题定位，实现和在chrome://inspect中一样的设备调试效果。远程调试工具很好的解决了开发因为本地无法复现，需要测试同学手上特定机器才能复现的问题，同时可以在远程看到页面实时运行的日志、接口等信息，大大提升问题定位效率。</p>
<p data-pid="8KVCeFMz">下面是整个操作步骤：</p>
<p data-pid="ATss3EJH">第一步：如下图，点击页面中的悬浮球，出现远程调试按钮，点击可以开启远程调试。</p>
<img width="1080" height="2400" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="2400" data-original="https://picx.zhimg.com/v2-0c1df6d88ccdd8011f2803a25f2e1b9b_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-0c1df6d88ccdd8011f2803a25f2e1b9b_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-0c1df6d88ccdd8011f2803a25f2e1b9b_720w.webp?source=d16d100b">
<p data-pid="IT2wFh1z">第二步：在管理平台的远程列表中可以看到所有连接的设备。</p>
<img width="1080" height="500" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="500" data-original="https://pic1.zhimg.com/v2-c6b0140547e7bc8e66413c2ca580cc03_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-c6b0140547e7bc8e66413c2ca580cc03_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-c6b0140547e7bc8e66413c2ca580cc03_720w.webp?source=d16d100b">
<p data-pid="F1FuCt5w">第三步：远程查看，点击上一步骤中的inspect按钮，可以进入如下调试页面。</p>
<img width="1080" height="525" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="525" data-original="https://picx.zhimg.com/v2-af8d84d7cfb325cb1d57177e9a323057_r.jpg?source=d16d100b" data-actualsrc="https://pica.zhimg.com/v2-af8d84d7cfb325cb1d57177e9a323057_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://pica.zhimg.com/80/v2-af8d84d7cfb325cb1d57177e9a323057_720w.webp?source=d16d100b">
<p data-pid="j7zd7Tmu">第四步：双向操作同步</p>
<p data-pid="same-L2u">在手机执行操作，远程界面同步发生变化，实时显示请求和日志，同样如果远程修改样式或者执行操作，手机端也会同步执行相同操作。</p>
<h2>3.2 接入方式</h2>
<img width="825" height="318" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="825" data-rawheight="318" data-original="https://pic1.zhimg.com/v2-ff77b032728dcbbc4f9bc9af33c07856_r.jpg?source=d16d100b" data-actualsrc="https://pic1.zhimg.com/v2-ff77b032728dcbbc4f9bc9af33c07856_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-ff77b032728dcbbc4f9bc9af33c07856_720w.webp?source=d16d100b">
<h2>3.3 实现原理</h2>
<p data-pid="Q4rVDi-g">远程调试工具主要包括三个部分：客户端，中转服务，远程调试端(devtools)。</p>
<p data-pid="Kzi58FDK">它们的运转模式如下图：</p>
<img width="1080" height="406" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="406" data-original="https://picx.zhimg.com/v2-b4ccdc2c9ed688c07d8e6b59cfb01031_r.jpg?source=d16d100b" data-actualsrc="https://pic1.zhimg.com/v2-b4ccdc2c9ed688c07d8e6b59cfb01031_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-b4ccdc2c9ed688c07d8e6b59cfb01031_720w.webp?source=d16d100b">
<p data-pid="RI0X5BkT">第一步：启动一个node服务作为中转服务器，然后创建webSocket服务用来连接客户端和远程调试端。</p>
<img width="644" height="430" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="644" data-rawheight="430" data-original="https://picx.zhimg.com/v2-e5c30be1bf8e83ab6da7b86f8c82e6bf_r.jpg?source=d16d100b" data-actualsrc="https://pica.zhimg.com/v2-e5c30be1bf8e83ab6da7b86f8c82e6bf_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://pica.zhimg.com/80/v2-e5c30be1bf8e83ab6da7b86f8c82e6bf_720w.webp?source=d16d100b">
<p data-pid="Z937yGFW">第二步：在客户端需要调试的网页中注入target.js 脚本，该脚本会创建 WebSocket 连接，通过订阅发布来监听DOM、Log、Network、Css、Storage、Debug等相关操作指令。</p>
<img width="584" height="446" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="584" data-rawheight="446" data-original="https://pica.zhimg.com/v2-5fb76ec0396914cf8c69653d3669be9f_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-5fb76ec0396914cf8c69653d3669be9f_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-5fb76ec0396914cf8c69653d3669be9f_720w.webp?source=d16d100b">
<p data-pid="-77FMrBZ">第三步：远程调试界面通过CDP（Chrome DevTools Protocol）协议来和服务进行通信，当执行控制模板某项操作时，比如点击DevTools中的“Elements”面板来检查页面元素，DevTools会通过CDP向服务发送一个命令，请求DOM树信息，服务接收到这个命令后，通过渲染进程查询具体的DOM信息，并将结果返回给DevTools，DevTools前端再将这些信息可视化呈现给开发者。</p>
<h2>四、利剑三：WEB多人抓包代理工具</h2>
<h2>4.1 工具介绍</h2>
<p data-pid="ISajaoSb">工作中经常需要抓包、代理等操作，主流的抓包工具有：Charles、Fiddler等，这些工具都必须安装客户端，且都是1对1的，对多人协助不是很友好。比如：开发需要获取测试同学的的抓包信息分析问题时，目前都是测试同学把报文导出来，发给开发，开发再去导入到工具里面进行分析。</p>
<p data-pid="HF4wLFAP">在此背景下，我们就在思考，能否实现一个在线的抓包、代理平台，让大家使用方便、分享方便，降低门槛。于是就有了这款工具的诞生，工具是基于mitmproxy进行了二次开发，容器化部署了一套在线代理服务，只需通过浏览器就能实现抓包、代理等操作。</p>
<p data-pid="2R9mytpt">该在线抓包工具具备如下优势：</p>
<ul>
<li data-pid="rAJN3REi">简单： 无需安装客户端，有浏览器就能使用，易上手。</li>
<li data-pid="Qsk0mTKN">方便： 直接在浏览器中进行抓包，而且可通过链接分享给他人。</li>
<li data-pid="c8eyQQbj">易用： 支持断点、修改报文，集成了录制回放工具、远程调试工具，且支持开发、测试、线上环境任意切换。</li>
</ul>
<h2>4.2 使用简介</h2>
<p data-pid="2URtjsdo">设置代理</p>
<p data-pid="-SHHk73s">用户可以通过手机安装的App扫描页面上二维码，建立连接，也可以直接在手机WIFI代理设置中输入固定的代理IP和端口号。</p>
<img width="1080" height="687" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="687" data-qrcode-action="none" data-original="https://pica.zhimg.com/v2-6d7fddbd43c2a43470dfea7d8eabd5f7_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-6d7fddbd43c2a43470dfea7d8eabd5f7_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-6d7fddbd43c2a43470dfea7d8eabd5f7_720w.webp?source=d16d100b">
<p data-pid="BPrbUMQb">抓包、代理</p>
<p data-pid="iyZnnlwk">代理成功后，自动跳转到抓包页面，页面中会显示当前设备，也支持新增设备，可以同时对多个设备进行抓包、代理。并且支持对报文的篡改及环境的代理。</p>
<img width="1080" height="663" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="663" data-original="https://pic1.zhimg.com/v2-163ad360912c7272fc33e0e5a30e61fb_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-163ad360912c7272fc33e0e5a30e61fb_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-163ad360912c7272fc33e0e5a30e61fb_720w.webp?source=d16d100b">
<p data-pid="HEwavUr3">工具注入</p>
<p data-pid="uk_RiraH">我们还在抓包工具中集成了上面的录制回放工具和远程调试工具，只需要打开开关，便会去识别入口html，动态注入工具的sdk，并进行初始化，这样用户再次刷新页面时，页面中便会出现工具的悬浮球。</p>
<img width="1080" height="663" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="663" data-original="https://picx.zhimg.com/v2-59d5102f158d3060a1b2d0e155af59f0_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-59d5102f158d3060a1b2d0e155af59f0_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-59d5102f158d3060a1b2d0e155af59f0_720w.webp?source=d16d100b">
<p data-pid="9w-17S05">环境切换</p>
<p data-pid="Ri2Xsa0P">工作中还涉及到一个场景，在产品和UI验收时，由于验收环境都是在测试环境，需要配置host，对于产品和UI同学来讲，环境的配置其实是比较陌生的，为了方便验收，我们提供了一键切换环境的能力。用户只需要在页面上选择自己的项目，然后开启对应的环境，这样手机环境便能切换过来。</p>
<img width="1080" height="663" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="663" data-original="https://pic1.zhimg.com/v2-3455e6865514a331b7f8832a03daafb3_r.jpg?source=d16d100b" data-actualsrc="https://pica.zhimg.com/v2-3455e6865514a331b7f8832a03daafb3_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://pica.zhimg.com/80/v2-3455e6865514a331b7f8832a03daafb3_720w.webp?source=d16d100b">
<h2>4.3 实现原理</h2>
<p data-pid="UF0YpOe2">在mitmproxy基础上，根据设备ip对拦截的请求进行分类，当用户查看抓包数据时，通过ip进行过滤，这样就可以只看到自己ip的抓包数据。</p>
<img width="1080" height="567" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1080" data-rawheight="567" data-original="https://pica.zhimg.com/v2-ada0c4643bfe12193c0cb67807c2a744_r.jpg?source=d16d100b" data-actualsrc="https://picx.zhimg.com/v2-ada0c4643bfe12193c0cb67807c2a744_720w.jpg?source=d16d100b" data-lazy-status="ok" data-src="https://picx.zhimg.com/80/v2-ada0c4643bfe12193c0cb67807c2a744_720w.webp?source=d16d100b">
<h2>4.4 问题解决</h2>
<h3>4.4.1 如何实现1对N</h3>
<p data-pid="shHE66H1">既然是在线抓包服务，那每个人肯定都是独立的，不能相互影响，如何让1个代理服务支持多人操作就成了问题。</p>
<p data-pid="2vBnFJM7">解决方案：</p>
<ul>
<li data-pid="XsSfQUy-">用户连接代理后，代理服务器可以获取到用户的IP地址，根据IP地址分别进行分发及报文存储。</li>
<li data-pid="r0PmrYoq">前台查询时，终端ip地址作为入参，便只会查询当前ip相关的抓包信息。</li>
<li data-pid="ApyJKfQA">前台修改报文、环境等信息时，代理服务器会根据ip分别存储修改后的信息。</li>
</ul>
<h3>4.4.2 性能问题</h3>
<p data-pid="EKCicljM">多人在线抓包时，报文数据量非常大，几十万甚至上百万条，而且单条报文数据量也非常的大，包括：请求头、响应头、响应内容等等，所以如何快速查询及展示就成了问题。</p>
<p data-pid="t-QenSiP">解决方案：</p>
<ul>
<li data-pid="0QheDY7B">采用虚拟滚动列表，提升页面流畅性。</li>
<li data-pid="csi6XlT0">优化报文结构，列表只返回固定的几个字段，等点击时再去查询报文详情。</li>
<li data-pid="XYr6Bfdv">优化后，即使上万条报文也能很快返回，用户操作也不会卡顿。</li>
</ul>
<div class="highlight">
<pre><code class="language-text">// 报文结构
[{
"id": "ccae12b0-a4f9-4379-98df-03360b6a3912",
"s": 200,
"m": "POST",
"u": "https://bbs.vivo.com.cn/",
"z": 649,
"b": 1742888674.46417,
"e": 1742888674.51759
},
...
]
</code></pre>
</div>
<h2>五、总结</h2>
<p data-pid="EhmVvfRE">整体回顾下，本文主要介绍了开发同学在项目中遇到的问题定位、沟通等痛点，通过对痛点的拆解和思考，孵化出三个在前端项目中提升效率的工具：</p>
<ul>
<li data-pid="OTxemoZP">录制回放：精准还原问题出现的场景，提供分析问题所需的必要数据（环境、日志、抓包、操作过程等），提升解决问题的效率。</li>
<li data-pid="BvZn14MB">远程调试：远程直连真机进行调试，快速解决特定机型的问题。</li>
<li data-pid="cgsTF04E">多人抓包：让抓包变的更加便捷，在线即可完成，极大地提高了团队在抓包调试工作中的协作效率。</li>
</ul>
<p data-pid="4puU2d9t"><em>希望本文采取的方案以及解决问题的思路对你能有所帮助，也欢迎在评论区一起交流讨论。</em></p>
</div>
<div id="MySignature" role="contentinfo">
分享 vivo 互联网技术干货与沙龙活动，推荐最新行业动态与热门会议。<br><br>
来源：https://www.cnblogs.com/vivotech/p/19160000
頁:
[1]