最近在做移动端的页面,但是移动端的调试很蛋疼.虽然说 90% 的功能都能用 chrome 下的模拟器来模拟解决,但是剩余的 10% 却只能在真机上调试.比如说一两个像素的误差,比如说只有真机上才能重现的一些 bug(可能是因为 pc 机反应太快无法重现,可能是因为 chrome 下的 touch 跟移动真机的 touch 还有很大差别,等).之后请教了下测试妹子,学习了下用 fiddler 代理调试本地页面,实在是爽歪歪!! 1.安装 fiddler 很显然第一步要安装 fiddler 代理,我…

从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具.我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你需要查看在手机上打开页面时,所产生的http请求却又不知道怎么做,那就继续往下看.(当然,大部分情况下,你可以直接在电脑上用Chrome或Firefox模拟手机浏览器来看) Fiddler支持代理的功能,也就是说你所有的http请求都可以通过它来转发,Fiddler代理默认使用端口8888,不知道的…

文件下载:http://files.cnblogs.com/files/dtdxrk/fiddler4_4.6.2.0_setup.rar 从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行 Google 一下,本文不再作科普,简单的说它可以代替Chrome开发人员工具中 Network 面板或 Firefox 的 HttpWatch 插件的功能. 我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工…

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

场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不要拿去干坏事) 工具准备 方便调试的浏览器.个人喜欢Chrome,本文基于Chrome 43.0.2357.130 (正式版本) m (32 位)环境. 抓包工具,推荐fiddler4,当然你比较喜欢Wireshark的话也可以,反正只要是能抓到cookies就都可以 能编辑cookies的浏览器插…

场景 假设一个手机页面,开发者对其做了限制,导致只能在微信客户端中打开.而众所周知手机上非常不利于调试页面,所以需要能在电脑上打开并进行调试.这里针对常见的三种页面做一下分析,一一绕过其限制,(当然不要拿去干坏事) 工具准备 ‍‍‍‍1.方便调试的浏览器.个人喜欢Chrome,本文基于Chrome 43.0.2357.130 (正式版本) m (32 位)环境: 2.抓包工具,推荐fiddler4,当然你比较喜欢Wireshark的话也可以,反正只要是能抓到cookies就都可以: 3.能编辑c…

前面已经说了调试服务器上的微信页面,放链接:http://www.cnblogs.com/Gabriel-Wei/p/5977850.html 还有fiddler调试链接:http://www.cnblogs.com/Gabriel-Wei/p/5961404.html 今天说一下使用eclipse+fiddler+微信web开发者工具调试我们本地的微信页面. 1.我的是微信页面和后台页面放在一起了,微信这个项目要在eclipse里面跑起来,否则在手机微信的页面会报错---->由于目标计算机积极…

由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就相当于自己电脑上发出去的了. 不必修改host映射了,很方便的哦. 调试手机页面还有个工具叫:weinre,这个工具是在要调试的手机页面里面加载一个js,电脑开启一个weinre服务,通过google的控制台来调试手机页面. weinre调试参考博客:http://www.cnblogs.com/z…

利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走完整个流程,还是需要把代码发布到服务器上才可以测试.而发布服务器的速度总是要时间的,每次修改都发布服务器耗时较长,大大延长了开发时间.使用一种本地开发的技术就比较重要了. https是一种安全的认证,我们要进行伪造数据进行劫持的话就必需自签证书,通过系统信任就可以将https的数据指向任何我们想要的…

1 解决的问题 1)        场景1:生产环境报错 对前台开发来说,业务逻辑都在js中,所以报错90%以上都是js问题. 如果生产环境出现报错,但是测试环境正常.这时修改了代码没有环境验证效果,直接升级到生产环境风险又太高--(1)万一升级后依然不好使导致客户不耐烦呢?(2)万一牵连出别的问题呢? 此时需要一种方法,可以在生产环境的网址上调试本地的js文件. 2)        场景2:本地工程不给力 某个任务修改了js文件,进行单元测试时发现本地工程太慢,或者本地工程更新了代码后项目无法…

Fiddler 中的设置 1 查看 Fiddler所在 电脑的内网 ip地址. (cmd  > ipconfig 查看本机ipv4地址) 2 Fiddler 设置 允许远程设备连接: Fiddler    Tools > Options > Connections >  勾选  Allow remote conmuters to connect  开启后需要重启fiddler. 3 查看远程端口 默认为: 8888  可在  Fiddler  Tools > Options…

新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器. 工具/原料 Chrome浏览器 方法/步骤   打开 仿真面板.如图所示:   可以在 Device 选择设备. 可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸.…

随着 HTML5 的急速增长,现在越来越多的人,开始涉及到移动终端的 Web 开发领域,但手机端始终没有 PC 端这么多的调试工具.即使 PC 端浏览器模拟 user-agent 进行开发,也可能会发生移动终端和 PC 端浏览器渲染不一致的问题. 所以,最好还是在真正的手机端开发调试,但,怎么抓包呢? 今天,就向大家介绍 Fiddler 如何抓取 Android 手机浏览器上的数据包. 众所周知,Fiddler 是通过代理来实现数据捕获的.对 Android 手机来说,也是通过将网络连接的代理指…

spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址:https://github.com/wuchangming/spy-debugger     特性 1.页面调试+抓包      2.操作简单,无需USB连接设备      3.支持HTTPS.      4.spy-debugger内部集成了weinre.node-mitmproxy.AnyPr…

1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,我们使用技术将手机网页调试信息分离,实现一种能在大屏幕.高配置PC上来调试小屏幕.低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI). 1.1主要功能 Android平台UC浏览器开发者版,主要支持以下功能: DOM查看和修改 JavaScript调试.CSS调试 网络状态查看 资源文件查看 Console控制台…

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS…

fiddler工具给手机设置代理之后,手机竟然上不了网了,尝试了N种解决方法,终于给解决了,因此,记录下来以备不时之需. 1.fiddler给手机添加代理 打开fiddler工具->Tools->Fiddler Options,记住下面的端口号: 电脑和手机连接同一个网络,确保在一个局域网.电脑端(cmd-ipconfig)查看电脑的ip地址: 其中,ipv4地址就是电脑的ip地址. 手机端设置WLAN种给网络设置代理,选择对应的WLAN,对该网络进行编辑,代理选择手动,主机名填上面电脑ip地…

第一步 打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] 第二步 打开Mac上Safari的开发者模式,流程是[Safari]->[偏好设置]->[高级]->[在菜单栏中显示"开发"菜单]勾选 第三步 用数据线将iphone手机和mac连接起来,在电脑的safari中按照流程执行:[开发]->[手机名称]->[正在调试的网站] 最后 就可以按照调试pc端页面的思路来调试ios的页面…

Fiddler代理手机抓包 0. 安装Fiddler 1. 安装HTTPS证书并允许远程连接 Tools - Options 点击OK后重启Fiddler. 确保手机与当前电脑在同一局域网. 然后在手机WLAN设置中找到[代理设置],设置代理为[手动],地址:192.168.1.100(这里是自己电脑的IP),端口:8899(可以自定其他不被占用端口).点击保存.Andriod和iOS应该差不多. 然后在手机浏览器打开 192.168.1.100:8899(你自己电脑的ip 截图只是示例),出现…

第一步:打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] ,如图1.图2 图1 图2第二步:打开Mac上Safari的开发者模式,流程是[Safari]->[偏好设置]->[高级]->[在菜单栏中显示“开发”菜单]勾选 图3第三步:用数据线将iphone手机和mac连接起来,在电脑的safari中按照流程执行:[开发]->[手机名称]->[正在调试的网站] 图4最后,就可以按照调试pc端页面的思路来调…

前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正.放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容.下载以后直接安装就好. 1.下…

1.       目的 在模拟器的浏览器或app hybrid开发中遇到chrome调试代码为线上代码或者混淆代码时,可以利用fiddler/charles为genymotion配置代理, 可以方便的将代码替换为本地代码,此外还可以针对访问服务进行截获分析. 2.       配置 2.1    配置fiddler本地代理 2.1.1 Tools->Option->Connections 选中Allow remote computers to connect,并设置端口号(默认8888),如下…

http://www.cr173.com/html/37625_1.html 做开发需要抓取手机app的http/https的数据包,想看APP发出的http请求和响应是什么,这就需要抓包了,这可以得到一些不为人知的api,比如还可以干些“坏事”... 需要工具: Fiddler抓包软件 Android 手机一台 一.如何使用 Fiddler2  下载完成后安装,安装过程就不贴图了. 如下图设置Fiddler 代理: 点击OK,在这里代理就设置完成,一定要重启软件配置才生效,下面是手机端的设置.…

Fiddler作为代理服务器,可以拦截到手机发出的请求,再经过Fiddler发送到服务器,获取到服务器响应的数据,这个过程,只要设置配置好了,使用过程不受影响. 要想抓取到手机的包,先要给手机设置一个代理,告诉手机要将请求发送给这个代理,具体怎么做呢?继续往下看 一个重点:在电脑开启的Fiddler要想抓取手机的包,电脑和手机要在同一个网络下哦!!!这个需要敲重点的.一般笔记本.手机连接同一个WIFI 在确保电脑和手机处于同一个网络下,给手机设置代理,操作步骤如下: 设置 ->无线网络 ->选…

做开发需要抓取手机app的http/https的数据包,想看APP发出的http请求和响应是什么,这就需要抓包了,这可以得到一些不为人知的api,比如还可以干些“坏事”... 需要工具: Fiddler抓包软件 Android 手机一台 一.如何使用 Fiddler2  下载完成后安装,安装过程就不贴图了. 如下图设置Fiddler 代理: 点击OK,在这里代理就设置完成,一定要重启软件配置才生效,下面是手机端的设置. 浏览器抓包和调试工具(Fiddler) 4.6.1.0 官方最新版评分: 5…

Fiddler是15年初,在千牛中做超级促销插件时,发现没有root的Android机和没有越狱的iPhone无法修改host,因此没办法测试.为了让我这个磨人的PD也能看到,开发推荐了Fiddler.而且,通过抓取手机上的http/https的请求,也可以帮助测试和开发调试和排查问题. 备注:千牛是淘宝的一个app,超级促销属于一个hybird app,基于千牛的环境开发的. PC上安装Fiddler之后,可以抓取各种浏览器的请求,通过一些设置可以获取iPhone.安卓手机.windows p…

Android抓包方法(一) 之Fiddler代理 前言: 做前端测试,基本要求会抓包,会分析请求数据包,查看接口是否调用正确,数据返回是否正确,问题产生是定位根本原因等. 不管是之前做HTML5手机项目测试,还是现在的企邮app测试,经常需要抓包,做前端开发基本第一时间会想到Fiddler,的确Fiddler比较强大方便,本文主要以Android手机为例介绍通过Fiddler抓手机数据包,Iphone.Ipad.Win Phone等可设代理的手机,也均可用此方法. 转载请注明出处 作者:Fin…

PC上安装Fiddler之后,可以抓取各种浏览器的请求,通过一些设置可以获取iPhone.安卓手机.windows phone的请求.具体的工作原理我也不多说(哼,绝对不是因为我不懂XD),主要说下如何配置来抓取手机上的请求,以iPhone为例. 准备工作:A.安装Fiddler,可以去官网上下载:B. 手机和电脑在同一个网络里. 1 对Fiddler进行一些设置,配置完后记得要重启Fiddler! a. 打开Tools > Fiddler Options >HTTPS,capture HTT…

http://www.cr173.com/html/20064_1.html Fiddler绝对称得上是"抓包神器", Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP/HTTPS请求. Fiddler能捕获ISO设备发出的请求,比如IPhone, IPad, MacBook. 等等苹果的设备.  同理,也可以截获Andriod,Windows Phone的等设备发出的HTTP/HTTPS. 前提条件:安装Fiddler的机器,跟Iphone…

解决Fiddler无法抓到手机的会话包   使用Fiddler抓手机的会话包涉及多个方面,所以容易出现无法抓取包的情况.遇到这类问题,需要按照以下顺序进行检查和排除.   (1)在Fiddler中设置监听的端口号8888,并开启代理功能.   (2)使用netstat命令,查看Fiddler是否监听端口8888.出现127.0.0.1:8888表示已经监听本机的:出现IP地址:8888,表示已经监听其他主机的.   (3)如果没有出现IP地址:8888,就需要在Windows防火墙中,添加Fid…