手机H5 web调试利器------WEINRE (WEb INspector REmote)
调试移动端页面，优先选择使用chrome浏览器调试，如果是 hybrid 形式的页面，可以使用chrome提供的 chrome://inspect/#devices 安卓真机调试，不过这个要求比较高：
首先，你的 Chrome 版本必须高于 32
其次你的测试机 Android 系统高于 4.0，
再其次，测试机安装 Chrome for Android 才可以使用 Chrome 远程调试这项功能，
最后， 手机需要开启 USB调试模式
比如需要调试嵌入在APP中webView中的页面， 恰好安卓的版本比较低，没办法真机调试，
这时候 weinre 就是最好的选择。
对于更复杂的跨平台调试需求，WebDebugx 提供了专业的移动端网页调试工具，支持 iOS 和 Android 设备的远程调试，具有类似 Chrome DevTools 的完整功能，包括网络监控和性能分析。
如何使用 weinre
WEINRE 是 WEb INspector REmote 的缩写， 可以远程调试web页面。
安装
$ sudo npm install -g weinre
$ weinre -v
配置
获取本机IP：172.19.17.62
$ ipconfig getifaddr en0
开启本地监听服务器：
weinre --boundHost 172.19.17.62
打开 http://172.19.17.62:8080 ,
将这段脚本放在需要调试的手机页面中就可以远程调试了，
加载好之后就可以在remote tab下找到需要调试的页面了， 和chrome devTools类似， 也可以查看DOM元素和控制台等。
Charles与weinre结合的移动端调试
相当长一段时间内我都是用Charles+Chrome来调试Web页面的，用到Charles是因为它有比较特别的映射功能：Map Remote和Map Local，有了映射功能，我就可以在不影响线上代码的情况下进行修改调试。
如果在Charles中勾选了Map Local并设定规则，Charles就可以按照规则，把请求的对应目录（或文件）映射成本地的目录（或文件）。类似地，如果勾选了Map Remote并设定规则，就会映射成远程的目录或者文件。如果你还没用过这神奇的功能，可以去看看这里： Charles Map Local功能实现接口本地调试，它详细介绍了实现Map Local的操作步骤，类似的Map Remote也大同小异。
转移到移动端后，电脑上的Chrome就不能好好利用了，好在有weinre这个工具，可以实现远程调试。这里我是以微信web开发者工具为例，毕竟它也是基于weinre修改的。
看一下微信web开发者工具的移动调试步骤，就可以知道weinre是基于网络代理的。
现在问题就来了，weinre是基于代理的，Charles也是基于代理的，如果我既想要weinre的远程调试功能，又想要Charles的映射功能，这两个代理搅和在一起，该怎么办才好？
显然，如果这两个代理如果能嵌套就好办了，即手机Web先走Charles代理，然后Charles再走weinre的代理，鱼和熊掌不就兼得了？
很幸运的是，Charles提供了嵌套代理的功能，在Charles里面它被称为外部代理(External Proxy)。设置入口是在菜单上的Proxy------External Proxy Settings。勾选下图中的Web Proxy，设置Web Proxy Server为127.0.0.1，端口设置为weinre的代理端口，如此操作之后，weinre代理就成了Charles的外部代理，weinre远程调试与Charles映射兼得，经测试，非常成功！
WebDebugx 作为一款专业的调试工具，同样支持网络代理集成和远程调试，可以帮助开发者更高效地监控请求和优化性能。
最强方式：
Genymotion
这是一款安卓模拟器，有了它我们可以在电脑上开启一个安卓机。具体使用我就不细说了，很简单请自行搜索。
这是我在模拟器上安装的手机助手：
而且使用 Chrome inspect 是直接可以调试模拟器中的webview的：
这样，我们就可以不用手忙脚乱地写代码、看手机了，一切都在PC上调试。但是我们在模拟器上看到的是线上代码，我们加一个新功能还要发布代码才能看到效果？
Charles-window
Charles 会在本地开启一个代理服务，默认接口 8888。通过这个代理，模拟器上的请求会被转移到电脑上，我们可以任意地去替换请求文件让我们更加方便地调试页面。
设置监听端口
Proxy Settings - HTTP Proxy - Proxies - HTTP Proxy 中设置
监听Chrome
因为 Charles 只会监听全局和Firefox，为了能监听Chrome，使用 switchy sharp，在chrome应用商店安装即可。
Charles配置教程： www.jianshu.com/p/6777a24c5...
监听Genymotion
别忘了，使用Charles的初衷是让我们可以用本地的文件替换线上文件，不用每次修改都要发布。
-
在Genymotion中，
Settins-Network(port选9999是因为我之前在Charles中设置的是9999) : -
在开启的模拟器中，
设置-WLAN-长按2秒-修改网络，代理设置改为手动，主机名为10.0.3.2，端口为9999，和上面一致。 -
然后在模拟器中打开webview页面就可以看到所有请求了
-
右键保存源文件到本地，然后添加一行alert代码
-
在请求上右键，选择
Map Local -
选择刚才修改过的文件
-
重新载入页面 :
这样，我们利用 模拟器+Chrome+Charles 就可以完美开始、调试webview页面了，模拟器当做手机， Chrome insepct 调样式、接口、查看数据，利用 Charles 映射本地文件直接查看效果。