博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何调试手机上的网页以及基于Cordova/Phonegap的Hybrid应用
阅读量:5101 次
发布时间:2019-06-13

本文共 1341 字,大约阅读时间需要 4 分钟。

开发手机页面以及Hybird应用时,调试曾经是个老大难问题,不时需要用写log等方式曲线救国。

实际上,Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能,只是看样子还有好多人不知道,所以写下来分享给各位。本文遵循CC协议,欢迎转发,但请注明作者和出处( )。

操作分成电脑和手机(或模拟器)两个部分,操作流程如下:

  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); }

转载来源

转载于:https://www.cnblogs.com/GoodPingGe/p/4502169.html

你可能感兴趣的文章
jQuery-4.动画篇---动画基础隐藏和显示
查看>>
深入剖析 redis AOF 持久化策略
查看>>
物流货代公司管理系统
查看>>
zabbix监控的基础概念、工作原理及架构
查看>>
Farseer.net轻量级开源框架 中级篇:事务的使用
查看>>
js斐波拉切
查看>>
【41】102. Binary Tree Level Order Traversal
查看>>
BZOJ_1029_[JSOI2007]_建筑抢修_(贪心+优先队列)
查看>>
第二节课课堂作业
查看>>
在线mark.down编辑器
查看>>
PAT(乙级)1016
查看>>
js监听滚动条滚动事件
查看>>
java web实现文件下载的注意事项
查看>>
SQL数据库
查看>>
ORA-32004: obsolete and/or deprecated parameter(s) specified
查看>>
安装中文输入法
查看>>
glassfish 自定义 jaas realm
查看>>
Glassfish 设置时区
查看>>
补码与C++的应用
查看>>
PDO 代码
查看>>