寫這篇文章的起因是前段時間做企微三方應用，改個樣式都得發版才能在企微中查看，至于日志，測試環境尚可使用vConsole查看，但是一到生產環境就瞎了，一切問題都靠猜測，導致前端無法快速定位和解決問題。在X師兄的幫助下了解到了Whistle，發現非常的實用，以后老板再也不用擔心(ma)我找不到bug了。好了，廢話不多說，開始上干貨。

一、Whistle 安裝&使用

whistle基于Node實現的跨平臺web調試代理工具，類似的工具有Windows平臺上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的請求、響應，也可以作為HTTP代理服務器使用，不同于Fiddler通過斷點修改請求響應的方式，whistle采用的是類似配置系統hosts的方式，一切操作都可以通過配置實現，支持域名、路徑、正則表達式、通配符、通配路徑等多種匹配方式

1.安裝工具

// 使用此命令一鍵安裝并啟動whistle npm i -g whistle && w2 start --init // 命令注釋： // npm i -g whistle 全局安裝whistle // w2 start --init 啟動whistle (--init)設置全局代理（即系統代理）

2.常用命令

設置系統代理：

w2 proxy

關閉系統代理：

w2 proxy --off

啟動whistle：

w2 start

重啟whistle：

w2 restart

停止whistle：

w2 stop

最后可以通過 Chrome 打開 Whistle 的管理界面（ 127.0.0.1:8899 或 local.whistlejs.com）查看抓包及配置規則調試請求。

啟動完whistle后，接著進行代理配置

3.配置代理

篇幅有限，這里只提供本人最推薦的瀏覽器代理方式，其他方式請自行挖掘。

安裝瀏覽器代理插件

使用科學上網下載并安裝[SwitchyOmega]插件

選擇[新建情景模式]

輸入情景模式名稱，其余選項可不更改，點擊[創建]

根據下圖進行配置，全部配置完成后。打開Whistle管理界面

配置https

• 下載根證書
  

• 安裝根證書
  

• iOS安裝證書
  1.打開safari，輸入rootca.pro，按提示安裝證書。（也可以直接掃描根證書二維碼）
  注意：iOS 10.3 之后需要手動信任自定義根證書，設置路徑：Settings > General > About > Certificate Trust Testings
  
  2.將設備跟PC設備在同一局域網并設置WiFi代理

前期準備已就緒，接下來就可以愉快的開(ban)發(zhuan)了

二、本地開發調試

本地開發前，我們先利用Whistle的反向代理來進行域名轉發。當訪問外網地址時會轉發到我們本地，這樣就可以本地開發調試企微/公眾號等三方項目了。

Whistle規則配置

打開Whistle管理面板，點擊側邊欄Rules，在右側命令編輯框輸入如下配置：

# 反向代理 前面地址為企微授權地址 后面地址為本地開發環境地址 https://xxx-xx.gaojihealth.cn/ http://xxx-local.gaojihealth.cn:9999/

此圖僅做展示，實際開發中驗證過企微授權是沒問題的

三、利用whistle查看DOM節點及其樣式，通過log快速定位問題

whistle集成了weinre的功能，同樣只需配置一條規則即可通過在pc上通過weinre修改網頁的DOM結構及其樣式：
打開Whistle管理面板，點擊側邊欄Rules，在右側命令編輯框輸入如下配置：

# 對以下請求地址，啟用JS報錯、DOM節點、network請求等調試配置 xx.gaojihealth.cn weinre://test

Whistle管理面板的菜單欄中點擊Weinre->test

接著在移動端中 重新訪問頁面，此時即可在PC端對頁面進行調試

結語

在前端技術發展如此迅速的今日，雖身處前端業務流水線中，但仍要有文能提筆控蘿莉，武能上馬定人妻的雄心壯志。路漫漫其修遠兮，吾將上下而求索。
愿天下沒有前端做題家，但行好事，莫問前程。

總結

以上是生活随笔為你收集整理的使用whistle实现移动网页（H5、公众号、企微应用）的本地开发及调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。