【前端開發】利用Fiddler抓包工具進行本地調試


解決什么問題:

解決前端在本地聯調頁面 || 樣式 || 腳本時經常修改服務器代碼,浪費太多時間。

避免多人同時修改代碼產生沖突問題。可以在本地調完代碼之后,再貼到服務器上。

其實這個問題老早就開始想過一些辦法了。但是之前都是要在服務器中引入本地文件進行調試。有很多缺點。只適合部分場景。

現在這種方案受老吉上次分享會上的啟發。稍微做了一些修改寫的。可以說基本的前端問題都可以用這種方法來快速聯調解決。

 

利用Fiddler抓包工具進行本地調試方案:

 

所需工具(一次安裝及配置):

Fiddler:百度下載或(https://pan.baidu.com/s/1qYUii88

Php服務器:http://pan.baidu.com/s/1qXDljgK

對移動端抓包配置:

手機和電腦同時連接一個wifi。如:MIGU

對該wifi進行設置 (你的電腦IP與你的fiddler端口)

image.png

對移動端請求進行抓包:

打開fiddler工具

image.png

移動端訪問頁面:

image.png

工具抓取到移動端的請求列表:

image.png

找到你要本地化的請求:(如:

http://wap.cmread.com/rbc/t/content/repository/ues/js/s109/indexV7.js?time=201712291849

)àAdd Rule

image.png

 

創建本地服務器:

下載一個本地php服務器安裝包(如上所需工具

下一步下一步安裝即可(一次安裝配置)

安裝完成后,進入桌面的某個文件夾:

image.png

在文件夾內創建你要調試的文件(如:將你要調的文件另存到本地指定位置):

image.png

啟動php服務器,端口號設置80,開始&訪問http://你的ip:80

 

image.png

得出你創建的腳本的地址為:http://你的ip/cmread/rbc/t/indexV7.js

 

工具實現請求重定向到本地文件:

替換:

image.png

修改本地代碼:

image.png

刷新手機頁面結果:(本地調試起作用了,且並不影響現網)

image.png

本地調試完之后,將調試成功的代碼放現網,再將工具的此勾選去掉即可驗證現網。

image.png

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM