如何调试手机上的网页以及基于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