手机上的页面调试方法小结
最近在开发一个微信上的网站，前期都是用微信开发者工具进行预览，这阶段上真机上看效果发现有电脑上浏览时没有的bug，不管在android还是ios都有bug。。。。而且表现还不一样。。。花了段时间了解如何在手机上调试，在这里总结下。
手机上的前端代码的运行环境
在ios上，由于系统的限制，不管是是在自带浏览器safari中访问，或者是其它app中的webview的方式访问，前端代码的运行环境都是safari。因为所有ios上的app中的webview页面（不管是ios上的chrome，还是微信）底下用的也是跟safari一样的内核。 而在android上，各个浏览器或者是各个app中的webview都可以用自己的内核，微信在webview中用的是chrome内核的修改版X5（好像又称TBS？）。
手机上的前端调试方法
就目前我看到的来说，一共有两类方法：
- 在浏览器或者app支持的情况下，打开调试设置并连接电脑进行远程调试
- 用网络代理抓包调试，用抓包工具结合weinre嵌入调试代码以达到调试的目的
第一种办法功能最为强大全面，但适用条件较为苛刻，需要应用（浏览器、app）本身有支持（也就是说要可以打开调试接口给pc用）。 第二种较为通用，只要在同一个局域网下，手机设置网络代理为pc就行，就可以达到抓包的目的，而其中的调试功能是依靠weinre嵌入到前端的代码实现的（所以不能算是真正的调试。。。而且嵌入的代码感觉也可能影响原有前端代码的运行。）。 所以条件允许的情况下，尽量使用第一种方法。仅在一种情况下第二种方法能得到比第一种方法更多的调试信息：页面发生跳转。第一种调试，针对的某一个具体的网页的调试，而在发生跳转的情况下（例如微信登陆），并不能捕捉跳转后页面的信息。第二种，抓包，针对的是通过代理的所有请求，因此即使发生页面跳转也可以。
android上的页面调试
浏览器太多，这里只考虑chrome和微信里的webview。
在开发者选项中，打开android上的usb调试选项，连接电脑后信任电脑即可。具体参考这篇文章:远程调试 Android 设备使用入门.顺利的话，在手机端的chrom随意打开一个页面，在pc上的chrome的远程调试中可以看到如下的：
要调试微信里面的页面，还需要打开调试开关。在微信中访问微信页面调试设置页面debugx5.qq.com,在信息中的TBS setting,打开需要的调试功能即可。清理页面缓存以及cookies的功能也是在此页面中。
ios上的页面调试
情况较为单一，反正都是safari，但也是分为两种情况，一是safari直接浏览，二是app（比如微信）中的webview。
如果要像上述那样在pc上利用chrome远程调试的话，需要先在pc上安装itunes（一定要安装itunes！似乎是起到了连接ios设备调试功能的驱动作用），在ios里的safari设置需要打开web检查器，接着使用此软件：ios-webkit-debug-proxy。按照ios-webkit-debug-proxy的使用说明一步步进行，就可以在chrome上调试ios设备上直接用safari浏览器打开的页面。
那对于app中的webview呢？如果是自己开发的app并且处于开发环境下的话，似乎可以在mac中也可以利用上述的ios-webkit-debug-proxy在chrome中进行调试。。。但微信的话，就没办法这么调试了，只能使用第二种方法-网络代理调试。这类软件挺多的（之前用的mitmproxy，也不错，抓包看移动设备的http/https请求和返回），有一款比较好用的是spy-debugger.原理都一样，在pc上启动一个代理服务，把移动设备的上网设置为从此代理上走并信任代理服务的ca证书（用于https流量），然后就可以在pc上的代理服务看抓包的内容了，集成了weinre的spy-debugger还自动插入了调试需要的代码。