概要
本篇介紹一種十分方便的方法為網站添加 vConsole 調試(通過篡改請求外部注入的方式,不需要您是網站的擁有者,主要用於調試線上站點)。
之前已經發過一篇《
借助FreeHttp為任意移動端web網頁添加vConsole調試》,不過那篇操作起來還是比較復雜。因為那篇帖子使用了大量篇幅介紹操作原理,至使簡單的問題也用了較長的篇幅,但是不是所有同學都喜歡那樣的風格,而且為了演示FreeHttp對不存在資源的mock,對於vconsole.min.js使用了一個本地資源,讓復雜度進一步加大。
現在借助FreeHttp2.3.0的規則分享功能,讓操作變得十分簡單,幾乎不需要任何基礎就可以馬上看到效果。
如何開始
FreeHttp 插件安裝
1:您的計算機需要已經安裝Fiddler。 (如未安裝,請至官網下載安裝 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler)
2:進入Fiddler安裝目錄的Scripts目錄下,將FreeHttp.dll復制到該目錄下即可 。 (文件下載請至:https://files.cnblogs.com/files/lulianqi/FreeHttp2.3.0zip 或 http://lulianqi.com/file/FreeHttp2.3.0.zip 解壓可得到 FreeHttp.dll )
3:重啟Fiddler即可在面板中出現 FreeHttp 標簽。
4:如果您是第一次使用Fiddler您可能還需要配置Fiddler開啟https解析,或者您需要抓取手機移動端的請求您也需要先為這些設備安裝根證書,不過這些設置比較簡單您在互聯網上也可以找到大量的說明。
如果您想詳細了解FreeHttp 可以參考《借助FreeHttp任意篡改http報文 (使用●實現)》 (這個篇幅較長,有需要可以后面再看)
操作實踐

FreeHttp插件安裝完成后,直接選擇【Moific Tool】-【load remote rule】打開遠程規則分享窗口

在彈出窗口中只需要3步
- 在remote rule token 中填寫 token 27fd3332873d4f659e29136a9d5c211d (27fd3332873d4f659e29136a9d5c211d 是公開的token 直接使用即可)
- 點擊 Get Rule
- 點擊 Merge Remote Rule

完成后您FreeHttp的 規則列表會自動添加分享的遠程規則,按上圖所示開啟篡改規則。
進入Bing.com

現在您可以看到效果,並且可以開始調試。
通過對規則進行簡單的修改,您可以將vConsole注入到任何網頁(包括微信公眾號,移動端網頁,APP嵌入H5頁面)
如何修改規則,可以參考 (
2.3:『response-modific』響應修改)
FreeHttp還有一些其他的應用實踐可以參考下面內容