在Chrome中调试Ionic的Android应用

412 1分钟

Ionic的Android端调试:
在以往Android原生开发时,App的调试用真机很是简单,即便是虚拟机调试,也是手到擒来;而如今,在混合应用横行的年代,动不动就是React-Native、Ionic、Vue、MUI等一系列的混合架构写出来的Android,还没对其调试过,公司采用Ionic研发并遇到一些坑,特将调试过程记录下来。

首先百度一番,度娘告知有以下两种方法进行调试:

  1. 在项目根目录执行以下命令,调试信息将在console中打印出来

    1
    ionic run android -l -c
  2. Chrome调试

由于是从项目中拿到App对其调试,没有工程,所以第一种调试方法无法测试。

第二种方法是网上应用最多的,我们来看看需要哪些操作:

  1. 首先真机或虚拟机连接电脑(手机开USB调试模式,并且允许电脑能访问手机),并且在命令行中确认

    1
    $ adb devices

    确保设备连接到电脑。

  2. 在Chrome中打开chrome://inspect/#devices,可以在Remote Target中看到已经连接的手机和手机中已经开启的应用线程。

  3. 找到需要调试的App,点击旁边的inspect(注意:电脑要能科学上网下载一些依赖,不然会显示404或一片空白,这些依赖会缓存下来,不清理缓存的话只需第一次运行时翻墙即可)

  4. 最重要的一点是,Ionic打的包一定是debug包,否则在Remote Target中是看不到该应用的,也就无法调试咯。


关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器