01、背景

隨著公司業(yè)務(wù)的不斷發(fā)展，異地協(xié)作成為一種常態(tài)，距離無疑給我們的溝通帶來了很多不便，尤其是給問題反饋及解決增加了更多的成本，在這過程中我們遇到了很多痛點(diǎn)：

痛點(diǎn)一：溝通效率低

開發(fā)和測(cè)試只能通過消息或者電話進(jìn)行溝通，為了將問題描述清晰，雙方需要反復(fù)交流，有時(shí)還需提供錄屏、截圖以及抓包等信息，整個(gè)過程耗時(shí)長(zhǎng)、效率低。

痛點(diǎn)二：復(fù)現(xiàn)難、定位難

經(jīng)常會(huì)出現(xiàn)一些問題，開發(fā)在本地?zé)o法復(fù)現(xiàn)，需要使用特定的手機(jī)進(jìn)行復(fù)現(xiàn)、解決。

痛點(diǎn)三：抓包協(xié)作難

分析問題時(shí)，經(jīng)常需要抓包，但是目前主流的抓包工具都是1對(duì)1，對(duì)于異地實(shí)時(shí)抓包不是很方便，而且分享抓包內(nèi)容也比較繁瑣，無法在線實(shí)時(shí)查看。

為解決這些問題，我們基于開源工具與自研技術(shù)棧，孵化出前端三劍客：

• 利劍一：錄制回放工具 - 讓溝通更簡(jiǎn)單
• 利劍二：遠(yuǎn)程調(diào)試工具 - 像本地調(diào)試一樣調(diào)試遠(yuǎn)程機(jī)器
• 利劍三：WEB多人抓包代理工具 - 在線抓包，更簡(jiǎn)單、更實(shí)時(shí)、更便捷

這是一套覆蓋問題復(fù)現(xiàn)、遠(yuǎn)程調(diào)試、便捷抓包的一整套解決方案，助力開發(fā)人員快速、精準(zhǔn)地分享解決問題。

02、利劍一：錄制回放工具

2.1 工具介紹

對(duì)于前端開發(fā)而言，和測(cè)試溝通問題時(shí)，問的最多的幾個(gè)問題：

• 你是怎么操作的？
• 控制臺(tái)有什么報(bào)錯(cuò)嗎？
• 抓個(gè)包給我看下接口請(qǐng)求數(shù)據(jù)吧？

總結(jié)歸納起來就是以下三點(diǎn)：

基于以上的述求，我們基于開源框架rrweb，實(shí)現(xiàn)了從前臺(tái)接入管理、后臺(tái)回放管理及權(quán)限管控的一站式錄制回放平臺(tái)，接入簡(jiǎn)單，一鍵便可錄制宿主信息、操作過程、接口信息、日志信息等數(shù)據(jù)。

錄制過程

接入錄制回放工具后，頁面會(huì)出現(xiàn)一個(gè)懸浮球，用于開啟和提交錄制信息，錄制完成后，會(huì)生成在線回放地址。錄制過程如下圖所示：

回放過程

錄制成功后，后臺(tái)管理系統(tǒng)中便能查詢到該條錄制信息，點(diǎn)擊回放，可以看到該問題的操作過程，以及瀏覽器信息、接口信息、日志信息等數(shù)據(jù)，如下圖所示：

整個(gè)操作的流程如下圖：

2.2 接入方式

我們提供了一個(gè)在線sdk，用戶只需引入該js文件，進(jìn)行初始化即可使用：

2.3 實(shí)現(xiàn)原理

記錄頁面 DOM 變化

錄制過程：

在初始化時(shí)使用document.cloneNode(true) 方獲取頁面的全量 DOM 快照，之后通過 Mutation- Observer 監(jiān)聽器監(jiān)控頁面的各種變化，如 DOM 的增刪改、鼠標(biāo)移動(dòng)、滾動(dòng)以及頁面大小調(diào)整等，當(dāng)這些變化發(fā)生時(shí)，會(huì)將變化信息序列化為 JSON 格式的數(shù)據(jù)并存儲(chǔ)起來。

回放過程：讀取記錄的 JSON 數(shù)據(jù)，解析出頁面的初始快照以及各個(gè)操作事件的時(shí)間序列，根據(jù)初始快照重建頁面的 DOM 樹，然后按照事件的時(shí)間順序逐步應(yīng)用每個(gè)操作事件。

接口錄制

通過對(duì)全局XMLHttpRequest進(jìn)行重寫進(jìn)行接口的攔截處理。

日志錄制

通過對(duì)全局console.log進(jìn)行重寫。

2.4 遇到的問題

問題1：跨頁面錄制

我們是通過在index.html中引入sdk，對(duì)于單頁應(yīng)用，切換路由時(shí)，錄制可以連貫的銜接上，但是當(dāng)遇到多頁面的應(yīng)用時(shí)，切換頁面，會(huì)重新加載sdk，這樣數(shù)據(jù)就會(huì)丟失，無法進(jìn)行銜接，所以我們需要在切換頁面時(shí)將錄制數(shù)據(jù)存在本地，進(jìn)入下一個(gè)頁面時(shí)，獲取這些數(shù)據(jù)進(jìn)行合并，如下圖：

問題2：iframe頁面無法錄制

對(duì)于很多后臺(tái)的項(xiàng)目，可能存在很多iframe嵌入的子項(xiàng)目，如果iframe中的內(nèi)容與父頁面不在同一個(gè)域下，為了能夠正常錄制iframe中的內(nèi)容，需要進(jìn)行跨域處理，在iframe的頁面中也嵌入sdk，并設(shè)置相應(yīng)的跨域?qū)傩?，記錄?shù)據(jù)，并通過iframe.content-Window.postMessage來同步數(shù)據(jù)到主頁面中。

03、利劍二：遠(yuǎn)程調(diào)試工具

3.1 工具介紹

遠(yuǎn)程調(diào)試工具是基于開源工具chii進(jìn)行二次封裝，相較于vConsole,chii讓跨設(shè)備、跨網(wǎng)絡(luò)的Web應(yīng)用調(diào)試變得簡(jiǎn)單便捷。通過遠(yuǎn)程連接的方式，像本地?cái)?shù)據(jù)線連接手機(jī)一樣，在本地的chrome Devtools中進(jìn)行問題定位，實(shí)現(xiàn)和在chrome://inspect中一樣的設(shè)備調(diào)試效果。遠(yuǎn)程調(diào)試工具很好的解決了開發(fā)因?yàn)楸镜責(zé)o法復(fù)現(xiàn)，需要測(cè)試同學(xué)手上特定機(jī)器才能復(fù)現(xiàn)的問題，同時(shí)可以在遠(yuǎn)程看到頁面實(shí)時(shí)運(yùn)行的日志、接口等信息，大大提升問題定位效率。

下面是整個(gè)操作步驟：

第一步：如下圖，點(diǎn)擊頁面中的懸浮球，出現(xiàn)遠(yuǎn)程調(diào)試按鈕，點(diǎn)擊可以開啟遠(yuǎn)程調(diào)試。

第二步：在管理平臺(tái)的遠(yuǎn)程列表中可以看到所有連接的設(shè)備。

第三步：遠(yuǎn)程查看，點(diǎn)擊上一步驟中的inspect按鈕，可以進(jìn)入如下調(diào)試頁面。

第四步：雙向操作同步

在手機(jī)執(zhí)行操作，遠(yuǎn)程界面同步發(fā)生變化，實(shí)時(shí)顯示請(qǐng)求和日志，同樣如果遠(yuǎn)程修改樣式或者執(zhí)行操作，手機(jī)端也會(huì)同步執(zhí)行相同操作。

3.2 接入方式

3.3 實(shí)現(xiàn)原理

遠(yuǎn)程調(diào)試工具主要包括三個(gè)部分：客戶端，中轉(zhuǎn)服務(wù)，遠(yuǎn)程調(diào)試端(devtools)。

它們的運(yùn)轉(zhuǎn)模式如下圖：

第一步：啟動(dòng)一個(gè)node服務(wù)作為中轉(zhuǎn)服務(wù)器，然后創(chuàng)建webSocket服務(wù)用來連接客戶端和遠(yuǎn)程調(diào)試端。

第二步：在客戶端需要調(diào)試的網(wǎng)頁中注入target.js 腳本，該腳本會(huì)創(chuàng)建 WebSocket 連接，通過訂閱發(fā)布來監(jiān)聽DOM、Log、Network、Css、Storage、Debug等相關(guān)操作指令。

第三步：遠(yuǎn)程調(diào)試界面通過CDP（Chrome DevTools Protocol）協(xié)議來和服務(wù)進(jìn)行通信，當(dāng)執(zhí)行控制模板某項(xiàng)操作時(shí)，比如點(diǎn)擊DevTools中的“Elements”面板來檢查頁面元素，DevTools會(huì)通過CDP向服務(wù)發(fā)送一個(gè)命令，請(qǐng)求DOM樹信息，服務(wù)接收到這個(gè)命令后，通過渲染進(jìn)程查詢具體的DOM信息，并將結(jié)果返回給DevTools，DevTools前端再將這些信息可視化呈現(xiàn)給開發(fā)者。

04、利劍三：WEB多人抓包代理工具

4.1 工具介紹

工作中經(jīng)常需要抓包、代理等操作，主流的抓包工具有：Charles、Fiddler等，這些工具都必須安裝客戶端，且都是1對(duì)1的，對(duì)多人協(xié)助不是很友好。比如：開發(fā)需要獲取測(cè)試同學(xué)的的抓包信息分析問題時(shí)，目前都是測(cè)試同學(xué)把報(bào)文導(dǎo)出來，發(fā)給開發(fā)，開發(fā)再去導(dǎo)入到工具里面進(jìn)行分析。

在此背景下，我們就在思考，能否實(shí)現(xiàn)一個(gè)在線的抓包、代理平臺(tái)，讓大家使用方便、分享方便，降低門檻。于是就有了這款工具的誕生，工具是基于mitmproxy進(jìn)行了二次開發(fā)，容器化部署了一套在線代理服務(wù)，只需通過瀏覽器就能實(shí)現(xiàn)抓包、代理等操作。

該在線抓包工具具備如下優(yōu)勢(shì)：

• 簡(jiǎn)單： 無需安裝客戶端，有瀏覽器就能使用，易上手。
• 方便： 直接在瀏覽器中進(jìn)行抓包，而且可通過鏈接分享給他人。
• 易用： 支持?jǐn)帱c(diǎn)、修改報(bào)文，集成了錄制回放工具、遠(yuǎn)程調(diào)試工具，且支持開發(fā)、測(cè)試、線上環(huán)境任意切換。

4.2 使用簡(jiǎn)介

設(shè)置代理

用戶可以通過手機(jī)安裝的App掃描頁面上二維碼，建立連接，也可以直接在手機(jī)WIFI代理設(shè)置中輸入固定的代理IP和端口號(hào)。

抓包、代理

代理成功后，自動(dòng)跳轉(zhuǎn)到抓包頁面，頁面中會(huì)顯示當(dāng)前設(shè)備，也支持新增設(shè)備，可以同時(shí)對(duì)多個(gè)設(shè)備進(jìn)行抓包、代理。并且支持對(duì)報(bào)文的篡改及環(huán)境的代理。

工具注入

我們還在抓包工具中集成了上面的錄制回放工具和遠(yuǎn)程調(diào)試工具，只需要打開開關(guān)，便會(huì)去識(shí)別入口html，動(dòng)態(tài)注入工具的sdk，并進(jìn)行初始化，這樣用戶再次刷新頁面時(shí)，頁面中便會(huì)出現(xiàn)工具的懸浮球。

環(huán)境切換

工作中還涉及到一個(gè)場(chǎng)景，在產(chǎn)品和UI驗(yàn)收時(shí)，由于驗(yàn)收環(huán)境都是在測(cè)試環(huán)境，需要配置host，對(duì)于產(chǎn)品和UI同學(xué)來講，環(huán)境的配置其實(shí)是比較陌生的，為了方便驗(yàn)收，我們提供了一鍵切換環(huán)境的能力。用戶只需要在頁面上選擇自己的項(xiàng)目，然后開啟對(duì)應(yīng)的環(huán)境，這樣手機(jī)環(huán)境便能切換過來。

4.3 實(shí)現(xiàn)原理

在mitmproxy基礎(chǔ)上，根據(jù)設(shè)備ip對(duì)攔截的請(qǐng)求進(jìn)行分類，當(dāng)用戶查看抓包數(shù)據(jù)時(shí)，通過ip進(jìn)行過濾，這樣就可以只看到自己ip的抓包數(shù)據(jù)。

4.4 問題解決

4.4.1 如何實(shí)現(xiàn)1對(duì)N

既然是在線抓包服務(wù)，那每個(gè)人肯定都是獨(dú)立的，不能相互影響，如何讓1個(gè)代理服務(wù)支持多人操作就成了問題。

解決方案：

• 用戶連接代理后，代理服務(wù)器可以獲取到用戶的IP地址，根據(jù)IP地址分別進(jìn)行分發(fā)及報(bào)文存儲(chǔ)。
• 前臺(tái)查詢時(shí)，終端ip地址作為入?yún)?，便只?huì)查詢當(dāng)前ip相關(guān)的抓包信息。
• 前臺(tái)修改報(bào)文、環(huán)境等信息時(shí)，代理服務(wù)器會(huì)根據(jù)ip分別存儲(chǔ)修改后的信息。

4.4.2 性能問題

多人在線抓包時(shí)，報(bào)文數(shù)據(jù)量非常大，幾十萬甚至上百萬條，而且單條報(bào)文數(shù)據(jù)量也非常的大，包括：請(qǐng)求頭、響應(yīng)頭、響應(yīng)內(nèi)容等等，所以如何快速查詢及展示就成了問題。

解決方案：

• 采用虛擬滾動(dòng)列表，提升頁面流暢性。
• 優(yōu)化報(bào)文結(jié)構(gòu)，列表只返回固定的幾個(gè)字段，等點(diǎn)擊時(shí)再去查詢報(bào)文詳情。
• 優(yōu)化后，即使上萬條報(bào)文也能很快返回，用戶操作也不會(huì)卡頓。

// 報(bào)文結(jié)構(gòu)
[{
    "id": "ccae12b0-a4f9-4379-98df-03360b6a3912",
    "s": 200,
    "m": "POST",
    "u": "https://bbs.vivo.com.cn/",
    "z": 649,
    "b": 1742888674.46417,
    "e": 1742888674.51759
  },
  ...
]

05、總結(jié)

整體回顧下，本文主要介紹了開發(fā)同學(xué)在項(xiàng)目中遇到的問題定位、溝通等痛點(diǎn)，通過對(duì)痛點(diǎn)的拆解和思考，孵化出三個(gè)在前端項(xiàng)目中提升效率的工具：

• 錄制回放：精準(zhǔn)還原問題出現(xiàn)的場(chǎng)景，提供分析問題所需的必要數(shù)據(jù)（環(huán)境、日志、抓包、操作過程等），提升解決問題的效率。
• 遠(yuǎn)程調(diào)試：遠(yuǎn)程直連真機(jī)進(jìn)行調(diào)試，快速解決特定機(jī)型的問題。
• 多人抓包：讓抓包變的更加便捷，在線即可完成，極大地提高了團(tuán)隊(duì)在抓包調(diào)試工作中的協(xié)作效率。