真机调试方法
  1. chrome+Android/IOS
  2. fiddler（windows）/Charles（Mac）
  3. weinre、spy-debugger、vConsole

代理原理

chrome+Android调试

  • 方法1：chrome+Android调试
  1. 打开开发者模式，打开开发人员选项，打开USB调试
  2. 手机下载chrome浏览器
  3. 数据线连接
  4. 手机网络和电脑网络保持一致
  5. 在chrome://inspect/#devices中点击inspect调试页面
  • 方法2：fiddler（windows）/Charles（Mac）
  1. 打开fiddler，设置代理端口，Fiddler–>Tools–>Options…–>Connections，proxy：8888
  2. 打开手机，网络设置，选择http代理，手动设置ip和端口（8888）
  3. 手机浏览器打开任意网站，fiddler会提示连接进行抓包（这种方法存在局限性，只能看到接口详细情况，不能调试到交互和页面上元素）
  • 方法3：Weinre、Spy-Debugger、vConsole

  1. Spy-Debugger

    一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

    spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
    Windows 下npm install spy-debugger -g

    • 第一步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）
    • 第二步：命令行输入spy-debugger，按命令行提示用浏览器打开相应地址。
    • 第三步：设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)。
      • Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
      • iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动
    • 第四步：手机安装证书。
    • 第五步：用手机浏览器访问你要调试的页面即可。

  2. vConsole

1
2
3
4
5
6
7
8
npm install vconsole

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
fiddler调试技巧

【注意】：使用fiddler时，需要开启chrome的插件，切换为fiddler模式

如何配置使其能抓取chrome请求

  1. 设置fiddler端口

详细步骤

1
2
3
4
打开工具Fiddler，在Tools选项里面点击options 
对https进行配置
connections下勾选允许远程连接
重启fiddler
  1. chrome安装SwitchyOmega插件

SwitchyOmega插件下载地址

直接添加扩展程序即可。
如果chrome无法离线安装扩展程序，则采用以下解决方案：

1
2
3
下载扩展包，并将.crx后缀修改为.rar。
将上面的.rar文件解压
在扩展程序页面选择Load unpacked选项，然后选中刚才解压的文件夹，确定。插件安装成功。

点击插件图标，选择系统代理，即可完成抓包。

  • 本地代理

使用willow做本地代理，访问在线地址

chrome打开fiddler代理，如果fiddler中出现颜色高亮，则是成功代理到了本地
坑：如果页面network中还有请求不到url，则检查是否是域名重复同样代理到了本地，导致找不到资源。应该add rule（选择对应域名，设置为ignore，并将其提前即可）

  • Auto Responsder重定向

Fiddler 的AutoResponder标签栏允许你从本地返回文件，而不用将http request 发送到服务器上。
1）选中Enable automatic responses 和unmatched requests passthrough，即打开auto responsder功能，标签栏的小闪电变绿了。
fiddler3.png
2）添加规则
可以点击Add Rule来添加规则。
同时也可以在fiddler抓包记录中找到自己定义返回的会话，把此会话拖至AutoResponder下。
3）设置响应
如图所示：
fiddler4.png
1中填的是请求，前面不加EXACT:就代表模糊匹配，2中便是自己定义的返回会话。
autoresponder可以自定义返回响应参数啊，甚至自定义返回响应图片。可以先保存正常的js文件，然后修改里面的参数，在2处选择修改后的Js文件，下次请求的返回响应便会是修改后的Js。
设置完毕后，再次请求，可以看到fiddler抓包记录，IP为空，说明是从本地读取响应了。

  • 使用fiddler修改hosts

点击Willow进入willow标签页，在空白处点击右键，新建工程，在刚刚新建的工程名字上点击右键，然后选择添加hosts，如所示：
fiddler5.png
fiddler6.png

  • 过滤会话

测试时，只想看到cgi到请求，过滤掉js等其他记录，可以在fiddler右侧选择：
fiddler7.png
另外如果只想看对特定IP的请求，可以选择只显示指定IP的记录
fiddler8.png

  • 抓取手机http请求

1.打开Fiddler,然后Tools-> Fiddler Options .切换至HTTPS面板，选中”Decrpt HTTPS traffic”,设置Fiddler可以截获HTTPS请求，如图5所示。
fiddler9.png
2.切换至Connections面板，选中”Allow remote computers to connect”.允许别的机器把HTTP/HTTPS请求发送到Fiddler上来，之后重启fiddler生效，如图6所示：
fiddler10.png
3.将手机与电脑接入同一个网络内，即连接同一个wifi，然后在手机的wifi高级设置里面添加代理ip与端口，代理ip是电脑在这个wifi下获取到的ip，将鼠标悬停至fiddler右上角的Online上，就会显示出本台电脑正在工作的所有ip，找出哪个是与手机处在同一个网络中的ip，填入手机的代理服务器中，如图7所示。
fiddler11.png
4.保存好之后，当用手机访问网页，或者使用手机app访问网络时，就可以在fiddler抓到手机发出的请求了，如图8所示。
fiddler12.png