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

拼搏现实的明天。 2021-12-14 05:05 485阅读 0赞

#### 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

![在这里插入图片描述][2019070815563935.png]

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

以ReadMI为例，

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

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

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

[打包步骤：点击查看][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

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

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

#### 7. 常见错误 ####

*  404错误（可以翻墙解决，第一次的时候可以利用翻墙工具，就可以解决该问题）  
    ![在这里插入图片描述][2019071109233133.png]
 *  可能需要debugger模式调试

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

#### 8. 点击inspect之后如下 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]

[2019070815563935.png]: /images/20211213/24d96df371b7476a9788e3022b2d166d.png
[Link 1]: https://blog.csdn.net/yw00yw/article/details/89224971
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211213/606e8b4904ec45279262bfdf0fbaf9c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20211213/72106cbc3a924769857eb5a450e7e9ee.png
[2019071109233133.png]: /images/20211213/b8f8fd3c6fcc4c788521cd4a9dc570cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20211213/9e2096f7152c4bfface58d17b997163c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]: /images/20211213/51150e2a37e94085b528bbcda5af8e52.png