1.4 调试代码、本地预览和远程模拟器 原创 精华

不做加班狗
发布于 2022-4-30 09:16
浏览
0收藏

1.4.1 本地预览

我们改造下默认的Hello World页面,介绍本地预览和日志打印的技巧。代码如下:

@Entry
@Component
struct Index {
  @State msg:string = 'Hello World'
  private status:boolean = false
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(this.msg)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Button('改变文字')
        .margin({top:30})
        .onClick(() => {
          if(this.status){
            console.log(this.status.toString())
            this.msg = 'Hello World'
          }else{
            console.log(this.status.toString())
            this.msg = 'Hello ArkUI'
          }
          this.status = !this.status
        })
    }
    .width('100%')
    .height('100%')
  }
}

[源码地址:https://gitee.com/cloudev/harmonyos3/tree/master/1.4]

tip:上述代码中的"@Entry"、“@Component”、“@State”是eTS独有的声明式语法,现在不用关心,后面章节会详细解释它们的含义及用法。

点击DevEco Studio的右侧栏“预览器”选项卡,默认预览App在手机上的运行效果。可以如下图箭头所示,点击“多设备预览”按钮,可以选择MateX2(折叠屏)、MatePadPro(平板电脑)和Car(车机),针对性查看在某类型设备上的布局效果。也可以打开“Multi-profile preview”开关,同时显示鸿蒙应用在这四种设备上的布局效果,这在开发多设备弹性布局适配时比较有用。不过,提醒一点,打开这个开关同时预览多设备效果,更新预览结果时系统开销会大一些。所以,刚开始布局时,可以先只展示一种设备的布局效果,等基本完成布局效果后再打开这个开关做多设备适配优化。这样开发效率会更高一些。

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

手机、折叠屏和平板电脑设备还可以点击切换横竖屏效果和深色模式/浅色模式切换。本案例的代码并没有做深色模式/浅色模式自动适配,后面章节会详细讲解开发方法。

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

在本地预览器中点击“改变文字”按钮,可以在底部的"预览器日志"中看到日志打印,我们在前面的代码中写了一句"console.log(this.status.toString())":

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

这个日志之上还输出了一句"Application onCreate"的日志,这个是由app.ets中的onCreate()方法打印的,在App启动时会触发这个方法:

export default {
  onCreate() {
    console.info('Application onCreate')
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

1.4.2 远程模拟器

本地预览器能提升UI布局阶段的开发效率。但更接近真机的运行效果,可以借助远程模拟器查看。

在“工具”菜单选择“设备管理”:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

选择“远程模拟器”选项卡。如果你的电脑开机后没有在浏览器登陆过华为开发者联盟帐号,DevEco Studio会提示未登录,如下左图。点击“登录”按钮,会唤起浏览器打开华为账号登录界面,如下右图。用上节课程中注册的华为开发者联盟帐号登录:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

在弹出的界面中点击“允许”按钮,如下左图。浏览器会反馈已成功登录HUAWEI DevEco Studio客户端,此时,可以关闭浏览器了,如下右图:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

如果DevEco Studio中出现了如下左图的面板,点击"Agree"同意即可,此时远程模拟器选项卡下面就陈列了不同设备类型的远程模拟器,如下右图。选择“远程模拟器”下面的P40 Pro手机,点击“运行”按钮,这是目前唯一支持模拟eTS ArkUI的设备:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

此时远程模拟了一部华为P40 Pro的手机,每次申请远程模拟器,可使用2小时,时间到了会释放设备。如果需要,可以再次申请。如下左图所示,点击运行按钮,等待打包和上传,此时,我们的App就运行起来了,如下右图:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

1.4.3 调试代码

在本地预览器中无法做代码断点调试。接下来,我们借助远程模拟器实现断点调试。

如下图所示,在我们需要断点调试的代码处点击鼠标左键,就会出现一个红色的断点标记,然后点击调试按钮:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

如下图所示,点击远程模拟器中的“改变文字”按钮,程序运行到断点处就会暂停,等待我们调试。点击“调试”面板中的按钮,可以对代码进行可控的调试,随时查看当时各变量的实时值,以跟踪排查App可能存在的Bug。如下图所示:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

调试器的功能说明如下图所示:

1.4 调试代码、本地预览和远程模拟器-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
收藏
回复
举报
回复
    相关推荐