一文搞定前端代理騷操作！再也不怕線上bug啦！

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼我們需要一個代理工具？一個靈活好用的代理工具對開發的作用有多大？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個順手的代理工具，可以讓我們隨心所欲的掌控我們的開發環境，當前環境前置服務掛了還要等重啓？不！直接切一個可用環境接着我的開發。驗證頁面不同數據狀態的流程還要造數據？不！直接代理修改數據走流程，省勁。特定機型線上問題抓耳撓腮不知如何定位？代理連上查看元素、遠程 log 輕鬆定位問題所在......"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用代理不說能解決所有問題，但是至少可以在解決問題的流程上幫我們省大半的時間，而不是碰到環境問題就在那兒等重啓"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d2\/d2f39e12df4659ce9d96d2f3ce580e99.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Whistle 介紹"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於 Whistle 下面引用官方的"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Whistle(讀音[ˈwɪsəl]，拼音[wēisǒu])基於 Node 實現的跨平臺 web 調試代理工具，類似的工具有 Windows 平臺上的 Fiddler，主要用於查看、修改 HTTP、HTTPS、Websocket 的請求、響應，也可以作爲 HTTP 代理服務器使用，不同於 Fiddler 通過斷點修改請求響應的方式，Whistle 採用的是類似配置系統 hosts 的方式，一切操作都可以通過配置實現，支持域名、路徑、正則表達式、通配符、通配路徑等多種匹配方式，且可以通過 Node 模塊擴展功能"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/73\/73a7eeb7f9046d5b783cf783eca87208.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"與 Charles 對比"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想必大部分人剛開始接觸抓包代理的時候用的都是 Charles 和 Fiddler 這兩個老牌抓包代理工具之一，筆者當初就是 Charles 入的門。但是後面瞭解到 Whistle 之後就毅然選擇投入了它的懷抱。下面說一下筆者認爲 Whistle 的幾大優勢。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開源免費，相比 Charles 的收費，開源的 Whistle 使用起來當然是更加的沒有負擔。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"易於安裝，Whistle 基於 Node 實現，安裝就是全局安裝 npm 包，對於前端來說當然是更加的友好。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置集中靈活，Whistle 的各種功能都使用配置文件的方式集中管理，查看和修改都更加友好且易於分享。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自由可編程，當內置功能都不能滿足需求時，還可以使用 Npm 包的方式開發插件對於 JS 開發者來說更加的友好易用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何使用"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"安裝和使用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲是 npm 包，所以安裝只需要一句話（Mac 或 Linux 的非 root 用戶需要在命令行前面加 sudo，如："},{"type":"codeinline","content":[{"type":"text","text":"sudo npm install -g whistle"}]},{"type":"text","text":"）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 安裝\nnpm install -g whistle\n# 啓動\nw2 start\n# 重啓\nw2 restart\n# 停止\nw2 stop"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"訪問主界面"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一般情況下直接訪問"},{"type":"codeinline","content":[{"type":"text","text":"http:\/\/localhost:8899\/#network"}]},{"type":"text","text":"這個地址即可，不使用默認端口的話，改爲啓動的端口號訪問即可。界面如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/63\/63963d163a133707b49cf235b0cfe0a4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置代理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"配置信息"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"代理服務器"},{"type":"text","text":"：127.0.0.1 (如果部署在遠程服務器或虛擬機上，改成對應服務器或虛擬機的 ip 即可)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"默認端口"},{"type":"text","text":"：8899 (如果端口被佔用，可以在啓動時通過 -p 來指定新的端口，更多信息可以通過執行命令行 w2 help (v0.7.0 及以上版本也可以使用 w2 help) 查看)"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於 Whistle 不能自動設置系統代理，所以需要代理的內容需要手動配置"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"系統代理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個不常用，各個系統設置系統代理方式不同,可自行查找設置方式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"瀏覽器代理（Chrome 爲例）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然 Chrome 也可以設置代理，但是更推薦使用"},{"type":"codeinline","content":[{"type":"text","text":"SwitchyOmega"}]},{"type":"text","text":"插件進行代理的管理，可以同時配置梯子的代理規則，不至於開了代理就不能訪問 Google 了"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/00\/005e44229d1caecf854d6fe27e3c3044.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"移動端代理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"移動端代理需要兩個設備在同一 WiFi 下（網絡互通），在設置中配置當前 Wi-Fi 的代理，以 iOS 爲例：代理服務器爲啓動 Whistles 設備的 IP"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/08\/08ea91c8b65b1d78b3b137819b13bb2b.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"https 證書"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"會配置或沒有 https 需求的可跳過這一段"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"https 默認時不能查看其內容的我們需要安裝自定義的根證書來進行 https 請求的查看，這部分內容沒有什麼特別的下面就直接把文檔上的內容複製過來了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下載根證書，開啓捕獲 HTTPS 請求："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9c\/9c79b46cb9fb45791777f393d03a902e.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"安裝根證書"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"證書按下面步驟安裝後，如果還出現安全提醒，這個主要原因是之前你訪問過該頁面，導致長連接已建立，可以等段時間再訪問、或重新打開瀏覽器，或重啓下 Whistle：w2 restart"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如上圖下載完根證書後點擊 rootCA.crt 文件，彈出根證書安裝對話框。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Windows:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Installing a root certificate on Windows"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b5\/b500589e5fee10c65eed1dc56c58f60c.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下載證書後，雙擊證書，根據指引安裝證書。證書安裝過程，要確保證書存儲到受信任的根證書頒發機構下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Mac:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Mac 安裝證書後，需要手動信任證書，步驟如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/8e\/8e2b8fcc2f937333fba9e0c390e03709.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打開證書管理界面，找到帶有 whistle 的字樣的證書，如果有多個又不確定最新安裝的是哪個，可以全部刪除後重新安裝"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/467c4b681f97d4d21d5be6a9c18a77ba.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雙擊證書後，點擊 Trust 左邊展開選項，紅色部分選擇 Always Trust （總是信任），點擊左上角關閉當前界面會要求輸入密碼；輸入密碼後可 以看到證書上面紅色的圖標 x 不見了，到這一步說明完成證書安裝。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9b\/9b4ee13a6c0e6b4e4c8168aaf3bdbc96.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Firefox:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"菜單 > 首選項 > 高級 > 證書 > 證書機構 > 導入 -> 選中所有 checkbox -> 確定"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"iOS"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"手機設置代理後，Safari 地址欄輸入 rootca.pro，按提示安裝證書（或者通過 whistle 控制檯的二維碼掃碼安裝，iOS 安裝根證書需要到連接遠程服務器進行驗證，需要暫時把 Https 攔截功能關掉） iOS 10.3 之後需要手動信任自定義根證書，設置路徑：Settings > General > About > Certificate Trust Testings 具體可以看這裏"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Android"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"whistle 控制檯二維碼掃碼安裝，或者瀏覽器地址欄 rootca.pro 按提示安裝"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"部分瀏覽器不會自動識別 ca 證書，可以通過 Android Chrome 來完成安裝"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"android 6.0 之後的一些 app 在成功安裝證書後仍然無法對 https 連接進行手抓包，有可能是該 app 沒有添加信任用戶自定義證書的權限。請確認該 app 是否有如下配置："}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\n   \n       \n       \n   \n\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這主要是因爲 android 6.0 之後的版本默認配置發生了變化，更多請看 Android 開發文檔。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"開啓攔截 HTTPS"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9c\/9c79b46cb9fb45791777f393d03a902e.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"圖中的打開的對話框有個 checkbox："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.Capture HTTPS CONNECTs：開啓 Https 攔截功能，只有勾上這個 checkbox 及裝好根證書，Whistle 才能看到 HTTPS、Websocket 的請求"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"自定義請求證書或根證書"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"whistle 會自動生成根證書，並根據根證書對每個請求動態生成 https 證書，如果需要用自定義的證書，甚至根證書，可以有兩種方式(只支持 .crt 格式的證書)："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"把普通證書對 (如：test.crt 和 test.key、test2.crt 和 test2.key 等等) 或根證書 (名字必須爲 root.crt 和 root.key)，放在系統的某個目錄，如 \/data\/ssl，並在啓動時添加啓動參數 w2 start -z \/data\/ssl ，whistle 會自動加里面的證書 (v1.14.8 及以上版本支持) 把上述證書或根證書放在固定目錄 ~\/.WhistleAppData\/custom_certs\/裏面，whistle 會自動加里面的證書"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優先級 -z dir > ~\/.WhistleAppData\/ > 內置證書"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"匹配規則"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Whistle 的匹配規則非常的多，這裏介紹幾種常用的匹配模式基本可以覆蓋 90%的使用場景。詳細規則可以查看【匹配規則】"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"注："},{"type":"text","text":" 默認匹配規則都是下面這種形式："},{"type":"codeinline","content":[{"type":"text","text":"pattern operatorURI"}]},{"type":"text","text":",匹配規則在左，操作規則在右。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"域名匹配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 匹配域名 www.test.com 下的所有請求，包括 http、https、ws、wss，tunnel\nwww.test.com operatorURI\n\n# 匹配域名 www.test.com 下的所有 http 請求\nhttp:\/\/www.test.com operatorURI\n\n# 匹配域名 www.test.com 下的所有 https 請求\nhttps:\/\/www.test.com operatorURI\n\n# 上述匹配也可以限定域名的端口號\nwww.test.com:8888 operatorURI # 8888 端口\nwww.test.com\/ operatorURI # http 爲 80 端口，其它 443 端口\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"路徑匹配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 限定請求協議，只能匹配 http 請求\nhttp:\/\/www.test.com\/xxx operatorURI\nhttp:\/\/www.test.com:8080\/xxx operatorURI\n\n# 匹配指定路徑下的所有請求\nwww.test.com\/xxx operatorURI\nwww.test.com:8080\/xxx operatorURI"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"通配符匹配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通配符匹配以 ^ 開頭，* 爲通配符，可以通過 9 匹配通配符匹配的分組，$0 表示整個 URL。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 通配符匹配必須以 ^ 開頭\n# 訪問 wy.guahao.com\/abc\/xyz\/1.js 就會被映射到 \/path\/to\/xyz\/1.js\n^wy.guahao.com\/abc\/***   \/path\/to\/$1\n# 也可以用 $ 限制結尾\n# 只轉發 index.js 結尾的 url\n^wy.guahao.com\/abc\/***index.js$   \/path\/to\/$1"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"* 表示匹配到一個 \/ 就停下，而 *** 表示匹配多個"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"域名通配符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在域名中使用 * 不需要用 ^ 開頭，例如我們用"},{"type":"codeinline","content":[{"type":"text","text":"*.com operatorURI"}]},{"type":"text","text":"時就是匹配 "},{"type":"codeinline","content":[{"type":"text","text":"guahao.com"}]},{"type":"text","text":" 等，但是不匹配 "},{"type":"codeinline","content":[{"type":"text","text":"www.guahao.com"}]},{"type":"text","text":"。而想要對所有子域名生效，可以用"},{"type":"codeinline","content":[{"type":"text","text":"***.com operatorURI"}]},{"type":"text","text":"這樣可以匹配 "},{"type":"codeinline","content":[{"type":"text","text":"wx.wy.guahao.com"}]},{"type":"text","text":" 這樣的域名"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"正則匹配"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於非常靈活的匹配規則，可以使用正則匹配。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 匹配所有請求\n\/.\/ operatorURI\n# 匹配 url 裏面包含多個關鍵字的請求\n\/keyword\/ operatorURI\n# 通過正則匹配，同樣的 $1~$9 捕獲分組，$0 表示整個 URL\n\/(\\d+).html\/ operatorURI"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"常用功能"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"綁定 Host"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"和 Host 文件寫法相同，走代理的時候不會再查詢本機的 Host 文件，修改這個 Host 配置沒有緩存，立即生效"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"127.0.0.1 wy.guahao.com\n"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"替換請求"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"調試一些有域名校驗難以在本地查找的問題時（比如微信授權，微信 SDK 調用），可以將線上的頁面代理到本地開發環境來進行問題排查。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"針對一些非 Webpack 編譯的資源可以將線上資源替換，達到直接調試線上的效果。前後端不分離的項目，本地環境難以配置時，可以在測試環境調試本地的 JS、CSS 文件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 本地替換線上\n127.0.0.1 wya.guahao.com\nhttps:\/\/wy.guahao.com http:\/\/wya.guahao.com:8080\n\n# 代理替換資源\n^http:\/\/test.guahao-test.com\/front\/hps-h5-static\/css\/h5.min.css*** http:\/\/127.0.0.1:9091\/front\/hps-h5-static\/css\/h5.css\n^http:\/\/test.guahao-test.com\/front\/hps-h5-static\/js\/h5.js*** http:\/\/127.0.0.1:9091\/front\/hps-h5-static\/js\/h5.js\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"替換返回內容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文本類請求 append 內容、替換返回內容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"# 說明：會把內容 append 到請求後面\nhttp:\/\/guahao.com\/style.css resAppend:\/\/{myAppend.css}\n# 說明：完全替換請求內容\nhttp:\/\/guahao.com\/style.css resBody:\/\/{myResBody.css}\n\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"注入 JS 腳本"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"線上項目我們一般不會啓用 vConsole，Eruda 之類的調試工具。出現問題時難以查看報錯與其他信息。這時可以使用代理將 vConsole，Eruda 注入到頁面中來查看問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"# htmlAppend 操作即爲在 html 部分最後注入 debugger 變量，變量內容在“Value”面板進行設置\nhttps:\/\/wy.guahao.com\/ htmlAppend:\/\/{debugger}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"debugger 變量的內容："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"