如何調試手機上的網頁以及基於Cordova/Phonegap的Hybrid應用

開發手機頁面以及Hybird應用時，調試曾經是個老大難問題，不時須要用寫log等方式曲線救國。

實際上，Chrome和Android(須要4.4+版本)已經提供了不亞於電腦版本的調試功能，只是看樣子還有好多人不知道，因此寫下來分享給各位。本文遵循CC協議，歡迎轉發，但請註明做者和出處(http://ngnice.com/posts/659f97a6f06c90 )。

操做分紅電腦和手機（或模擬器）兩個部分，操做流程以下：

1. 在手機上打開「設置|開發者選項 | USB調試」。
   對於低版本的android，直接打開便可，對於4.4以上，「開發者選項」菜單被隱藏掉了，打開的方法是在「設置|關於手機」界面中雙擊「版本號」項（注意，不是「Android版本」項），通常須要連續雙擊兩次，這時候你會看到一個提示說開發者選項已經打開了。
2. 在手機上打開chrome瀏覽相應網站或打開hybrid程序。
3. 把手機經過USB線連到電腦上，在問你是否打開USB調試是選擇「是」。若是是模擬器，那麼請在命令行輸入adb connect <模擬器的ip地址，能夠在模擬器的WLAN的鏈接詳情中看到>
4. 在電腦上打開chrome，並訪問 chrome://inspect/#devices ，這是一個chrome的內部頁面，在這裏，你會看到設備的列表，列表中列出了它所包含的WebView。
5. 在這個WebView下會有一個超連接按鈕：「Inspect」，點它，就打開了一個DevTools的頁面，和在電腦上調試頁面時使用的是同一個。
   甚至當你在它的Element頁把鼠標懸停在某個節點上的時候，手機chrome中也會向電腦版chrome同樣對該節點進行高亮（但有可能反應會慢些）。

剩下的事情就不用我教你了吧……

我用的Hybrid框架是cordova，若是你用的不是cordova，那麼可能須要在程序的入口點添加以下代碼：
WebView.setWebContentsDebuggingEnabled(true)
固然，要把它包裹在if條件裏，省得發行版也被別人「調試」了。
iconic中的相應代碼以下，供參考：

final String packageName = this.cordova.getActivity().getPackageName(); final PackageManager pm = this.cordova.getActivity().getPackageManager(); ApplicationInfo appInfo; appInfo = pm.getApplicationInfo(packageName, PackageManager.GET_META_DATA); if((appInfo.flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0 && android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) { setWebContentsDebuggingEnabled(true); }

轉載來源Ngnice