Question

如何调试手机上的网页以及基于Cordova/Phonegap的Hybrid应用

Answer 1

操作分成电脑和手机（或模拟器）两个部分，操作流程如下：

　　在手机上打开“设置|开发者选项 | USB调试”。
　　对于低版本的android，直接打开即可，对于4.4以上，“开发者选项”菜单被隐藏掉了，打开的方法是在“设置|关于手机”界面中双击“版本号”项（注意，不是“Android版本”项），一般需要连续双击两次，这时候你会看到一个提示说开发者选项已经打开了。

　　在手机上打开chrome浏览相应网站或打开hybrid程序。

　　把手机通过USB线连到电脑上，在问你是否打开USB调试是选择“是”。如果是模拟器，那么请在命令行输入adb connect <模拟器的ip地址，可以在模拟器的WLAN的连接详情中看到>

　　在电脑上打开chrome，并访问 chrome://inspect/#devices ，这是一个chrome的内部页面，在这里，你会看到设备的列表，列表中列出了它所包含的WebView。

　　在这个WebView下会有一个超链接按钮：“Inspect”，点它，就打开了一个DevTools的页面，和在电脑上调试页面时使用的是同一个。
　　甚至当你在它的Element页把鼠标悬停在某个节点上的时候，手机chrome中也会向电脑版chrome一样对该节点进行高亮（但有可能反应会慢些）。