本篇介紹一種十分方便的方法為網站添加 vConsole 調試(通過篡改請求外部注入的方式，不需要您是網站的擁有者，主要用於調試線上站點)。

之前已經發過一篇《藉助FreeHttp為任意移動端web網頁添加vConsole調試》，不過那篇操作起來還是比較複雜。因為那篇帖子使用了大量篇幅介紹操作原理，至使簡單的問題也用了較長的篇幅，但是不是所有同學都喜歡那樣的風格，而且為了演示FreeHttp對不存在資源的mock，對於vconsole.min.js使用了一個本地資源，讓複雜度進一步加大。

 

現在藉助FreeHttp2.3.0的規則分享功能，讓操作變得十分簡單，幾乎不需要任何基礎就可以馬上看到效果。

 

 

1：您的計算機需要已經安裝Fiddler。 （如未安裝，請至官網下載安裝 //docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler）

2：進入Fiddler安裝目錄的Scripts目錄下，將FreeHttp.dll複製到該目錄下即可 。 (文件下載請至：//files.cnblogs.com/files/lulianqi/FreeHttp2.3.0zip  或 //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步

 

完成後您FreeHttp的 規則列表會自動添加分享的遠程規則，按上圖所示開啟篡改規則。

 

進入Bing.com

 

現在您可以看到效果，並且可以開始調試。

 

通過對規則進行簡單的修改，您可以將vConsole注入到任何網頁（包括微信公眾號，移動端網頁，APP嵌入H5頁面）

如何修改規則，可以參考 （2.3：『response-modific』響應修改）