开发者可以使用ArkUI Inspector,在DevEco Studio上查看应用在真机上的UI显示效果,并通过查看多次操作后的界面状态,快速分析定位UI界面存在的问题。

ArkUI Inspector支持的功能包括:

  • 查看设备上应用的UI显示效果。
  • 导出及导入应用UI界面快照,脱离设备查看UI显示效果。
  • 在组件树上选择组件,UI界面自动框选对应组件,属性列表显示当前组件的属性信息。
  • 在UI界面点击选择组件,组件树对应组件变化为选中状态,属性列表显示当前组件的属性信息。
  • UI组件源码跳转,选中UI组件后点击源码跳转按钮即可跳转至源码位置。
  • 在UI界面上选择Show Component Border,可查看当前页面上所有组件显示区域。
  • 在组件树上选择自定义组件,属性列表显示当前组件配置的状态变量信息以及影响组件。

使用场景

针对界面较复杂的应用:

  • 通过组件树查看组件的父子关系,检查是否存在冗余组件。
  • 针对应用在真机或模拟器上运行出现UI界面显示异常,尤其经过多次界面复杂操作后产生的界面错误以及后台逻辑错误,进行问题分析定位。

使用约束

  • 仅运行在前台的应用支持Inspector查看。
  • 已通过USB或WLAN连接设备。
  • 仅支持Stage工程。
  • 仅支持全屏应用或者焦点在前台的窗口。
  • 不支持应用市场上架的商用签名应用。

操作步骤

  1. 在DevEco Studio下方点击ArkUI Inspector,打开ArkUI Inspector。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  2. 点击RUN或者DEBUG按钮,将应用推包到设备上,在设备应用列表选择当前显示在设备前端的UI进程。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  3. ArkUI Inspector左侧为当前的组件树结构,中间栏显示当前设备的UI显示界面,右侧在选中组件的情况下为当前组件的属性信息。当设备上UI发生变化时,可点击中间栏右上角按钮同步设备上的UI效果。可以在左侧组件树上选择或直接在UI界面点击选择组件。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    点击,勾选组件树信息的配置项Show Tree Statistics,可显示组件树节点信息。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  4. 在设备框,点击设备列表的最后一项Stop inspector,可断开与设备的连接。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

UI界面快照

ArkUI Inspector支持导出及导入应用UI界面快照,脱离设备查看应用UI界面显示效果。

  • 在中间栏点击可以将应用UI界面快照导出到本地。导出成功后将默认在DevEco Studio中打开该快照。
  • 在中间栏点击可以导入本地的应用UI界面快照。导入成功后将在DevEco Studio中打开该快照。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

UI组件源码跳转

  1. 单击Run > Edit Configurations,勾选“Enable DebugLine”,点击OK保存后,重新运行工程,表示开启源码跳转功能。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  2. 在ArkUI Inspector中,选中要进行源码跳转的UI组件。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  3. 点击右侧的源码跳转按钮,即可跳转到UI组件源码位置。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

显示布局边框

在UI显示设置上,勾选“Show Component Border”,可显示当前页面所有组件的布局信息。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

查看UI组件的状态变量

点击自定义组件,可以查看自定义组件定义状态变量,以及状态变量影响的下一层组件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术?鸿蒙开发岗位需要掌握那些核心技术点?为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少,假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料,少走很多弯路,节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点

如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说,我们直接看详细鸿蒙(OpenHarmony )手册(共计1236页)与鸿蒙(OpenHarmony )开发入门视频,帮助大家在技术的道路上更进一步。

  • 《鸿蒙 (OpenHarmony)开发学习视频》
  • 《鸿蒙生态应用开发V2.0白皮书》
  • 《鸿蒙 (OpenHarmony)开发基础到实战手册》
  • OpenHarmony北向、南向开发环境搭建
  • 《鸿蒙开发基础》
  • 《鸿蒙开发进阶》
  • 《鸿蒙开发实战》

在这里插入图片描述

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程,从而开设鸿蒙课程;企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,未来将会支持 50 万款的应用。那么这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行! 自↓↓↓拿
1

Logo

社区规范:仅讨论OpenHarmony相关问题。

更多推荐