【前端开发】利用Fiddler抓包工具进行本地调试

时间:2022-02-12 11:46:59

解决什么问题:

解决前端在本地联调页面 || 样式 || 脚本时经常修改服务器代码,浪费太多时间。

避免多人同时修改代码产生冲突问题。可以在本地调完代码之后,再贴到服务器上。

其实这个问题老早就开始想过一些办法了。但是之前都是要在服务器中引入本地文件进行调试。有很多缺点。只适合部分场景。

现在这种方案受老吉上次分享会上的启发。稍微做了一些修改写的。可以说基本的前端问题都可以用这种方法来快速联调解决。【前端开发】利用Fiddler抓包工具进行本地调试

利用Fiddler抓包工具进行本地调试方案:

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

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

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

对移动端抓包配置:

手机和电脑同时连接一个wifi。如:MIGU

对该wifi进行设置 (你的电脑IP与你的fiddler端口)

【前端开发】利用Fiddler抓包工具进行本地调试

对移动端请求进行抓包:

打开fiddler工具

【前端开发】利用Fiddler抓包工具进行本地调试

移动端访问页面:

【前端开发】利用Fiddler抓包工具进行本地调试

工具抓取到移动端的请求列表:

【前端开发】利用Fiddler抓包工具进行本地调试

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

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

)àAdd Rule

【前端开发】利用Fiddler抓包工具进行本地调试

创建本地服务器:

下载一个本地php服务器安装包(如上所需工具

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

安装完成后,进入桌面的某个文件夹:

【前端开发】利用Fiddler抓包工具进行本地调试

在文件夹内创建你要调试的文件(如:将你要调的文件另存到本地指定位置):

【前端开发】利用Fiddler抓包工具进行本地调试

启动php服务器,端口号设置80,开始&访问http://你的ip:80:

【前端开发】利用Fiddler抓包工具进行本地调试

得出你创建的脚本的地址为:http://你的ip/cmread/rbc/t/indexV7.js

工具实现请求重定向到本地文件:

替换:

【前端开发】利用Fiddler抓包工具进行本地调试

修改本地代码:

【前端开发】利用Fiddler抓包工具进行本地调试

刷新手机页面结果:(本地调试起作用了,且并不影响现网)

【前端开发】利用Fiddler抓包工具进行本地调试

本地调试完之后,将调试成功的代码放现网,再将工具的此勾选去掉即可验证现网。

【前端开发】利用Fiddler抓包工具进行本地调试