ionic4调试ios及android工程

我们知道,在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设置来实现编译模式