使用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」按鈕，選取本地須要替換的文件，刷新頁面，就大功告成啦！