前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ionic3 Android调试

Ionic3 Android调试

作者头像
spilledyear
发布2018-08-21 14:47:56
1K0
发布2018-08-21 14:47:56
举报
文章被收录于专栏:小白鼠小白鼠

本文主要介绍将Ionic项目打包成安卓应用之后的调试过程,调试方式分两种:模拟器调试、真机调试。不过在此之前,必须要将ionic项目成功打包成Android应用,有关 ionic打包成Android应用的具体教程,请参考以下文章: Ionic3 Android打包

模拟器调试

模拟器调试也就是启动android模拟器,然后在模拟器上看效果。在使用android模拟器之前,需要先下载对应体系的模拟器。

代码语言:javascript
复制
在命令行下运行:android sdk

出现如下界面。找到你需要的android版本,比如我的是android6。然后看图中重点标记的三个选项,分别是:

  • ARM EABI v7a System Image
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image

代码语言:txt
复制
image.png      Intel x86 Atom System Image是支持X86的Android模拟器,ARM EABI v7aSystem Image是模拟ARM体系,而Intel x86 Atom\_64 System Image 也就是64位的意思。创建模拟器时模拟的CPU不同,ARM运行速度较慢,所以Intel推出了支持x86的Android模拟器,这将大大提高启动速度和程序的运行速度,允许Android模拟器以原始速度(真机运行速度)运行在使用Intel x86处理器的电脑中。但是,要使用X86模拟器的话,需要安装 英特尔硬件加速执行管理器。安装这个加速器的方法可能由两种。不过可能我系统比较新,第一种已经不支持了。  **第一种方法就是在 SDK中直接安装** 

代码语言:txt
复制
image.png      不过从图上也可以看到,这种方法不行的: not compatible with windeows。提示与windows不兼容,所以这里使用这种方法安装是不行的。  另一种方法就是直接去官网下载安装包,然后安装即可。[下载地址](https://link.jianshu.com/?t=https://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager-intel-haxm) 

安装之后,就可以启动模拟器进行测试了。可以通过 cordova emulate android 调出模拟器。不过在此之前,我们需要先通过 avd 工具创建一个模拟器。

代码语言:javascript
复制
运行命令: android avd

这时候会打开创建模拟器的可视化界面,如图:

代码语言:txt
复制
image.png      通过这个界面,可以创建和修改android模拟器。上图中已经有了一个我创建好的模拟器了。可以编辑,大概就是这个样子:      

代码语言:txt
复制
01.png      以上的参数可以根据自己的实际情况来测试,也可以按照上图来创建一个模拟器。Ok,接下来启动模拟器看看效果:  **点击start** 

代码语言:txt
复制
02.png      如果不出意外,是可以启动成功的,启动成功之后,可以看到以下界面:      

代码语言:txt
复制
03.png      

至此,模拟器创建并启动成功,接下来将应用放到模拟器上运行。

代码语言:javascript
复制
运行命令:cordova emulate android

可以看到如下界面。注意,这里看到的界面就是你的app界面,以实际情况为准

代码语言:txt
复制
04.png    

不得不说,使用x86模拟器真的方便太多了,相对RAM模拟器来讲快太多!可能是因为直接使用电脑上的cpu,然后这个和电脑的配置也有关系吧。

真机调试

除了使用模拟器调试,还可以使用真机调试。使用真机调试也特别简单: 在手机上开机USB调试 》将手机和电脑用USB数据线连接 》执行命令。 每部手机开启usb调试功能 的方法可能都不一样,我的手机系统是 emui5,应该华为手机开启usb调试功能方法都是相同的。 设置——》关于手机 找到版本号那个选项,然后连续点击多次(好像5次或者7次,可能不同型号不一样),点击完之后会提示手机已经是开发者模式了。然后返回,可以看到有个开发者选项,点进去,打开USB调试即可。 准备工作完毕,接下来直接执行以下命令

代码语言:javascript
复制
cordova run android 

代码语言:txt
复制
image.png    

如果不出意外,手机上会打开那个app的界面。

真机调试日志 真机调试可以看到应用的真实运行效果,这是检测bug的最好方法。但是这种方法也有一个问题,比如在代码中输出的日志该怎么查看?日志是开发过程中非常重要的一个功能,有时候很多不懂的东西,打印出来一看可能就明白,以下是真机调试中查看日志的方法:https://jingyan.baidu.com/article/db55b609fde96d4ba30a2fa9.html?qq-pf-to=pcqq.c2c 参照以上的链接,这里就以新版本的chrome来介绍。

代码语言:javascript
复制
cheome:版本 61.0.3163.100(正式版本) (64 位)

推荐大家也升级,升级肯定有升级的道理,挑最新的用

代码语言:txt
复制
image.png    

步骤如下

  • 手机开启usb调试功能
  • usb数据线将手机与电脑相连接
  • 用chrome最新版本打开以下链接:chrome://inspect/#devices

如图所示,保持选项和图上的一致就可以了

代码语言:txt
复制
image01.png    

代码语言:txt
复制
image02.png      如果能看到上图中的效果,说明你成功了一半。如果这时候还是无法看到你的设备,就把数据线断开再重新连接一次,然后再执行 cordova run android 。这样一般就可以了,我百试百灵。  
  • 点击该界面的 inspect 连接

注意,第一次打开可能是一片空白,可能好久都打不开,可能需要访问外国网站,遇到这种情况就耐心点,翻访问外国网站试试。只要过了第一次,之后打开就很方便了。

代码语言:txt
复制
image.png      打开之后,弹出一个浏览器调试窗口,下面是一张效果图        

代码语言:txt
复制
image.png    

正常情况都可以成功的,有了这个调试就方便多了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.10.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模拟器调试
  • 真机调试
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档