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

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”开关，同时显示鸿蒙应用在这四种设备上的布局效果，这在开发多设备弹性布局适配时比较有用。不过，提醒一点，打开这个开关同时预览多设备效果，更新预览结果时系统开销会大一些。所以，刚开始布局时，可以先只展示一种设备的布局效果，等基本完成布局效果后再打开这个开关做多设备适配优化。这样开发效率会更高一些。

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

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

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

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

1.4.2 远程模拟器

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

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

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

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

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

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

1.4.3 调试代码

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

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

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

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