02 youtube下載網站安全監測技術規范(youtube上傳身份證安全嗎)



如果你不想使用全局代理，就可以安裝 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 可以看到如下，綠色表示遠程連接成功

很赞哦!（6553）