ionic4调试ios及android工程

2019-05-17  本文已影响0人  Gemkey

我们知道,在ionic的日常开发中,绝大部分调试我们都可以在浏览器上实现,但是部分功能则是浏览器无法支持的,比如一些不同版本手机上的样式兼容性,js兼容性,以及一些原生插件的调试等等问题,尤其是使用了ionic,因为在编译后,ts文件已经全部被编译成js,可读性极差,也不方便我们去调试自己的代码,那这个时候,我们就好考虑做真机调试了,那么我们要怎么去做这个事呢?下面我们就来简单讲下怎么去做调试.

一.ios

ios这里用模拟器来说明怎么做调试
1.首先添加ios平台

ionic cordova platform add ios
add ios.png
finish.png

2.平台添加成功后,添加一个ios-sim的npm包
进入到项目工程,执行

cd platforms/ios/cordova&&npm install ios-sim@latest
image.png

3.查看可用设备
执行命令查看所有模拟器设备信息

xcrun simctl list

这里会把所有的可用设备都列出来
我们这里比较关心的,是SimDeviceType后的设备名,比如
iPhone Xs (com.apple.CoreSimulator.SimDeviceType.iPhone-XS)中的iPhone-XS

device
4.执行运行命令
ionic cordova run ios -l -- --buildFlag="-UseModernBuildSystem=0" --target 'iPhone-XS'

在编译过程中,会出现大量打印的日志,如果模拟器之前未启动,则会根据你的命令打开对应的模拟器。
PS:
1.加--buildFlag="-UseModernBuildSystem=0"是因为xcode10之后采用了新的编译模式,如果不加是有可能会报错的

image.png

更新:

新版本的ionic-cli命令发生了改变,buildFlag这个参数被删除了,新命令为:

ionic cordova run ios --buildConfig=build.json -l
# 指定设备类型及系统版本号
ionic cordova run ios --buildConfig=build.json -l --target 'iPhone-6s,10.3'

其中build.json内容为:

{
    "ios": {
        "debug": {
            "buildFlag": [
                "-UseModernBuildSystem=0"
            ]
        },
        "release": {
            "buildFlag": [
                "-UseModernBuildSystem=0"
            ]
        }
    },
    "android": {

    }
}

build.json 可以设置其他参数,这里只设置了buildFlag

当然除了增加参数外,也可以通过配置文件或更改xcode设置来实现编译模式

image.png image.png

5.使用Safari调试ios模拟器
打开浏览器,设置显示"开发"菜单


image.png image.png

在开发菜单中,我们可以看到模拟器信息,如下图:


image.png

如果有时候发现在设备列表里面没有你的模拟器,这种情况也比较简单,重启你的Safari浏览器(用command+Q退出的那种)

点开之后,我们就可以像正常调试页面一样调试模拟器了


image.png

我们可以看到,当改变工程源码后,会像我们正常运行ionic工程一样开始执行编译,编译完成后会直接显示编译后效果


ionic.gif

如果要调试js代码,如断点调试,则直接打开调试器,找到要调试的文件,直接打断点,和我们本地调试是一样的


debug.gif

二.Android

1.因为我的电脑上没有装安卓模拟器,所以直接使用我的手机来做演示,效果其实是一样的。运行编译命令查看设备是否连接

adb devices
device

2.添加android平台

ionic cordova platform add android
image.png

3.执行编译命令

ionic cordova run android -l

手机上提示安装,并且显示如下,则标识正常显示


image.png

4.使用chrome调试
打开chrome浏览器,在地址栏中输入如下命令,然后点击inspect

chrome://inspect
image.png
这里需要注意下,第一次打开该调试工具时,会从服务器上下载相应资源,由于国内被墙,所以需要翻墙后才可以正常使用,否则会出现白屏的问题
白屏:
image.png

正常:

image.png

调试部分就和ios一样了,可以实时生效,且可以正常断点调试,这里就不再重复赘述了。

注意:
使用liveload调试时,手机与电脑必须要在相同网络环境下,因为手机端要从电脑上下载你的代码及资源文件,否则会报错。通常保持在同一wifi环境下问题就不大,当然如果网络环境不行,也可以考虑手机打开热点,然后让电脑进行连接,这样也能处于统一网络环境下

image.png
上一篇下一篇

猜你喜欢

热点阅读