概要
本篇介紹一種十分方便的方法為網站新增 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還有一些其他的應用實踐可以參考下面內容