移动端web如何在真机上进行调试

   在做移动端页面的时候，在chrome的手机模拟器上进行模拟测试界面。但是在真机上打开页面的时候，却出现界面或者是功能上的bug。所以我们做完移动端页面的时候，不妨先用真机进行调试本地手机页面。

   主要介绍使用过的两种方法

1.Fiddler代理调试

  Fiddler是一个web调试代理，能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据。

• 下载安装Fiddler
• 开启Fiddler的远程连接，Fiddler菜单栏 Tools->Fiddler Options  ->Connections,把Allowremote computers to connect选√，然后重启Fiddler。

• 获取本机ip地址：在cmd中输入ipconfig命令获取，记住IPv4地址

• 手机设置代理，打开设置-WLAN（手机和本机要在同一局域网）-找到代理，手动输入服务器名（即本机的IP——IPv4），端口（Fiddler上设置的端口号）

  设置完以上步骤就可以在手机上打开自己开发的网页并调试

2.spy-debugger调试

  spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。微信调试，各种webview样式调试、手机游览器的页面真机调试，支持：HTTP/HTTPS，无需USB连接设备。

  特性：

1. 页面调试+抓包
2. 操作简单，无需USB连接设备。
3. 支持HTTPS
4. spy-debugger内部集成了weinre、node-mitmproxy/AnyProxy.
5. 自动忽略原生APP发起的https请求，只拦截webview发起的https请求。对SSL pinning技术不会造成任何影响
6. 可以配合其他代理工具一起使用

  spy-debugger安装与使用：

1. 全局安装npm install -g spy-debugger，局部安装npm install spy-debugger
2. 启动spy-debugger，如果是局部安装，需要加node_modules/.bin
3. 设置手机HTTP代理，如何上面Fiddler获取本机的IP地址，spy-debugger的启动端口（默认是9888）
4. 手机安装证书(node-mitmproxy CA根证书) 

     扫一扫安装

spy-debugger启动界面，在手机端刷新页面之后，targets会有记录

页面编辑模式，启动命令：spy-debugger -w true

修改端口： spy-debugger -p 8888

设置外部代理(默认使用AnyProxy)：  spy-debugger -e http://127.0.0.0:8888

是否允许weinre监控iframe加载的页面(默认是false) ：spy-debugger -i true

是否只拦截游览器发起的https请求（默认是true） spy-debugger -b false

是否允许Http缓存（默认是false）：spy-debugger -c true

参考

https://github.com/wuchangming/spy-debugger