ionic4项目结合chrome在Android真机运行调试

最新推荐文章于 2025-02-25 19:19:48 发布

yw00yw

最新推荐文章于 2025-02-25 19:19:48 发布

阅读量2.1k

点赞数 1

分类专栏： ionic 文章标签： ionic ionic4 ionic4打包 ionic4真机运行

本文链接：https://blog.youkuaiyun.com/yw00yw/article/details/95043123

版权

ionic 专栏收录该内容

19 篇文章

订阅专栏

1. 创建App

ionic start myApp tabs

2. 添加平台

给App添加目标平台，我们将会添加'ios'和'android'平台，并确保他们保存在了config.xml中
 ionic cordova platform add ios --save
 ionic cordova platform add android --save

检查你当前平台设置状况：

  ionic cordova platform ls

3. 打开手机开发者模式

用数据线连接手机和电脑，不同机型打开方式不同，可自行百度。

验证是否连接成功：adb devices

在这里插入图片描述

4. 在手机上打开开发者模式

以ReadMI为例，

设置 —>点击我的设备 —> 全部参数 —> MIUI版本（连续点击7下开启开发者模式）
设置 —> 更多设置 —> 开发者选项 —> USB调试

5. 在手机上安装并打开需要调试的app

可以不需要手动安装，可以利用android studio导入ionic android项目，然后连接手机运行，会自动安装

打包步骤：点击查看
在这里插入图片描述

6. 使用chrome浏览器访问`chrome://inspect/#devices`并点击inspect.如下图

下图箭头是打开的app界面，点击inspect（第一次打开如下界面需要翻墙）
在这里插入图片描述

7. 常见错误

404错误（可以翻墙解决，第一次的时候可以利用翻墙工具，就可以解决该问题）
可能需要debugger模式调试

this.camera.getPicture(options).then((imageData) => {
        const base64Image = 'data:image/jpeg;base64,' + imageData;
        
        debugger;

        alert(base64Image);
    }, (err) => {
        // Handle error
    });
}

8. 点击inspect之后如下