02 youtube下載器app手機端口轉發(前端抓手機抓包可以看頁面樣式嗎)

一個服務器進程，監聽一個端口比如 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 可以看到如下，綠色表示遠程連接成功

很赞哦!（94）