前因

相信每一位前端程序員，在日常編寫代碼中，或多或少都會碰到前端三題：

㈠ 有沒有便捷的 H5 頁面抓包和模擬假數(shù)據(jù)方法？

㈡ 在公司網(wǎng)絡(luò)限制下如何做到手機(jī)直連電腦服務(wù)，而不是通過費(fèi)時費(fèi)力的流水線打包訪問測試服務(wù)器？

㈢ 學(xué)習(xí)業(yè)界優(yōu)秀的技術(shù)方案時，能不能直接“試”著“改”代碼，所見即所得地剖（pōu）析測試？

“工欲善其事，必先利其器”，這個問題一直困擾著渴望“高效工作，健康生活”的我。那么，有沒有一種既要手機(jī)直連電腦服務(wù)高效調(diào)試，又要沒有代碼倉庫仍能想怎么改就怎么改，還要操作簡單的前后端調(diào)試解決方案？

看見

一個偶然的機(jī)會，我發(fā)現(xiàn)同事子力在使用 ADB（Android Debug Bridge） 端口轉(zhuǎn)發(fā)命令（adb reverse tcp:8081 tcp:8081），通過數(shù)據(jù)線使手機(jī)直連電腦服務(wù)，他這么做主要是為了便于控制影響因子，方便二分法排查網(wǎng)頁性能影響因素。

我當(dāng)時眼睛一亮，這不就是我一直在苦苦尋找的手機(jī)直連電腦解決方案么？

其實(shí)我也是 Android 起家，不禁讓我想到 ReactNative 開發(fā)時就用過這個命令來啟動電腦服務(wù)供手機(jī)開發(fā)調(diào)試，不過當(dāng)時不求甚解，只是把這個命令當(dāng)工具用，導(dǎo)致現(xiàn)在的我也成了工具...

再舉一反三地想一想， Chrome DevTools 的設(shè)備檢查功能（chrome://inspect/#devices）和 Vysor 的電腦遠(yuǎn)程控制投影手機(jī)功能都是類似手機(jī)直連電腦實(shí)時預(yù)覽的解決方案。

圖片來源: Remote debug Android devices

話說，高手的世界像星空，你看得見，卻看不懂。但至此，已經(jīng)看到更大世界的我，思如泉涌，也想試試能不能由淺入深地看懂。

由淺

先把野獸般的想象力收一收，由淺入深地想想，問題是什么，我要干啥？不就是前后端調(diào)試環(huán)境么？要是我能手寫一個簡單后端服務(wù)，自己和自己聯(lián)調(diào)，那感覺，倍爽。

手寫前后端

先寫一個包含網(wǎng)絡(luò)請求的簡單 H5 頁面。

接下來使用備受青睞的 Express Web 框架 （極簡風(fēng)格且開源），搭一個后端服務(wù)?？梢灾苯由暇W(wǎng) Ctrl + C 和 Ctrl + V，我參考《一杯茶的時間，上手 Express 框架》，復(fù)制過來改一下，根據(jù) URL 路徑分別返回 Html 主文檔和 json 數(shù)據(jù)。

因?yàn)楸镜貨]有 express 包，需要運(yùn)行 npm install express 手動安裝依賴。為了避免國內(nèi)安裝速度太慢，建議先運(yùn)行 npm config set registry http://registry.npm.taobao.org 設(shè)置國內(nèi)鏡像。最后運(yùn)行 node simple-html-and-json-server.js 啟動本地服務(wù)。

讓我們來看看瀏覽器打開 http://localhost:3000/ 效果。

可以，整體跑起來了，hello.json 數(shù)據(jù)請求失敗，意料之中，線上本來就沒有 http://sheng.shuqiang.com/hello.json 服務(wù)鏈接，把線上域名改成本地試試 http://localhost:3000/hello.json。

漂亮！??！至此，本地搭建的前后端環(huán)境已經(jīng)成功了，問題 ㈠ 已拿下。代碼在手，天下我有，想咋地咋地，模擬假數(shù)據(jù)（Mock）自然不在話下。是不是有點(diǎn)小激動，我再也不用擔(dān)心和后端同學(xué)加班聯(lián)調(diào)了，只要自己和自己聯(lián)通通過，保證前端這邊沒問題，剩下的交給后端同學(xué)慢慢調(diào)。

站住，別走！你這是在電腦上用瀏覽器訪問本地服務(wù)聯(lián)通自測通過，手機(jī)呢？公司局域網(wǎng)內(nèi)手機(jī)能訪問電腦么？

手機(jī)直連電腦

先手機(jī)鏈接電腦試試行不行？先整簡單點(diǎn)的，我電腦和手機(jī)用的是家里的網(wǎng)絡(luò)，沒有網(wǎng)絡(luò)策略限制，看看能不能連上。

成功了，雖然情理之中，但是還是有點(diǎn)小開心。

多說一句，有的同學(xué)運(yùn)行 ifconfig 命令找電腦 IP ，這樣有點(diǎn)費(fèi)勁還傷眼睛，推薦個簡單優(yōu)雅的。

接下來，連上公司 VPN 試試吧！

電腦連接公司 VPN 后，IP 地址不會變化，但是此時刷新手機(jī)網(wǎng)頁，毫無意外地訪問不了了。

既然走局域網(wǎng)不行，換個思路，直接斷開網(wǎng)絡(luò)，走 USB 直連呢？是時候讓 Android 調(diào)試橋上場了，電腦運(yùn)行 adb reverse tcp:3000 tcp:3000 反向轉(zhuǎn)發(fā) 3000 端口請求，簡單說就是手機(jī)訪問 3000 端口會直接轉(zhuǎn)發(fā)給電腦 3000 端口代理，手機(jī)訪問看起來和電腦訪問一樣了。

讓我們拭目以待吧！

說實(shí)話，走到這，我的內(nèi)心是崩潰的，咋還不行...手機(jī)訪問 http://192.168.101.17:3000/ 網(wǎng)絡(luò)不可用我能理解，畢竟網(wǎng)絡(luò)已經(jīng)斷開，手機(jī)是沒法訪問電腦 IP 的。那么 http://localhost:3000 也不行，為什么啊？不是說 adb reverse 是端口反向轉(zhuǎn)發(fā)么，手機(jī)訪問 http://localhost:3000 等同于電腦訪問 http://localhost:3000 ，電腦訪問 http://localhost:3000 能正常打開頁面，為什么手機(jī)就不行了...掉坑里面去了，淡定！換成 http://127.0.0.1:3000 試試？快看，奇跡般地，手機(jī)竟然能訪問了，喜大普奔。

于是乎，網(wǎng)絡(luò)限制已被繞過，問題 ㈡ 被攻下。又可以開心地在公司手機(jī)訪問電腦服務(wù)了。

拼多多，似乎有著某種魔力吸引著大家。當(dāng)別人在關(guān)心拼多多買東西有多便宜時，作為一個技術(shù)工，更吸引我的是為什么拼多多頁面這么快？

科學(xué)上網(wǎng)拼多多

瀏覽器直接打開拼多多首頁網(wǎng)址 http://pddwyb.com，不出意外地跳到了登錄頁，想讓我知難而退。

顯然，我還在繼續(xù)，就按他說的，手機(jī)號登錄試試。果然，已經(jīng)防我這一手了，登錄后跳到首頁后又迅速跳回登錄頁。

有點(diǎn)意思，代碼都在我電腦上了，而且頁面還瞬間刷新了首頁，我又可以 Debug 頁面，這下還能難得倒我？畢竟大家學(xué)得都差不多，電腦在我手上，拿下只是時間問題！

如果我能在頁面跳回登錄頁前斷點(diǎn)暫停頁面，是不是就可以了？說干就干，看了一下 Chrome DevTools -> “源代碼” -> “事件監(jiān)聽斷點(diǎn)” ，把幾個可能性比較大的打上對勾，刷新頁面，果然不出所料，斷住了?；剡^頭一看，只要把 “DOM 變更” -> “DOMContentLoaded” 勾上即可。

在跳轉(zhuǎn)到登錄頁前斷點(diǎn)停住了，這就是我要的效果。點(diǎn)擊瀏覽器導(dǎo)航欄 “文件” -> “頁面存儲為...”，這里注意格式要選擇“網(wǎng)頁，全部”，這樣相關(guān)的依賴文件也一塊存下來了。

直接打開存儲在本地的拼多多 Html 主文檔試試，第一眼首頁可以正常顯示，不錯。接著會看到控制臺一堆 CORS 跨域報錯和網(wǎng)絡(luò)失敗。

跨域問題很好解決，頁面路徑和依賴文件本來就是相同文件夾下，只不過直接通過文件的訪問方式會導(dǎo)致跨域問題。如果本地起一個 http-server 服務(wù)是不是就行了。Just do it！

運(yùn)行 npm install http-server 安裝 http-server 依賴包，安裝成功后運(yùn)行 ./node_modules/.bin/http-server . -p 8080 啟動本地 http-server 服務(wù)。

瀏覽器輸入 http://127.0.0.1:8080/pddwyb.com.html 看看吧。

接下來如果要解決跨域的話，可以像上面的 Express 搭的后端服務(wù)一樣，在網(wǎng)絡(luò)響應(yīng) header 里面加上 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Headers:Content-Type 就可以，不過這么搞太麻煩。

通過拼多多首頁 Html 主文檔直接包括首屏靜態(tài) DOM 信息可知，拼多多使用了服務(wù)端渲染（SSR）首屏優(yōu)化技術(shù)，這就是我們要找的頁面打開為什么“快”的原因。

雖然 H5 代碼毫無秘密可言，但是畢竟經(jīng)過混淆了，讀起來還是非常費(fèi)勁的，一般不會直接改混淆后的代碼，而是采用追加執(zhí)行代碼或者覆蓋代碼的方式。問題 ㈢ 搭建本地運(yùn)行代碼也解決了。

是不是到這就可以了。答案是否定的！上面的手寫操作只是以最簡單的方式方便你理解原理，可以在特殊情況下多一些解題思路。真正的做法當(dāng)然是站在巨人的肩膀上，借助強(qiáng)大的工具，Whistle(讀音[?w?s?l]，拼音[wēisǒu])，剛好就是這樣的前端調(diào)試?yán)鳌?/p>

入深

Whistle 可以完全勝任前端抓包和 Mock 數(shù)據(jù)功能，最吸引我的地方是輕量和開源（免費(fèi)），不過實(shí)測過程中還是遇到了一些缺乏說明或者缺乏詳細(xì)操作步驟等問題，導(dǎo)致始終不生效的情況，這也是我寫這篇文章的初衷，記錄下來給未來的自己以及屏幕前的你們。接下來我將 Whistle 可以用于提高我們工作中效率的功能點(diǎn)帶大家一步步走一遍，少些踩坑抓狂。

手機(jī)抓包

首頁必須是安裝 whistle ，考慮到國內(nèi)安裝緩慢或失敗，運(yùn)行 npm install whistle -g --registry=https://registry.npmmirror.com 指定鏡像安裝。安裝完成后，whistle、w2 和 wproxy 三個命令是等價的，都可以用于執(zhí)行 whistle 命令?？梢赃\(yùn)行 w2 -V 看一下版本，如果能正常打印出來，說明安裝成功了。安裝完成后，運(yùn)行 w2 start 啟動 whistle。

通過在瀏覽器打開 http://127.0.0.1:8899/#network 即可看到 whistle 網(wǎng)頁控制臺。

現(xiàn)在網(wǎng)絡(luò)請求基本都走 https ，要想抓包必須在電腦和手機(jī)安裝 https 證書。證書入口如上圖所示。證書下載后直接雙擊安裝，中間要求輸入密碼，然后如下圖將 whistle 證書選擇“始終信任”。

將電腦中下載好的 whistle 證書拷貝到手機(jī)，按下圖步驟安裝證書。

手機(jī)證書安裝成功后，將手機(jī)連接到電腦 whistle 代理服務(wù)，即手機(jī)網(wǎng)絡(luò)設(shè)置為手動代理到電腦IP地址（我電腦是 192.168.101.17 ）和 3000 端口。注意，手機(jī)和電腦要連接同一個網(wǎng)絡(luò)。

手機(jī)連接電腦 whistle 代理服務(wù)后，你將會在電腦的 whistle 網(wǎng)頁控制臺抓住所有手機(jī)發(fā)送的網(wǎng)絡(luò)請求包，包含 HTTP、HTTPS、WS、WSS等。

在手機(jī)瀏覽器打開拼多多首頁 http://pddwyb.com/，抓包看看貨架瀑布流列表數(shù)據(jù)吧～

其實(shí)大部分開發(fā)是使用電腦瀏覽器，那邊電腦上啟動的本地服務(wù)能抓包 Mock 數(shù)據(jù)嗎？

模擬電腦本地服務(wù)假數(shù)據(jù)

雖然前端起的本地服務(wù)，可以在代碼里面寫假數(shù)據(jù)（簡稱 Mock 數(shù)據(jù)），但這樣畢竟對業(yè)務(wù)代碼有侵入性，如果刪除不干凈很可能帶到線上去了，通過前端代碼寫死假數(shù)據(jù)測試實(shí)屬無奈之舉。那么能不能在前端代碼不修改的情況下模擬假數(shù)據(jù)？答案必須能。先就著上面手機(jī)抓包拼多多數(shù)據(jù)，我們來 Mock 一下。通過抓包，也可以進(jìn)一步佐證拼多多使用了 SSR 首屏渲染。

竟然首屏已經(jīng)渲染好了，自然也就沒有 json 數(shù)據(jù)，所以只能 mock 貨架瀑布流第二頁數(shù)據(jù)。先給大家看看效果，再說怎么做的？

將拼多多首頁第二頁第一個標(biāo)題“【超低價】2022板栗生栗子”改成“要求進(jìn)步”，第二個標(biāo)題“批發(fā) 白色 紅色 全新料無味”改成“不愧是你”。

做到上面 Mock 數(shù)據(jù)只需要簡單兩步。

Step 1：http://127.0.0.1:8899/#network?url=https://mobile.yangkeduo.com/proxy/api/api/jinbao/h5_weak_auth/goods/query_goods_list_by_opt_id_c_v2，點(diǎn)擊 Copy 按鈕復(fù)制貨架第二頁瀑布流數(shù)據(jù)。

點(diǎn)擊切換到 Values 頁，創(chuàng)建新文件 query_goods_list_by_opt_id_c_v2.json, 將復(fù)制的貨架瀑布流數(shù)據(jù)列表粘貼過來，修改第一個貨架 goodsName 值為“不愧是你”。注：修改完成后一定要保存文件，未保存時，文件名和 Values 均會飄紅點(diǎn)，這個務(wù)必注意一下，不保存將不生效。

Step 2:resBody://{query_goods_list_by_opt_id_c_v2.json} ，其中 resBody:// 表示替換返回數(shù)據(jù)，{xxx.json} 對應(yīng)待 mock 數(shù)據(jù)。

配置好了再次刷新頁面，可以抓包看到 mock 修改后的數(shù)據(jù)已生效。這里要注意，修改內(nèi)容后需要手動保存，注意 Values 和 Rules 左上角是否紅點(diǎn)，有則切換過去保存，不保存則對應(yīng)修改的規(guī)則和數(shù)據(jù)不生效，對我來說是一次慘痛的抓狂教訓(xùn)。

至此，我們完成了手機(jī)端數(shù)據(jù) mock，電腦端 mock 也一樣。不過現(xiàn)在的問題是，如果斷開手機(jī)網(wǎng)絡(luò)，whistle 控制面板根本抓不到其他的網(wǎng)絡(luò)包。

如果要想抓包，必須請求走 whistle 的端口（默認(rèn) 8899）代理，要想電腦瀏覽器可以被抓包，就需要設(shè)置瀏覽器端口（http 默認(rèn)端口 80，https 默認(rèn)端口 443）代理到 8899，有兩類方法可以做到。

方法一：w2 proxy on 打開代理， w2 proxy off 關(guān)閉代理。這一塊我也是被各種文檔坑得夠嗆。有的還打開“網(wǎng)絡(luò)偏好設(shè)置”->“高級”->“代理”->“網(wǎng)頁代理 HTTP”設(shè)置“127.0.0.1:8899”和“安全網(wǎng)頁代理 HTTP”設(shè)置“127.0.0.1:8899”。

其實(shí)， w2 proxy on 等價于在網(wǎng)絡(luò)面板高級里面設(shè)置 HTTP 和 HTTPS 代理為 127.0.0.1:8899， w2 proxy off 等價于取消設(shè)置。運(yùn)行相關(guān)命令后可以在網(wǎng)絡(luò)面板高級選項(xiàng)中看看代理情況，兩種方式如出一轍。

方法二：

檢驗(yàn)代理瀏覽器有沒有生效的最簡單方法就是看 http://local.whistlejs.com) 能否正常打開，能正常打開則表示設(shè)置瀏覽器代理生效。

當(dāng)然了，代理生效也可以通過刷新頁面看是否有對應(yīng)抓包信息來判斷。

整體來說，推薦的做法是安裝 SwitchyOmega 插件，這個插件還有其他高階功能待大家挖掘。這塊比較坑的是網(wǎng)上很多文檔都沒有講清楚這塊，其實(shí)是互斥關(guān)系，有的寫成了互補(bǔ)...，最坑爹的是有的插件建議下載壓縮文件安裝，安裝后不生效，導(dǎo)致我一直在互斥和互補(bǔ)中間很跳...,慘痛的教訓(xùn)就是一定要去正規(guī)渠道 chrome 應(yīng)用商店下載安裝，不行刪了再裝。

問題還沒完呢？雖然解決了電腦瀏覽器代理問題，但是本地起的服務(wù)，比方說上面搭的 express 3000 端口服務(wù)，訪問 url 為 http://127.0.0.1:3000，根本抓不著。其實(shí)本地開發(fā)前端代碼大都類似這種，如果不能抓包 Mock 數(shù)據(jù)，等于白忙活一場。

到這，粗暴地一頓瞎猜亂試肯定是行不通的，梳理一下計算機(jī)理論知識。這里涉及對 HTTP 請求和端口的理解。HTTP 默認(rèn)端口號 80，正常情況下訪問 HTTP 請求不帶端口號，即默認(rèn) 80 端口，也就是 http://www.baidu.com 等價于 http://www.baidu.com:80 。之所以 whistle 服務(wù)可以代理網(wǎng)絡(luò)請求，無一例外都將網(wǎng)絡(luò)端口指向了 8899，手機(jī)連接電腦對應(yīng)網(wǎng)絡(luò)手動代理是 電腦IP:8899, 電腦瀏覽器對于服務(wù)代理是修改 HTTP 代理服務(wù)為 127.0.0.1:8899。也就是只有訪問 http://127.0.0.1:8899 才能被代理，http://127.0.0.1:3000 因?yàn)椴唤?jīng)過 8899 端口，所以不會被代理，如果想被代理，唯一的方案是先訪問 http://127.0.0.1:8899，然后在 8899 端口轉(zhuǎn)發(fā)到 3000端口。

聽起來有點(diǎn)繞，直接上解決方案吧。

在 Rules 頁中新增轉(zhuǎn)換規(guī)則：^http://sheng.shuqiang.com$ http://127.0.0.1:3000。

直接通過 http://sheng.shuqiang.com 中轉(zhuǎn)訪問 http://127.0.0.1:3000 服務(wù)。

CROS 跨域問題

正如上面分析拼多多跨域問題的方案一樣，在網(wǎng)絡(luò)響應(yīng) header 里面加上 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Headers:Content-Type 就可以。如果單獨(dú)起服務(wù)成本有點(diǎn)高，resHeaders://{corsheaders} Rules 可以完美解決了這個問題。

網(wǎng)頁追加腳本

上面科學(xué)上網(wǎng)拼多多也講過，直接看混淆后的代碼太費(fèi)勁，常規(guī)操作是追加代碼操作 DOM 或者修正邏輯。恰恰 whistle 也具備這種功能。先看看點(diǎn)好玩的，一句追加代碼直接把“百度一下”改成“不愧是你”。

注入 vConsole 調(diào)試面板

運(yùn)行 w2 i whistle.inspect 安裝 whistle.inspect 插件，規(guī)則中配置 http://sheng.shuqiang.com whistle.inspect://。

遠(yuǎn)程 log

規(guī)則中配置 https://sheng.shuqiang.com log:// 即可在 Network 頁對應(yīng)主文檔請求打印 console.log 日志。

看懂

 寫到這，我簡單總結(jié)一下。

通過 Express 前端框架可以簡單搭建一下路由服務(wù)，用于代碼精細(xì)化控制返回內(nèi)容。

通過 ADB 反向轉(zhuǎn)發(fā)接口，能做到斷網(wǎng)下通過 USB 線實(shí)現(xiàn)訪問網(wǎng)絡(luò)服務(wù)。

通過前端斷點(diǎn)、保存網(wǎng)絡(luò)文件內(nèi)容、以及 http-server 可以獲取想怎么改就怎么改，有助于迭代更多的科學(xué)上網(wǎng)解題思路。

究極利器是屬于 whistle 的，強(qiáng)大的功能包含但不限于手機(jī)、電腦抓包或 Mock 數(shù)據(jù)、輕松解決 CROS 跨域問題、網(wǎng)頁追加腳本、注入 vConsole 調(diào)試面板和遠(yuǎn)程  log，理論上通過轉(zhuǎn)發(fā)鏈接也能實(shí)現(xiàn)手機(jī)直連電腦服務(wù)。