移动端调试的一些方法

这几种方法都是提供一个 Inspect, 相当于为移动端提供一个远端的 Inspect。

Chrome Inspect
chrome浏览器自带的调试功能，能调试大多数基于 webWiew 或者通过 chrome 浏览器打开的页面

打开方法:
1. 将手机和电脑通过USB链接，手机需要进入开发者模式，允许调试，并对当前电脑授权
2. 电脑上在 chrome 浏览器地址栏输入:
3. 可能需要重新刷新页面，页面上会列出可供调试的页面链接，点击对应的链接就可对对应的移动端页面进行对应的调试
chrome inspect 的问题:
- 必须要翻墙才可以（感觉该服务从Google的服务器上绕了一圈的感觉，可能是错觉吧反正不连代理无法调试打开的页面就一直是空白页面）
- 支持场景有限很少比如不能调试UC，微信等。
Safari 开发者工具
safari的开发工具是调试 ios 设备的工具。

前期设置:
Mac端: Safari >> 偏好设置 >> 高级勾选 "在菜单栏中显示'开发'菜单"
ios设备端: 设置 >> Safari >> 高级 >> web检查器设置web检查器为开启状态

使用方法:
连接 ios 设备和 mac 电脑在 ‘开发’ 中找到要调试的设备选择用于开发(或者对应页面的title列表), Safari 会为当前要调试的页面新建一个 inspect, 在 inspect 上可以完成常见的调试功能。

存在的问题：
和Chrome一样支持场景有限。
Weinre 远端调试
最后是一种通用的移动端开发时调试解决方案 Weinre Web Inspect Remote
首先了解一下Weinre的原理和结构:
- 目标页面(target) : 被调试的页面，页面已嵌入 weinre 的远程脚本.
- Debug 客户端(client) : 本地的 Web Inspector 调试客户端
- Debug 服务器(agent) : 一个HTTP Server, 为目标页面与Debug客户端建立通讯。
client <------> Debug agent <------> Debug client

安装 weinre (以node环境为例):
```
  npm install weinre -g 
```
运行 weinre:
- agent 端:
  在 Terminal 终端中键入
```
  weinre --httpPort 8081 --boundHost -all-
```
  上述命令在本地电脑上启动一个 8081 端口的 HTTP Server 作为 weinre 的 Debug 服务器(agent)
  
  weinre 运行的参数如下:
```
  options:
      --httpPort     port to run the http server on        default: 8080
      --boundHost    ip address to bind the server to      default: localhost
      --verbose      print more diagnostics                default: false
      --debug        print even more diagnostics           default: false
      --readTimeout  seconds to wait for a client message  default: 5
      --deathTimeout seconds to wait to kill client        default: 3*readTimeout

  --boundHost can be an ip address, hostname, or -all-, where -all-
  means binding to all ip address on the current machine'
```
- client 端
  在浏览器中访问: localhost:8081 (由于weinre技术基于webInspect实现，必须要是拥有webInspect的浏览器才能完成正确的调试工作)
开始调试:
移动端在同样的 wifi 条件下，访问目标页面。本地的 localhost:8081 页面会展示出对应当前可调式的页面，点击对应的页面即可开始调试(使用weinre调试不会打开新的窗口调试，选择列表选择的当前页面就是正在调试的页面)