一個服務器進程，監聽一個端口比如 8899
在手機上連接同一個局域網，配置網絡代理，指向 PC 端的 IP 地址和 8899 端口
這樣一來，手機上所有的網絡通信都會被先轉發到 PC 端的 8899 端口，就可以對數據包進行分析處理
拿訪問 youtuBe 來說，比如電腦已經使用【服務器軟件】成功訪問，此時只要手機配置代理指向電腦 ip 地址和指定端口，手機就可以同樣訪問 youtuBe了。
2. 抓包工具 whistle
2.1 whistle 是什么
Whistle 是基于 Node 實現的跨平臺抓包免費調試工具，其主要特點：
1、完全跨平臺：支持 Mac、Windows 等桌面系統，且支持服務端等命令行系統
2、功能強大：
支持作為 HTTP、HTTPS、SOCKS 代理及反向代理
支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 請求
支持重放及構造 HTTP、HTTPS、HTTP2、WebSocket、TCP 請求
支持設置上游代理、PAC 腳本、Hosts、延遲（限速）請求響應等
支持查看遠程頁面的 買粉絲nsole 日志及 DOM 節點
支持用 Node 開發插件擴展功能，也可以作為獨立 npm 包引用
3、操作簡單
直接通過瀏覽器查看抓包、修改請求
所有修改操作都可以通過配置方式實現（類似系統 Hosts），并支持分組管理
項目可以自帶代理規則并一鍵配置到本地 Whistle 代理，也可以通過定制插件簡化操作
如何快速使用 whistle
先安裝 node，建議用 nvm 管理
全局安裝 whistle
1
npm i -g whistle & w2 start
安裝后，可以在電腦上設置全局代理，代理的端口為 8899.
1
2
3
w2 proxy // 設置全局代理
w2 proxy off // 關閉全局代理
就可以通過瀏覽器訪問 買粉絲://127.0.0.1:8899/ 查看抓包、修改請求等。

如果你不想使用全局代理，就可以安裝 SwitchyOmega 插件，按需對某些網站設置 whistle 代理。
選擇 Whistle 代理

設置 Whistle 代理

2.2 whistle 可以做的事情
whistle 可以做的事情很多，以下是官網圖：

一些例子配置如下圖所示：

3. whistle 實戰案例
3.1 原生 app 加載 PC本地代碼開發
在原生 app 上已經通過 h5 域名加載了 web 頁面，但是本地開發時不想每次都走流水線或本地打包上傳代碼。
需要把原生 app 的請求代理到本地服務器上來，前提條件是 wifi 手機與電腦可相互訪問，也就是前面提到的電腦抓 pc 的包。
因為我的 web 服務端是 買粉絲s 應用，因此需要下載 whistle 提供的根證書，手動導入到手機上。
點擊 HTTPS 菜單，然后使用手機掃描二維碼，使用手機瀏覽器打開即可下載，在手機證書中設置進行導入并且設置信任。

此時，再在手機上配置代理指向 PC 電腦的 IP和 whistle 監聽的端口即可在電腦上截獲數據包。
我本地webpack 啟動的服務器應用訪問地址為：xxx.xxx.xxx.xxx:8080
whistle 的配置規則：
1
2
3
4
5
6
7
8
9
# Rules
# 訪問首頁走本地
jecyu.買粉絲/webs/short-transport 買粉絲://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首頁路徑
# 后續的請求都使用本地代碼
jecyu.買粉絲 買粉絲://xxx.xxx.xxx.xxx:8080?deptCode=755DL
其中試過在原生 app 訪問本地應用時出現錯誤“ webpack 會提示 invalid host header”，解決方案是在 devServer 配置添加即可：
1
2
3
4
5
devServer: {
allowedHosts: 'all',
}
至此，成功讓原生 app 訪問PC 端本地的開發代碼。
3.2 查看移動端的 DOM 樣式
Whistle 能夠通過內置的 Weinre 去實現查看移動端的 DOM 樣式，配置規則如下
1
2
3
# 設置 weinre
買粉絲s://juejin.買粉絲 weinre://test
手機上重新訪問 juejin.買粉絲 網站，然后打開 weinre 可以看到如下，綠色表示遠程連接成功
iPhone 是綜合實力最強的手機：各家手機都有自己的優勢，也或多或少都有短版（這幾年刷遍
Android 機的觀察），也許是為了區隔市場，也許是在擠牙膏，這個時候一年一只的 iPhone 就成為綜合
實力最強的手機了，拍照可能比不上三星，但也算是名列前茅；電池可能比不上中階 Android，但也足夠
使用一天，所以懶得研究的人，iPhone 就成為一個“不會錯”的選擇了。
系統：雖然 Android 的流暢度已經很棒了，但和 iOS 比，還是差那么一些些，Android 整體順暢，但
還是時不時會卡一下；再者，一些系統設計上的短版，也會讓用戶很麻煩。例如：iOS 卸載 App 后，就不
用管有沒有遺留什么資料在手機里，可安卓在移除 App 時，不一定會移除儲存資料的檔案夾，久而久之，
手機中充滿了不知名的檔案夾，和許多不知道能不能清的垃圾。當然可以下載某某管家、助手來幫助清
理，但總歸不是那么優雅，種種系統上的原因，最后讓我奔向了 iOS
“從樣張審美這件事看，iPhone的樣張水平是最高的“
典型的iPhone風格夜景人像，我們很難在iPhone人像夜景中看到對面部進行大范圍的補光，他們更喜歡塑造光影關系，尤其是有色光源的尋找。遠處的夕陽隱隱約約，一縷光照亮姑娘金色的發絲，加上沉穩的劇中構圖，人物的臉龐若影若現。巧妙的避開了所有手機由于傳感器限制導致的畫質弊端，但即使我有一個相機，我也更愿意拍攝這樣的作品，氛圍感好。
還有
蘋果有統一的推送。
所有的通知要先發給蘋果的服務器，服務器推送給OS，這時候應用是否在運行無所謂。
android因為google不在，那推送怎么辦呢？可以用第三方的，但是各個應用不統一啊。
而且第三方的不穩定，萬一出問題怎么辦?
于是很多APP怕自己漏通知，怎么辦呢？弄一個service不停的跑，需要不時去服務器查詢有沒有通知或者不停的告訴服務器自己的位置（IP和端口）讓服務器推送，但是這個服務萬一被殺死怎么辦？另起一個進程互相監控，其中一個被殺死立馬把另一個拉起來。萬一用戶把進程都殺死怎么辦？還可以注冊事件，例如網絡發生變化，系統啟動，來電話等事件拉起進程。
注意這只是一個APP做的事情，你腦補下你手機里有十幾個APP都在干同樣的事，你手機怎么能不耗電，怎么能不卡？你再高端的android都得面對這事。
時隔 3 年，重新接觸了移動端 h5 頁面開發，上一次還是大四實習。這一次是 hybrid 開發，涉及到 h5 頁面與原生 app 的交互，h5 頁面需要與原生打通登錄態，以及調用原生app 的接口，比如調用原生相機進行二維碼掃描。跟買粉絲小程序開發不同，本地開發時買粉絲有提供買粉絲開發者工具，可以本地模擬調用而我這邊需要每次都打包靜態文件，上傳服務器才能調試，非常麻煩。
能不能在原生 app 加載線上 h5 時，跑本地的代碼呢？答案是可以的，通過抓包工具比如 whistle 就可以做到攔截線上頁面請求數據，再響應本地代碼，本文主要講述抓包的原理和抓包工具 whistle 使用。
1. 抓包的原理
1.1 什么是抓包？
抓包就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作，通過抓包可以：
分析網絡問題
業務分析
分析網絡信息流通量
網絡大數據金融風險控制
探測企圖入侵網絡的攻擊
探測由內部和外部的用戶濫用網絡資源
探測網絡入侵后的影響
監測鏈接互聯網寬頻流量
監測網絡使用流量（包括內部用戶，外部用戶和系統）
監測互聯網和用戶電腦的安全狀態
滲透與欺騙
...
回顧下計算機網絡知識，數據在網絡上是以很小的幀的單位傳輸的，幀通過特定的稱為網絡驅動程序的程序進行成型，然后通過網卡發送到網線上，通過網線到達目的機器，在目的機器的一端執行相反的過程。接收端機器的以太網捕獲到這些幀，并告訴操作系統幀已到達，然后對其進行存儲。在這個傳輸和接收的過程，就可以使用抓包工具（Sniffers）進行抓包，作為前端開發者，通常是抓取應用層的 HTTP/HTTPS 的包。

1.2 HTTP/HTTPS 抓包原理
HTTP/HTTPS 是應用層使用的通信協議，常見的應用層體系結構是客戶端-服務器體系。
對運行在不同端系統上的客戶端程序和服務端程序是如何互相通信的么？實際上，在操作系統上的術語中，進行通信的實際上是進程而不是程序，一個進程可以被認為是運行在端系統中的一個程序。
在 web 應用程序中，一個客戶瀏覽器進程與一臺服務器進程進行會話交換報文。
瀏覽器進程需要知道接收進程的主機地址，以及定義在目的主機中的接收進程的標識符，也就是目的端口。
多數應用程序由通信進程對組成，每對中的兩個進程互相發送報文。進程通過一個稱為套接字的軟件接口向網絡發送報文和從網絡接收報文。
進程可以類比一座房子，而它的套接字可以是它的門，套接字是應用層與運輸層之間的端口。

知道了兩個進程的通信流程，我們要怎么抓包呢？舉一個生活中的例子，小明暗戀小雯，于是他寫了一封情書，但他有點害羞，找了小雯的好朋友小花幫忙傳遞情書。這個時候，小花可以負