Fiddler抓包远程调试篇

Fiddler抓包远程调试篇

         由于部分同学没有mac电脑或者其他条件限制,不方便在ios手机上调试,或者在4.3版本的安卓手机以下在客户端大厅内不能debug,我们只能采用fiddler抓包进行远程调试。

         远程调试使用weinre,weinre是一款非常好用的远程调试工具。功能与网页浏览器的开发者工具基本类似,但这个工具更适合用于移动端web的调试。

抓包的作用:

1.可使用的电脑:windows或mac电脑调试android和ios手机

2.可调试的手机有(所有手机):安卓4.3版本以下、安卓4.3以上、ios手机

3.可抓取移动端(android和ios)或pc端从服务器端返回的响应报文

4.可解决与服务端交互的跨域问题,在fiddler工具内可下发跨域头

5.域名替换,用本地代码可替换线上的代码

fiddler抓包步骤如下:(以windows电脑为准,mac电脑需加前缀)

步骤一:pc电脑打开下载fiddler,一部手机,不需要数据线

步骤二:打开fiddler工具,设置监听端口号,默认是8888

Fiddler抓包远程调试篇_第1张图片

(查看fiddler的默认端口号,也可自己设置)

步骤三:cmd命令打开窗口,用ipconfig命令拿到电脑ip(192.168.157.147)

步骤四:前提条件是电脑和手机在同一网络下,打开手机显示wifi网络页,点击或长按,进入到代理设置,进入到手动设置,服务器填电脑ip,端口填fiddler工具设置的端口号,使用默认情况就填8888

Fiddler抓包远程调试篇_第2张图片

步骤五:在手机任意浏览器访问网页后,在fiddler框内拿到项目的入口文件(如:********/bestpayMobdown.html),把此文件里面的代码赋值出来,保存在电脑的一个文件夹目录下:(如:  temp/down.html)(如果状态码是304,拿不到入口的bestpayMobdown.html文件,就是浏览器有缓存,状态码为200就可复制bestpayMobdown.html里面的内容,手动保存一个down.html文件)

验证是否生效:复制代码好之后,就在html文件内写上一行  ,然后用手机刷新浏览器,看看手机是否弹出1。弹出1说明fiddler替换文件生效。

Fiddler抓包远程调试篇_第3张图片

步骤六:在fiddler内设置一个路径,目的是手机访问的线上或者本地起的一个服务的index.html,设置后就是访问本地刚刚手动保存的temp/index.html文件(可查看图片上的说明文字)

步骤七:查看设置是否有效,在temp/index.html文件内打印一个alert(1),再次刷新手机浏览器,如果浏览器显示alert(1)的内容,说明设置代理成功了,否则要查找原因

注意:如果找不到或者下载不了入口文件,可排查出浏览器是否是有缓存,拿到状态码是304;清除缓存地方:应用管理 --》 清除某个浏览器的数据

远程调试步骤如下:使用weiner调试 (weiner远程调试结合fiddler调试)

调试链接:weinre的使用 - migo_ - 博客园(不明白可访问)

步骤八:如果电脑未安装weinre服务,需npm -g install weinre 安装

步骤九:启动weinre服务  weinre --httpPort 8081 --boundHost 192.168.157.147

httpPort:调试服务器运行的端口,默认8080,一般8080端口被占用,所以换个端口号

8081:端口号,可自己定义,必须与fiddler的端口不同,或者本地其他端口号不同

192.168.157.147:本地电脑的ip地址

步骤十:启动服务后,用chrome浏览器打开 http://192.168.157.147:8081,然后找到script文件 

Fiddler抓包远程调试篇_第4张图片Fiddler抓包远程调试篇_第5张图片

步骤十一:引入weinre中刚刚找到的script文件路径,在temp/index.html中加入这个script文件路径,

你可能感兴趣的:(项目现成,fiddler,前端,测试工具)