android webview远程调试

浏览数：41 / 时间：2015年06月11日

H5的调试的方式一般用chrome的emulator就好，可是遇到APP就拙计了。这时候还得用远程调试，远程调试很给力，不过目前网上还没有好的文章讲解，要好好的把其配置下来还是非常有难度的，今天折腾了半天，终于弄好，分享一下

配置需求

话说其配置也是非常有考究的，和ios开发一样，都是有门槛的货，告诉大家屌丝误入，不过这个条件作为屌丝的我也算是打了擦边球，唯一要求就是android系统要4.0以上才支持

app代码

如果需要调试那么，代码中一定要先在，apk生成前的开发包中的manifest.xml文件中加入如下两句

{
    "name": "My extension",
    …
    "permissions": [
      "debugger",
    ],
    …
}

重点是permissions和其他的功能一样都要注册一下先，参考https://developer.chrome.com/extensions/debugger

然后还要在Main文件里加上这个句,表示在android中启动这个功能，话说app的开发有点废柴，这种代码又难记又和功能耦合的紧，非ctrl+c,ctrl+v如何破，详情https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if ( 0 != ( getApplcationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

安装设备驱动

插上设备的USB后进行OEM的安装，很多自动更新驱动不要信啊，从这里下驱动http://developer.android.com/tools/extras/oem-usb.html 安装方式【以win7为例】

1.链接设备
2.点击我的电脑右键选择管理
3.选择设备管理器
4.找到相应的设备后
5.点击右键选择更新驱动软件
6.选择浏览计算机以查找驱动程序软件（根据这里面的说明安装http://developer.android.com/tools/extras/oem-usb.html）我由于是googleNesus系列就用了http://developer.android.com/sdk/win-usb.html）
7.点击下一步安装驱动

这些比较简单，但是需要注意的是是除了原生的驱动也许还有interface之类的驱动也得完美无缺的装上。我的nexus就得这样搞得我第一次以为我的机器不支持远程调试呢。（根据这里面的说明安装http://developer.android.com/tools/extras/oem-usb.html）我由于是googleNesus系列就用了http://developer.android.com/sdk/win-usb.html

调试hybrid

输入网址chrome://inspect/#devices 打好勾，然后hybrid的页面自然呈现了，点击inspect就可以了理论上是这样的，不过，如果您的效果是ok的，我就跪了，今天研究了半天主要遇到这个槛了。找了一下原因原来是有两个变量undefined

ncaught ReferenceError: InspectorFrontendAPI is not defined
Uncaught ReferenceError: WebInspector is not defined

找了半天确实stackoverflow上有一篇一样的问题，但是没人回答… http://stackoverflow.com/questions/21801324/inspectorfrontendapi-is-not-defined-during-chrome-remote-debugging 后来发现不回答却是是这样的，通过抓包工具，了解到，原来是请求被拒了，这只有伟大的天朝能干的出来。我用了三种代理的方式FQ，facebook都看腻了还是访问不到,facebook已经被我上的快玩坏了。最后还是靠vpn解决了，（推荐greenvpn免费）不过还好这个访问的是配置文件，也就是说执行完一次如果保存成功，将不再继续访问了。好了，大功告成，慢慢打断点调试吧.