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