美文网首页
ionic4调试ios及android工程

ionic4调试ios及android工程

作者: Gemkey | 来源:发表于2019-05-17 11:13 被阅读0次

    我们知道,在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

    相关文章

      网友评论

          本文标题:ionic4调试ios及android工程

          本文链接:https://www.haomeiwen.com/subject/zaqnaqtx.html