转载

如何用 fiddler 代理调试本地手机页面

最近在做移动端的页面，但是移动端的调试很蛋疼。虽然说 90% 的功能都能用 chrome 下的模拟器来模拟解决，但是剩余的 10% 却只能在真机上调试。比如说一两个像素的误差，比如说只有真机上才能重现的一些 bug（可能是因为 pc 机反应太快无法重现，可能是因为 chrome 下的 touch 跟移动真机的 touch 还有很大差别，等），之前也看过一些介绍，比如利用chorme调试手机网页，但是要用 usb 连接，而坑爹的电脑装不了手机的驱动（要fq下载驱动）。之后请教了下测试妹子，学习了下用 fiddler 代理调试本地页面，实在是爽歪歪！！

1、安装 fiddler

很显然第一步要安装 fiddler 代理，我直接下了百度软件中心的，1.2M，当然也可以去官网下。fiddler 是用 C# 写的，所以要安装 .net 的环境（ 所以 fiddler 只能运行在 windows 环境中 ）。如果下的 fiddler2，得安装 .net framework2，如果下的是 fiddler4，得安装.net framework4。在安装 fiddler 的时候如果你的环境没配置好，安装过程会提醒你去下载的。

2、fiddler 配置

一路 next 后安装完 fiddler，打开软件。 Tools -> Fiddler Options -> Connections

完成如下配置：

如何用 fiddler 代理调试本地手机页面

3、移动端网络配置

移动端和 pc 端 必须连同一个网段的网络 ，连同一个 wifi 就 ok 了，或者 pc 端可以开个热点分享网络给移动端，这点我没有试过不过理论上应该可行（可以查看下手机和 pc 机的 ip 是否在同一网段）。

移动端连上网络后还要进行一些高级设置，我这边手机上先长按该 wifi 网络名称，然后点 修改网络 ，然后勾选 显示高级选项 ，代理设置改为手动， 代理服务器主机名 改为 pc 端的 ip（在 cmd 下用 ipconfig 命令得到的 ipv4 地址的值），将 代理服务器端口 设置为 8888（fiddler默认端口），点击确定完成设置。

如何用 fiddler 代理调试本地手机页面

4、调试

接下去就可以用手机浏览器调试本地页面了，但是还是有几点要注意。

在本地搭建好服务器后， 不能用 localhost 在移动端进行访问 ，也不能用 127.0.0.1。可以随便绑定一个地址，比如 127.0.0.1 www.cnblogs.com （hosts 文件中，如果之前修改了 vhosts 文件，那么 vhosts 文件也要一并修改）
我手机上有 4 个浏览器，uc、chrome、2345以及百度，前三个都能得到预想的结果，但是百度浏览器不知道为何却不能重定向。有时候不行的话或者可以试试别的浏览器，对我而言一个浏览器能出结果就已经 ok 了。

如何用 fiddler 代理调试本地手机页面