Android上Chrome的远程调试

Chrome打开网页时，按下F12可以对网页的加载情况进行查看，也可以对JS进行调试，是个很不错的工具，那么对于Android上的WebView，其实也可以这样进行调试。但有几个问题需要注意一下。

首先，由于是基于Chrome的，所以你调试的网页，一定要在Chrome上打开，这就包括Chrome浏览器和Chrome内核，在android上使用Chrome浏览器打开自然是可以调试，其实你在Android上写一个基于WebView的APP，也一样可以进行调试，但前提是，这个手机的WebView使用的是Chrome内核。

什么手机使用的WebView是Chrome内核呢？

1, android5.0以下的手机都不是chrome内核

2, android5.0的手机都是chrome内核

3, 原生android 5.1的手机都不是chrome内核，但小米手机的android5.0以上的手机都是chrome内核

第二，如果是基于WebView的APP想进行调试，那么切记要调用这个函数：WebView.setWebContentsDebuggingEnabled(true);因为只有这样调用之后，运行的chrome才是调试模式，才可以进行调试，这个debug模式，和android app的debug模式没有任何关系。

第三，网页的调试，有两端，一端是手机，一端是电脑（目前只支持linux和苹果），在电脑的chrome的版本记得要大于等于手机的，否则可能会因为协议不兼容出问题。

好了，终于可以调试了，调试的方法很简单，参见：https://developer.chrome.com/devtools/docs/remote-debugging

可以看得出来，两个chrome之间的连接，是通过adb进行连接的。

这种调试，也可以使用脚本进行记录，参见：

https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/recording-tracing-runs
那么问题来了，两个chrome之间调试的原理是什么呢？

查Google的资料，原来，Google给Chrome的调试做了一个DevTools, 这这玩意实际上是某个协议的实现，叫 Remote debugging protocol, 具体内容参见：

https://developer.chrome.com/devtools/docs/debugger-protocol，
DevTools的原理就是，两个chrome之间的底层搭起通信的桥梁，然后在上层，通过js的api，采用json数据的串行化作为消息载体，由host向client发送command，client收到后，在运行时向host发送回调Event，host收到这些Event之后，解析出来，并在本地创建一个http服务器，供用户访问查看。

注意，这两个chrome不能是同一个chrome tab，如果是同一个，会直接断开连接。

于是你就会问，既然有协议，是不是可以自己做一个调试器呢？当然可以，但前提必须是基于chrome运行啊，所以必须是chrome的扩展或者APP才行，Google给这个协议还封装了一个chrome.debugger API， 参见：

https://developer.chrome.com/extensions/debugger
事实上第三方的调试器已经有很多了，参见：

https://developer.chrome.com/devtools/docs/debugging-clients
这里面大多是基于chrome的插件或者app，也有一个例外，基于nodejs来写的。

还有自己写第三方插件的例子：

https://developer.chrome.com/extensions/samples
除了两个chrome的调试外，单个chrome，也提供了很多调试页面，可以通过chrome打开页面chrome:chrome-urls来查看。但是，悲剧的是，这个页面看起来是chrome浏览器提供的，手机上的chrome内核的webview并不能打开这个页面。

好了，差不多就是这些内容，然而我的初始问题并没有解决，我的初始问题是，对一个基于WebView的APP，这个APP怎么获得其访问网页的DNS解析时间、连接时间等？要知道Webview本身并没有提供这些接口！我研究调试器的初衷，其实是想通过APP自身模拟调试器来获得这些参数。但通过Google的文档发现，模拟调试器只能通过app或者插件来完成，而chrome的插件和app是需要安装的，再说了android里面的chrome内核毕竟不是chrome，并不支持插件安装。

还好，通过查这些资料，我发现H5其实是直接提供了接口来查询这些参数的！参见：

http://www.w3.org/TR/resource-timing/
例子参见：http://www.html-js.com/article/Brief-introduction-of-JavaScript-Resource-Timing-API-to-learn-something-every-day

这些H5的东西，看起来就是根据远程调试来***的，目前IE、Chrome、Opera、Firefox都进行了支持，但很多低版本肯定没有。