android webview遠端偵錯

標籤：des   android   blog   http   os   io   檔案   問題   

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 definedUncaught ReferenceError: WebInspector is not defined

找了半天確實stackoverflow上有一篇一樣的問題，但是沒人回答… http://stackoverflow.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