Ionic3 安卓调试

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

模拟器调试

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

在命令行下运行:android sdk

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

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

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中直接安装
image.png

不过从图上也可以看到,这种方法不行的: not compatible with windeows。提示与windows不兼容,所以这里使用这种方法安装是不行的。
另一种方法就是直接去官网下载安装包,然后安装即可。下载地址

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

运行命令: android avd

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

image.png

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

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

如果不出意外,是可以启动成功的,启动成功之后,可以看到以下界面:
03.png

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

运行命令:cordova emulate android

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

04.png

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

真机调试

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

cordova run android 
image.png

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

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

cheome:版本 61.0.3163.100(正式版本) (64 位)

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


image.png

步骤如下

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

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


image01.png
image02.png

如果能看到上图中的效果,说明你成功了一半。如果这时候还是无法看到你的设备,就把数据线断开再重新连接一次,然后再执行 cordova run android 。这样一般就可以了,我百试百灵。

  • 点击该界面的 inspect 连接

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


image.png

打开之后,弹出一个浏览器调试窗口,下面是一张效果图


image.png

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

推荐阅读更多精彩内容