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

解决什么问题：

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

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

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

现在这种方案受老吉上次分享会上的启发。稍微做了一些修改写的。可以说基本的前端问题都可以用这种方法来快速联调解决。

利用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

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

替换：

修改本地代码：

刷新手机页面结果：（本地调试起作用了，且并不影响现网）

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