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 后來發現不回答卻是是這樣的，通過抓包工具，了解到，原來是請求被拒了，這只有偉大的天朝能干的出來。 我用了三種代理的方式翻牆，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