建站
咨詢
售后
建站咨詢
新聞中心
前因
相信每一位前端程序員，在日常編寫代碼中，或多或少都會(huì)碰到前端三題：
黃岡ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！
㈠ 有沒(méi)有便捷的 H5 頁(yè)面抓包和模擬假數(shù)據(jù)方法？
㈡ 在公司網(wǎng)絡(luò)限制下如何做到手機(jī)直連電腦服務(wù)，而不是通過(guò)費(fèi)時(shí)費(fèi)力的流水線打包訪問(wèn)測(cè)試服務(wù)器？
㈢ 學(xué)習(xí)業(yè)界優(yōu)秀的技術(shù)方案時(shí)，能不能直接“試”著“改”代碼，所見(jiàn)即所得地剖（pōu）析測(cè)試？
“工欲善其事，必先利其器”，這個(gè)問(wèn)題一直困擾著渴望“高效工作，健康生活”的我。那么，有沒(méi)有一種既要手機(jī)直連電腦服務(wù)高效調(diào)試，又要沒(méi)有代碼倉(cāng)庫(kù)仍能想怎么改就怎么改，還要操作簡(jiǎn)單的前后端調(diào)試解決方案？
看見(jiàn)
一個(gè)偶然的機(jī)會(huì)，我發(fā)現(xiàn)同事子力在使用 ADB（Android Debug Bridge） 端口轉(zhuǎn)發(fā)命令（adb reverse tcp:8081 tcp:8081），通過(guò)數(shù)據(jù)線使手機(jī)直連電腦服務(wù)，他這么做主要是為了便于控制影響因子，方便二分法排查網(wǎng)頁(yè)性能影響因素。
我當(dāng)時(shí)眼睛一亮，這不就是我一直在苦苦尋找的手機(jī)直連電腦解決方案么？
其實(shí)我也是 Android 起家，不禁讓我想到 ReactNative 開(kāi)發(fā)時(shí)就用過(guò)這個(gè)命令來(lái)啟動(dòng)電腦服務(wù)供手機(jī)開(kāi)發(fā)調(diào)試，不過(guò)當(dāng)時(shí)不求甚解，只是把這個(gè)命令當(dāng)工具用，導(dǎo)致現(xiàn)在的我也成了工具...
再舉一反三地想一想， Chrome DevTools 的設(shè)備檢查功能（chrome://inspect/#devices）和 Vysor 的電腦遠(yuǎn)程控制投影手機(jī)功能都是類似手機(jī)直連電腦實(shí)時(shí)預(yù)覽的解決方案。
圖片來(lái)源: Remote debug Android devices
話說(shuō)，高手的世界像星空，你看得見(jiàn)，卻看不懂。但至此，已經(jīng)看到更大世界的我，思如泉涌，也想試試能不能由淺入深地看懂。
由淺
先把野獸般的想象力收一收，由淺入深地想想，問(wèn)題是什么，我要干啥？不就是前后端調(diào)試環(huán)境么？要是我能手寫一個(gè)簡(jiǎn)單后端服務(wù)，自己和自己聯(lián)調(diào)，那感覺(jué)，倍爽。
手寫前后端
先寫一個(gè)包含網(wǎng)絡(luò)請(qǐng)求的簡(jiǎn)單 H5 頁(yè)面。
接下來(lái)使用備受青睞的 Express Web 框架 （極簡(jiǎn)風(fēng)格且開(kāi)源），搭一個(gè)后端服務(wù)。可以直接上網(wǎng) Ctrl + C 和 Ctrl + V，我參考《一杯茶的時(shí)間，上手 Express 框架》，復(fù)制過(guò)來(lái)改一下，根據(jù) URL 路徑分別返回 Html 主文檔和 json 數(shù)據(jù)。
因?yàn)楸镜貨](méi)有 express 包，需要運(yùn)行 npm install express 手動(dòng)安裝依賴。為了避免國(guó)內(nèi)安裝速度太慢，建議先運(yùn)行 npm config set registry http://registry.npm.taobao.org 設(shè)置國(guó)內(nèi)鏡像。最后運(yùn)行 node simple-html-and-json-server.js 啟動(dòng)本地服務(wù)。
讓我們來(lái)看看瀏覽器打開(kāi) http://localhost:3000/ 效果。
可以，整體跑起來(lái)了，hello.json 數(shù)據(jù)請(qǐng)求失敗，意料之中，線上本來(lái)就沒(méi)有 http://sheng.shuqiang.com/hello.json 服務(wù)鏈接，把線上域名改成本地試試 http://localhost:3000/hello.json。
漂亮?。?！至此，本地搭建的前后端環(huán)境已經(jīng)成功了，問(wèn)題 ㈠ 已拿下。代碼在手，天下我有，想咋地咋地，模擬假數(shù)據(jù)（Mock）自然不在話下。是不是有點(diǎn)小激動(dòng)，我再也不用擔(dān)心和后端同學(xué)加班聯(lián)調(diào)了，只要自己和自己聯(lián)通通過(guò)，保證前端這邊沒(méi)問(wèn)題，剩下的交給后端同學(xué)慢慢調(diào)。
站住，別走！你這是在電腦上用瀏覽器訪問(wèn)本地服務(wù)聯(lián)通自測(cè)通過(guò)，手機(jī)呢？公司局域網(wǎng)內(nèi)手機(jī)能訪問(wèn)電腦么？
手機(jī)直連電腦
先手機(jī)鏈接電腦試試行不行？先整簡(jiǎn)單點(diǎn)的，我電腦和手機(jī)用的是家里的網(wǎng)絡(luò)，沒(méi)有網(wǎng)絡(luò)策略限制，看看能不能連上。
成功了，雖然情理之中，但是還是有點(diǎn)小開(kāi)心。
多說(shuō)一句，有的同學(xué)運(yùn)行 ifconfig 命令找電腦 IP ，這樣有點(diǎn)費(fèi)勁還傷眼睛，推薦個(gè)簡(jiǎn)單優(yōu)雅的。
接下來(lái)，連上公司 VPN 試試吧！
電腦連接公司 VPN 后，IP 地址不會(huì)變化，但是此時(shí)刷新手機(jī)網(wǎng)頁(yè)，毫無(wú)意外地訪問(wèn)不了了。
既然走局域網(wǎng)不行，換個(gè)思路，直接斷開(kāi)網(wǎng)絡(luò)，走 USB 直連呢？是時(shí)候讓 Android 調(diào)試橋上場(chǎng)了，電腦運(yùn)行 adb reverse tcp:3000 tcp:3000 反向轉(zhuǎn)發(fā) 3000 端口請(qǐng)求，簡(jiǎn)單說(shuō)就是手機(jī)訪問(wèn) 3000 端口會(huì)直接轉(zhuǎn)發(fā)給電腦 3000 端口代理，手機(jī)訪問(wèn)看起來(lái)和電腦訪問(wèn)一樣了。
讓我們拭目以待吧！
說(shuō)實(shí)話，走到這，我的內(nèi)心是崩潰的，咋還不行...手機(jī)訪問(wèn) http://192.168.101.17:3000/ 網(wǎng)絡(luò)不可用我能理解，畢竟網(wǎng)絡(luò)已經(jīng)斷開(kāi)，手機(jī)是沒(méi)法訪問(wèn)電腦 IP 的。那么 http://localhost:3000 也不行，為什么??？不是說(shuō) adb reverse 是端口反向轉(zhuǎn)發(fā)么，手機(jī)訪問(wèn) http://localhost:3000 等同于電腦訪問(wèn) http://localhost:3000 ，電腦訪問(wèn) http://localhost:3000 能正常打開(kāi)頁(yè)面，為什么手機(jī)就不行了...掉坑里面去了，淡定！換成 http://127.0.0.1:3000 試試？快看，奇跡般地，手機(jī)竟然能訪問(wèn)了，喜大普奔。
于是乎，網(wǎng)絡(luò)限制已被繞過(guò)，問(wèn)題 ㈡ 被攻下。又可以開(kāi)心地在公司手機(jī)訪問(wèn)電腦服務(wù)了。
拼多多，似乎有著某種魔力吸引著大家。當(dāng)別人在關(guān)心拼多多買東西有多便宜時(shí)，作為一個(gè)技術(shù)工，更吸引我的是為什么拼多多頁(yè)面這么快？
科學(xué)上網(wǎng)拼多多
瀏覽器直接打開(kāi)拼多多首頁(yè)網(wǎng)址 http://pddwyb.com，不出意外地跳到了登錄頁(yè)，想讓我知難而退。
顯然，我還在繼續(xù)，就按他說(shuō)的，手機(jī)號(hào)登錄試試。果然，已經(jīng)防我這一手了，登錄后跳到首頁(yè)后又迅速跳回登錄頁(yè)。
有點(diǎn)意思，代碼都在我電腦上了，而且頁(yè)面還瞬間刷新了首頁(yè)，我又可以 Debug 頁(yè)面，這下還能難得倒我？畢竟大家學(xué)得都差不多，電腦在我手上，拿下只是時(shí)間問(wèn)題！
如果我能在頁(yè)面跳回登錄頁(yè)前斷點(diǎn)暫停頁(yè)面，是不是就可以了？說(shuō)干就干，看了一下 Chrome DevTools -> “源代碼” -> “事件監(jiān)聽(tīng)斷點(diǎn)” ，把幾個(gè)可能性比較大的打上對(duì)勾，刷新頁(yè)面，果然不出所料，斷住了。回過(guò)頭一看，只要把 “DOM 變更” -> “DOMContentLoaded” 勾上即可。
在跳轉(zhuǎn)到登錄頁(yè)前斷點(diǎn)停住了，這就是我要的效果。點(diǎn)擊瀏覽器導(dǎo)航欄 “文件” -> “頁(yè)面存儲(chǔ)為...”，這里注意格式要選擇“網(wǎng)頁(yè)，全部”，這樣相關(guān)的依賴文件也一塊存下來(lái)了。
直接打開(kāi)存儲(chǔ)在本地的拼多多 Html 主文檔試試，第一眼首頁(yè)可以正常顯示，不錯(cuò)。接著會(huì)看到控制臺(tái)一堆 CORS 跨域報(bào)錯(cuò)和網(wǎng)絡(luò)失敗。
跨域問(wèn)題很好解決，頁(yè)面路徑和依賴文件本來(lái)就是相同文件夾下，只不過(guò)直接通過(guò)文件的訪問(wèn)方式會(huì)導(dǎo)致跨域問(wèn)題。如果本地起一個(gè) http-server 服務(wù)是不是就行了。Just do it！
運(yùn)行 npm install http-server 安裝 http-server 依賴包，安裝成功后運(yùn)行 ./node_modules/.bin/http-server . -p 8080 啟動(dòng)本地 http-server 服務(wù)。
瀏覽器輸入 http://127.0.0.1:8080/pddwyb.com.html 看看吧。
接下來(lái)如果要解決跨域的話，可以像上面的 Express 搭的后端服務(wù)一樣，在網(wǎng)絡(luò)響應(yīng) header 里面加上 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Headers:Content-Type 就可以，不過(guò)這么搞太麻煩。
通過(guò)拼多多首頁(yè) Html 主文檔直接包括首屏靜態(tài) DOM 信息可知，拼多多使用了服務(wù)端渲染（SSR）首屏優(yōu)化技術(shù)，這就是我們要找的頁(yè)面打開(kāi)為什么“快”的原因。
雖然 H5 代碼毫無(wú)秘密可言，但是畢竟經(jīng)過(guò)混淆了，讀起來(lái)還是非常費(fèi)勁的，一般不會(huì)直接改混淆后的代碼，而是采用追加執(zhí)行代碼或者覆蓋代碼的方式。問(wèn)題 ㈢ 搭建本地運(yùn)行代碼也解決了。
是不是到這就可以了。答案是否定的！上面的手寫操作只是以最簡(jiǎn)單的方式方便你理解原理，可以在特殊情況下多一些解題思路。真正的做法當(dāng)然是站在巨人的肩膀上，借助強(qiáng)大的工具，Whistle(讀音[?w?s?l]，拼音[wēisǒu])，剛好就是這樣的前端調(diào)試?yán)鳌?/p>
入深
Whistle 可以完全勝任前端抓包和 Mock 數(shù)據(jù)功能，最吸引我的地方是輕量和開(kāi)源（免費(fèi)），不過(guò)實(shí)測(cè)過(guò)程中還是遇到了一些缺乏說(shuō)明或者缺乏詳細(xì)操作步驟等問(wèn)題，導(dǎo)致始終不生效的情況，這也是我寫這篇文章的初衷，記錄下來(lái)給未來(lái)的自己以及屏幕前的你們。接下來(lái)我將 Whistle 可以用于提高我們工作中效率的功能點(diǎn)帶大家一步步走一遍，少些踩坑抓狂。
手機(jī)抓包
首頁(yè)必須是安裝 whistle ，考慮到國(guó)內(nèi)安裝緩慢或失敗，運(yùn)行 npm install whistle -g --registry=https://registry.npmmirror.com 指定鏡像安裝。安裝完成后，whistle、w2 和 wproxy 三個(gè)命令是等價(jià)的，都可以用于執(zhí)行 whistle 命令?？梢赃\(yùn)行 w2 -V 看一下版本，如果能正常打印出來(lái)，說(shuō)明安裝成功了。安裝完成后，運(yùn)行 w2 start 啟動(dòng) whistle。
通過(guò)在瀏覽器打開(kāi) http://127.0.0.1:8899/#network 即可看到 whistle 網(wǎng)頁(yè)控制臺(tái)。
現(xiàn)在網(wǎng)絡(luò)請(qǐng)求基本都走 https ，要想抓包必須在電腦和手機(jī)安裝 https 證書(shū)。證書(shū)入口如上圖所示。證書(shū)下載后直接雙擊安裝，中間要求輸入密碼，然后如下圖將 whistle 證書(shū)選擇“始終信任”。
將電腦中下載好的 whistle 證書(shū)拷貝到手機(jī)，按下圖步驟安裝證書(shū)。
手機(jī)證書(shū)安裝成功后，將手機(jī)連接到電腦 whistle 代理服務(wù)，即手機(jī)網(wǎng)絡(luò)設(shè)置為手動(dòng)代理到電腦IP地址（我電腦是 192.168.101.17 ）和 3000 端口。注意，手機(jī)和電腦要連接同一個(gè)網(wǎng)絡(luò)。
手機(jī)連接電腦 whistle 代理服務(wù)后，你將會(huì)在電腦的 whistle 網(wǎng)頁(yè)控制臺(tái)抓住所有手機(jī)發(fā)送的網(wǎng)絡(luò)請(qǐng)求包，包含 HTTP、HTTPS、WS、WSS等。
在手機(jī)瀏覽器打開(kāi)拼多多首頁(yè) http://pddwyb.com/，抓包看看貨架瀑布流列表數(shù)據(jù)吧～
其實(shí)大部分開(kāi)發(fā)是使用電腦瀏覽器，那邊電腦上啟動(dòng)的本地服務(wù)能抓包 Mock 數(shù)據(jù)嗎？
模擬電腦本地服務(wù)假數(shù)據(jù)
雖然前端起的本地服務(wù)，可以在代碼里面寫假數(shù)據(jù)（簡(jiǎn)稱 Mock 數(shù)據(jù)），但這樣畢竟對(duì)業(yè)務(wù)代碼有侵入性，如果刪除不干凈很可能帶到線上去了，通過(guò)前端代碼寫死假數(shù)據(jù)測(cè)試實(shí)屬無(wú)奈之舉。那么能不能在前端代碼不修改的情況下模擬假數(shù)據(jù)？答案必須能。先就著上面手機(jī)抓包拼多多數(shù)據(jù)，我們來(lái) Mock 一下。通過(guò)抓包，也可以進(jìn)一步佐證拼多多使用了 SSR 首屏渲染。
竟然首屏已經(jīng)渲染好了，自然也就沒(méi)有 json 數(shù)據(jù)，所以只能 mock 貨架瀑布流第二頁(yè)數(shù)據(jù)。先給大家看看效果，再說(shuō)怎么做的？
將拼多多首頁(yè)第二頁(yè)第一個(gè)標(biāo)題“【超低價(jià)】2022板栗生栗子”改成“要求進(jìn)步”，第二個(gè)標(biāo)題“批發(fā) 白色 紅色 全新料無(wú)味”改成“不愧是你”。
做到上面 Mock 數(shù)據(jù)只需要簡(jiǎn)單兩步。
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ù)制貨架第二頁(yè)瀑布流數(shù)據(jù)。
點(diǎn)擊切換到 Values 頁(yè)，創(chuàng)建新文件 query_goods_list_by_opt_id_c_v2.json, 將復(fù)制的貨架瀑布流數(shù)據(jù)列表粘貼過(guò)來(lái)，修改第一個(gè)貨架 goodsName 值為“不愧是你”。注：修改完成后一定要保存文件，未保存時(shí)，文件名和 Values 均會(huì)飄紅點(diǎn)，這個(gè)務(wù)必注意一下，不保存將不生效。
Step 2:resBody://{query_goods_list_by_opt_id_c_v2.json} ，其中 resBody:// 表示替換返回?cái)?shù)據(jù)，{xxx.json} 對(duì)應(yīng)待 mock 數(shù)據(jù)。
配置好了再次刷新頁(yè)面，可以抓包看到 mock 修改后的數(shù)據(jù)已生效。這里要注意，修改內(nèi)容后需要手動(dòng)保存，注意 Values 和 Rules 左上角是否紅點(diǎn)，有則切換過(guò)去保存，不保存則對(duì)應(yīng)修改的規(guī)則和數(shù)據(jù)不生效，對(duì)我來(lái)說(shuō)是一次慘痛的抓狂教訓(xùn)。
至此，我們完成了手機(jī)端數(shù)據(jù) mock，電腦端 mock 也一樣。不過(guò)現(xiàn)在的問(wèn)題是，如果斷開(kāi)手機(jī)網(wǎng)絡(luò)，whistle 控制面板根本抓不到其他的網(wǎng)絡(luò)包。
如果要想抓包，必須請(qǐng)求走 whistle 的端口（默認(rèn) 8899）代理，要想電腦瀏覽器可以被抓包，就需要設(shè)置瀏覽器端口（http 默認(rèn)端口 80，https 默認(rèn)端口 443）代理到 8899，有兩類方法可以做到。
方法一：w2 proxy on 打開(kāi)代理， w2 proxy off 關(guān)閉代理。這一塊我也是被各種文檔坑得夠嗆。有的還打開(kāi)“網(wǎng)絡(luò)偏好設(shè)置”->“高級(jí)”->“代理”->“網(wǎng)頁(yè)代理 HTTP”設(shè)置“127.0.0.1:8899”和“安全網(wǎng)頁(yè)代理 HTTP”設(shè)置“127.0.0.1:8899”。
其實(shí)， w2 proxy on 等價(jià)于在網(wǎng)絡(luò)面板高級(jí)里面設(shè)置 HTTP 和 HTTPS 代理為 127.0.0.1:8899， w2 proxy off 等價(jià)于取消設(shè)置。運(yùn)行相關(guān)命令后可以在網(wǎng)絡(luò)面板高級(jí)選項(xiàng)中看看代理情況，兩種方式如出一轍。
方法二：
檢驗(yàn)代理瀏覽器有沒(méi)有生效的最簡(jiǎn)單方法就是看 http://local.whistlejs.com) 能否正常打開(kāi)，能正常打開(kāi)則表示設(shè)置瀏覽器代理生效。
當(dāng)然了，代理生效也可以通過(guò)刷新頁(yè)面看是否有對(duì)應(yīng)抓包信息來(lái)判斷。
整體來(lái)說(shuō)，推薦的做法是安裝 SwitchyOmega 插件，這個(gè)插件還有其他高階功能待大家挖掘。這塊比較坑的是網(wǎng)上很多文檔都沒(méi)有講清楚這塊，其實(shí)是互斥關(guān)系，有的寫成了互補(bǔ)...，最坑爹的是有的插件建議下載壓縮文件安裝，安裝后不生效，導(dǎo)致我一直在互斥和互補(bǔ)中間很跳...,慘痛的教訓(xùn)就是一定要去正規(guī)渠道 chrome 應(yīng)用商店下載安裝，不行刪了再裝。
問(wèn)題還沒(méi)完呢？雖然解決了電腦瀏覽器代理問(wèn)題，但是本地起的服務(wù)，比方說(shuō)上面搭的 express 3000 端口服務(wù)，訪問(wèn) url 為 http://127.0.0.1:3000，根本抓不著。其實(shí)本地開(kāi)發(fā)前端代碼大都類似這種，如果不能抓包 Mock 數(shù)據(jù)，等于白忙活一場(chǎng)。
到這，粗暴地一頓瞎猜亂試肯定是行不通的，梳理一下計(jì)算機(jī)理論知識(shí)。這里涉及對(duì) HTTP 請(qǐng)求和端口的理解。HTTP 默認(rèn)端口號(hào) 80，正常情況下訪問(wèn) HTTP 請(qǐng)求不帶端口號(hào)，即默認(rèn) 80 端口，也就是 http://www.baidu.com 等價(jià)于 http://www.baidu.com:80 。之所以 whistle 服務(wù)可以代理網(wǎng)絡(luò)請(qǐng)求，無(wú)一例外都將網(wǎng)絡(luò)端口指向了 8899，手機(jī)連接電腦對(duì)應(yīng)網(wǎng)絡(luò)手動(dòng)代理是 電腦IP:8899, 電腦瀏覽器對(duì)于服務(wù)代理是修改 HTTP 代理服務(wù)為 127.0.0.1:8899。也就是只有訪問(wèn) http://127.0.0.1:8899 才能被代理，http://127.0.0.1:3000 因?yàn)椴唤?jīng)過(guò) 8899 端口，所以不會(huì)被代理，如果想被代理，唯一的方案是先訪問(wèn) http://127.0.0.1:8899，然后在 8899 端口轉(zhuǎn)發(fā)到 3000端口。
聽(tīng)起來(lái)有點(diǎn)繞，直接上解決方案吧。
在 Rules 頁(yè)中新增轉(zhuǎn)換規(guī)則：^http://sheng.shuqiang.com$ http://127.0.0.1:3000。
直接通過(guò) http://sheng.shuqiang.com 中轉(zhuǎn)訪問(wèn) http://127.0.0.1:3000 服務(wù)。
CROS 跨域問(wèn)題
正如上面分析拼多多跨域問(wèn)題的方案一樣，在網(wǎng)絡(luò)響應(yīng) header 里面加上 Access-Control-Allow-Origin:* 和 Access-Control-Allow-Headers:Content-Type 就可以。如果單獨(dú)起服務(wù)成本有點(diǎn)高，resHeaders://{corsheaders} Rules 可以完美解決了這個(gè)問(wèn)題。
網(wǎng)頁(yè)追加腳本
上面科學(xué)上網(wǎng)拼多多也講過(guò)，直接看混淆后的代碼太費(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è)對(duì)應(yīng)主文檔請(qǐng)求打印 console.log 日志。
看懂
寫到這，我簡(jiǎn)單總結(jié)一下。
通過(guò) Express 前端框架可以簡(jiǎn)單搭建一下路由服務(wù)，用于代碼精細(xì)化控制返回內(nèi)容。
通過(guò) ADB 反向轉(zhuǎn)發(fā)接口，能做到斷網(wǎng)下通過(guò) USB 線實(shí)現(xiàn)訪問(wèn)網(wǎng)絡(luò)服務(wù)。
通過(guò)前端斷點(diǎn)、保存網(wǎng)絡(luò)文件內(nèi)容、以及 http-server 可以獲取想怎么改就怎么改，有助于迭代更多的科學(xué)上網(wǎng)解題思路。
究極利器是屬于 whistle 的，強(qiáng)大的功能包含但不限于手機(jī)、電腦抓包或 Mock 數(shù)據(jù)、輕松解決 CROS 跨域問(wèn)題、網(wǎng)頁(yè)追加腳本、注入 vConsole 調(diào)試面板和遠(yuǎn)程 log，理論上通過(guò)轉(zhuǎn)發(fā)鏈接也能實(shí)現(xiàn)手機(jī)直連電腦服務(wù)。
分享題目：從手寫到ADB配合Whistle搗鼓前后端極度舒適的調(diào)試環(huán)境
URL分享：http://fisionsoft.com.cn/article/ccdghgc.html
