解決什么問題:
解決前端在本地聯調頁面 || 樣式 || 腳本時經常修改服務器代碼,浪費太多時間。
避免多人同時修改代碼產生沖突問題。可以在本地調完代碼之后,再貼到服務器上。
其實這個問題老早就開始想過一些辦法了。但是之前都是要在服務器中引入本地文件進行調試。有很多缺點。只適合部分場景。
現在這種方案受老吉上次分享會上的啟發。稍微做了一些修改寫的。可以說基本的前端問題都可以用這種方法來快速聯調解決。
利用Fiddler抓包工具進行本地調試方案:
所需工具(一次安裝及配置):
Fiddler:百度下載或(https://pan.baidu.com/s/1qYUii88)
Php服務器:http://pan.baidu.com/s/1qXDljgK
對移動端抓包配置:
手機和電腦同時連接一個wifi。如:MIGU
對該wifi進行設置 (你的電腦IP與你的fiddler端口)
對移動端請求進行抓包:
打開fiddler工具
移動端訪問頁面:
工具抓取到移動端的請求列表:
找到你要本地化的請求:(如:
http://wap.cmread.com/rbc/t/content/repository/ues/js/s109/indexV7.js?time=201712291849
)àAdd Rule
創建本地服務器:
下載一個本地php服務器安裝包(如上所需工具)
下一步下一步安裝即可(一次安裝配置)
安裝完成后,進入桌面的某個文件夾:
在文件夾內創建你要調試的文件(如:將你要調的文件另存到本地指定位置):
啟動php服務器,端口號設置80,開始&訪問http://你的ip:80:
得出你創建的腳本的地址為:http://你的ip/cmread/rbc/t/indexV7.js
工具實現請求重定向到本地文件:
替換:
修改本地代碼:
刷新手機頁面結果:(本地調試起作用了,且並不影響現網)
本地調試完之后,將調試成功的代碼放現網,再將工具的此勾選去掉即可驗證現網。