文件下载:http://files.cnblogs.com/files/dtdxrk/fiddler4_4.6.2.0_setup.rar

从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行 Google 一下,本文不再作科普,简单的说它可以代替Chrome开发人员工具中 Network 面板或 Firefox 的 HttpWatch 插件的功能。

我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你需要查看在手机上打开页面时,所产生的http请求却又不知道怎么做,那就继续往下看。(当然,大部分情况下,你可以直接在电脑上用Chrome或Firefox模拟手机浏览器来看)

Fiddler支持代理的功能,也就是说你所有的http请求都可以通过它来转发,Fiddler代理默认使用端口8888,不知道的同学有可能因此无法使用翻墙,因为端口冲突。

利用这点,我们可以在手机端设置http代理为Fiddler的代理服务器,使得手机应用的请求都通过Fiddler来转发,从而实现查看手机端页面请求的功能。

首先我们打开Fiddler->Tools->Fiddler Options在Connection面板里将Allow remote computers to connect勾选起来,确定后,关闭Fiddler并重新打开Fiddler。

此时,为了确保代理是正常工作的,我们可以在cmd里执行netstat -anop tcp查看Fiddler进程是否正常监听8888端口,如果服务没有正常开启,可以尝试使用其他端口,端口修改的位置,如上图位置。

从上图我们看到,进程ID为8392的Fiddler正在监听8888端口,说明代理已经在工作了。那么接下来我们要把手机端的代理设置为Fiddler的代理,代理设置需要一个ip和一个端口,ip就是Fiddler所运行的电脑的局域网ip地址,端口默认是Fiddler代理的端口8888,请确保手机所在的网段可以访问到电脑所在的网段,同一个局域网里一般没什么问题。

我的手机刷的是MIUI,设置代理比较简单,直接在对应的WIFI中设置一下就可以了。手机代理设置不懂的也可以留言或自行查找相关资料。接下来让我们来测试一下效果。

在手机端打开豆瓣,看下Fiddler监听到的请求:

正如我们所期望的,你可以开始调试你的手机端webapp请求了。

FAQ:
1.为什么我访问页面提示代理服务器连接失败?
在确认所有设置都没有错的情况下,可以尝试关闭防火墙或带防火墙功能的杀毒软件,如果关闭后可以访问,可以在防火墙设置里为Fiddler放行。

使用 Fiddler 代理调试本地手机页面的更多相关文章

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

    最近在做移动端的页面,但是移动端的调试很蛋疼.虽然说 90% 的功能都能用 chrome 下的模拟器来模拟解决,但是剩余的 10% 却只能在真机上调试.比如说一两个像素的误差,比如说只有真机上才能重现 ...

  2. 使用Fiddler代理调试本地手机页面

    从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具.我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你 ...

  3. fiddler 代理调试本地手机页面

    https://www.cnblogs.com/zichi/p/4944581.html

  4. 绕过限制,在PC上调试微信手机页面

    场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...

  5. 在PC上调试微信手机页面的三种方法

    场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不 ...

  6. 使用eclipse+fiddler+微信web开发者工具调试本地微信页面

    前面已经说了调试服务器上的微信页面,放链接:http://www.cnblogs.com/Gabriel-Wei/p/5977850.html 还有fiddler调试链接:http://www.cnb ...

  7. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  8. 利用fiddler和mock调试本地微信网页

    利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...

  9. 技术方案:在外部网址调试本地js(基于fiddler)

    1 解决的问题 1)        场景1:生产环境报错 对前台开发来说,业务逻辑都在js中,所以报错90%以上都是js问题. 如果生产环境出现报错,但是测试环境正常.这时修改了代码没有环境验证效果, ...

随机推荐

  1. 36大数据和about云的文章总结

    36大数据: 白话机器学习 http://www.36dsj.com/archives/78385 基于Hadoop的数据仓库Hive 基础知识(写的很好) http://www.36dsj.com/ ...

  2. 上下左右居中 无固定高的div

    <style type=“text/css”> #vc { display:table; background-color:#C2300B; width:500px; height:200 ...

  3. 五.python小数据池,代码块的最详细、深入剖析

    一,id,is,== 在Python中,id是什么?id是内存地址,那就有人问了,什么是内存地址呢? 你只要创建一个数据(对象)那么都会在内存中开辟一个空间,将这个数据临时加在到内存中,那么这个空间是 ...

  4. if语句的嵌套:从键盘输入3个实数,求其最大值。

    #include<stdio.h>void main(){ float a,b,c,max; scanf("%f%f%f",&a,&b,&c); ...

  5. Jmeter+ant+jekins环境配置

    Jmeter+ant+jekins 一.ant安装 1. ant安装 官网下载http://ant.apache.org 解压到想要的盘里面 2. 配置环境变量 (1)变量名:ANT_HOME 变量值 ...

  6. .net web开发——文件的上传和下载

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  7. 通过HttpServletRequest重写+filter 添加header

    问题说明 需要做的事情比较简单,就是通过filter 重写httpservletrequest ,同时给予request 添加header 主要是通过HttpServletRequestWrapper ...

  8. CSS3背景图片(多重背景、起始位置、裁剪、尺寸)

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  9. vue echarts 给双饼图添加点击事件

    在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...

  10. 机器学习---三种线性算法的比较(线性回归,感知机,逻辑回归)(Machine Learning Linear Regression Perceptron Logistic Regression Comparison)

    最小二乘线性回归,感知机,逻辑回归的比较:   最小二乘线性回归 Least Squares Linear Regression 感知机 Perceptron 二分类逻辑回归 Binary Logis ...