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的默认端口号，也可自己设置)

步骤三：cmd命令打开窗口，用ipconfig命令拿到电脑ip（192.168.157.147）

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

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

验证是否生效：复制代码好之后，就在html文件内写上一行 <script type="text/javascript">alert(1);</script> ，然后用手机刷新浏览器，看看手机是否弹出1。弹出1说明fiddler替换文件生效。

步骤六：在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文件 

步骤十一：引入weinre中刚刚找到的script文件路径，在temp/index.html中加入这个script文件路径，<script src="http://192.168.157.147:8081/target/target-script-min.js#anonymous">

步骤十二：点击访问页面最上方的dubug的链接

备注：

1、以上如果需要调试1个或者多个js和css文件，都可用上述步骤来操作。

2、有时候weinre服务打开的链接，在浏览器内不出来，网速导致。

缺点：由于调试步骤较多较复杂，需要调试才使用fiddler调试，一般使用其他方式进行调试

二、实际场景应用

1、需求是要在电脑浏览器访问百度，在fiddler中替换成其他页面的地址 (本地的localhost:3000项目地址也可) ，但是携带的参数放在要替换的地址后面

答：按照下图设置后，在浏览器访问百度，可直接跳转到重定向的页面去，且参数也可带过去。不需要使用weinre服务。

2、本地代码替换线上全部的代码

答：只需要用fiddler替换本地的xxx.html文件，在xxx.html引入的其他文件都在本地

3、本地代码替换线上一个js、css、html文件

答：只需要用fiddler替换本地的xxx.js文件，或者其他单独的文件，如果需要替换多个，可设置替换多个文件

三、问题

1、如果要抓https上的文件，需要先在fiddler上安装https证书

备注:路径1: fiddler抓包相关原图片

        路径2:  fiddler抓包相关图片集合