Ionic3 Android调试

本文主要介绍将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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美奔科技

web站点应用之路_wdcp面板设置篇(二)

安装配置好wdcp之后,我们就进入wdcp面板的设置界面了,首先刚进来的时候,会提示你更换登录密码和数据库密码。根据版本的不同,显示的内容也会有一定的区别...

28240
来自专栏SpringBoot 核心技术

第二十二章:SpringBoot项目多模块运用与设计

46240
来自专栏coding for love

在线商城项目07-mac下mongodb的下载与配置

这一章本来不想讲的,因为关于配环境这种事,其实网上真的很多资料,但是考虑到确实好多人都不喜欢配环境这种事,因为觉着很麻烦而止步不前,很是可惜。这一节我们来看看如...

10020
来自专栏mukekeheart的iOS之旅

《从零开始做一个MEAN全栈项目》(4)

欢迎关注本人的微信公众号“前端小填填”,专注前端技术的基础和项目开发的学习。  在上一篇中,我们讲了如何去构建第一个Express项目,总结起来就是使用两个核心...

30260
来自专栏桥路_大数据

使用夜神模拟器运行React Native躺坑详解

51580
来自专栏Java面试笔试题

在VMware上安装CentOS版本的Linux虚拟机

2.点击“编辑虚拟机设置”,选择“CD/DVD”,点击"使用ISO映像文件"在本地找到合适的镜像文件;

18820
来自专栏Jerry的SAP技术分享

Webpack 10分钟入门

可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。

10450
来自专栏Google Dart

开始使用-初尝胜果 顶

本页介绍如何“测试驱动器”Flutter:从我们的模板创建一个新的Flutter应用程序,运行它,并学习如何使用Hot Reload进行更改。

9030
来自专栏知晓程序

开发 | 拒绝打开就授权!小程序如何用新能力获取用户资料?

简单来说,这次能力更新,为 button 组件的 open-type 属性赋予了新的有效值 getUserInfo(声明需要获取用户信息)。

36930
来自专栏深度学习之tensorflow实战篇

mysql、mongodb、python(dataframe).聚合函数的形式,以及报错解决方案

1、mysql select * from table_name group by name,id 有的时候执行下面语句报错sql_mode=only_ful...

31740

扫码关注云+社区

领取腾讯云代金券