使用Charles 來實時替換環境上的文件

Charles 介紹： 

　　Charles 是一個HTTP代理服務器，反轉代理服務器，當瀏覽器連接Charles的代理訪問互聯網時，Charles可以監控瀏覽器發送和接收的所有數據。它允許一個開發者查看所有連接互聯網的HTTP通信，這些包括request, response 和 HTTP headers (包括cookies 與 caching 信息)。

 

第一步： 安裝Charles 

      打開官網： https://www.charlesproxy.com/，可以下載： 

　  

 

第二步 ： 配置Charles 

                1.    安裝證書

                       如果不安裝證書的話，會出現抓取到的文件，顯示unknown的狀態

　　　　　　打開charles，點擊help->SSL Proxying->Install Charles Root Certificate，如下圖所示：

 

　　　　　　

 

 　　　　　　接下來會彈出安裝窗口，如下圖： 

　　　　　　

　　　　　　點擊安裝證書進入證書導入向導，存儲位置根據自己要求選擇（我選擇了存儲在本地計算機），點擊“下一步”

　　　　　　這時向導提示選擇證書存儲，這里選擇“將所有的證書都放入下列存儲”，點擊“瀏覽”，在彈出的選擇證書存儲窗口中，選擇“受信任的根證書頒發機構”。

　　　　　　                                  

　　　　　　

 

　　　　　　

 

 　　　　　　點擊最后的“完成”按鈕，會彈出一個導入成功的彈框： 

　　　　　　

 

　　　　2.   Charles 上進行相應的配置

                     點擊菜單欄中Proxy->SSL Proxying Setting，會彈出SSL Proxying Setting的彈框。

　　　　　　首先要將“Enable SSL Proxying”勾選，表示開啟SSL。

　　　　　　點擊“Add”按鈕，添加需要抓取的網站。

　　　　　　

 

 第三步 ： 配置瀏覽器

　　　　　

　　　　 1.   點擊F12，打開開發者工具，network -> 勾選Disable cache，清除瀏覽器緩存。

　　　　 2.   以Chrome瀏覽器為例，打開瀏覽器的設置頁面： 

　　　　　　

 

　　　　　　點擊局域網設置： 

　　　　　　

 

　這樣就配置好了，抓包的界面如下圖所示：

　　　　　　

 

　第四步 ： 替換文件

 

　　　　　　1.  首先在瀏覽器中，保存自己需要修改的文件，選中文件夾，點擊右鍵，選中Save as 保存到本地

　　　　　　　

                   2. 本地修改完文件以后，打開Charles ，找到抓取到的需要替換的文件，點擊右鍵 --> Map Local....

　　　　　　

　　　　　　

 

　　　　　　在Local path 點擊“Choose”按鈕，選取本地需要替換的文件，刷新頁面，就大功告成啦！