【前端开发】利用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

 

posted @ 2018-02-02 18:45 海瑞菌·博客 阅读(...) 评论(...) 编辑 收藏