鸿蒙开发:UI界面分析利器ArkUI Inspector

前言

本文基于DevEco Studio 5.0.5 Release

之前的文章讲述过测试工具DevEco Testing,提到过里面有一个功能,页面DOM树获取,可以分析某一款应用的UI布局结构,便于我们查找UI界面存在的问题,当时感到惊叹不已,但是使用它,还需要进行下载,两个多G,如果说仅仅为了UI布局分析,确实有点大材小用,其实,同样的功能,DevEco Studio已经为我们提供了,本文就带着大家一起了解一下,布局分析利器,ArkUI Inspector。

什么是ArkUI Inspector

ArkUI Inspector,知名其意,就是UI检查,它可以让开发者在DevEco Studio中快速的查看一个应用在模拟器或者真机上的UI显示效果,并且可以通过查看多次操作后的界面状态,来快速的分析定位UI界面存在的问题。

功能入口

入口在DevEco Studio中的底部一行菜单中,如下图所示:

快速使用

点击底部的ArkUI Inspector选项之后,可以在设备应用列表中,选择当前显示在设备前端的UI进程,需要注意的是,你的手机或者模拟器必须在线状态下,并且应用也已经启动。

点击需要检查应用的进程,就可以查看到当前置于前台的页面。

左侧组件Dom数结构

左侧的区域,就可以看到当前页面布局的页面名字和组件使用信息,针对页面中的层级,可以说是一览无余。

切换页面

当你切换了页面,可以通过刷新按钮来更新视图,点击之后,页面会自动切换,方便我们快速的分析不同页面的层级结构。

同步更改

在左侧点击组件或者在UI界面上点击视图,都可以同步进行选择,比如下面,我在左侧选中了Image组件,那么UI界面中也会选择图片视图,同样,你在界面中点击视图,左侧也会同步变动。

右侧组件属性信息

在左侧或者中间的界面选择一个组件后,在右侧就会展示出这个组件的所有属性信息,比如宽高,xy坐标,背景,margin,padding等等所有的属性信息,方便我们针对当前的UI布局做细化分析。

显示组件树节点信息

如果你想要在左侧查看当前的组件节点信息,你可以勾选组件树信息的配置项Show Tree Statistics进行打开。

打开之后,在左侧的组件悬停一会,便可以查看了。

UI界面快照

如果你的设备未在线状态下,也就是没有模拟器或者真机,ArkUI Inspector也支持导出及导入应用UI界面快照,脱离设备查看应用UI界面显示效果。

箭头往右的图标,可以将应用UI界面快照导出到本地,箭头往左的图标可以导入本地的应用UI界面快照。

导出的快照是.arkli文件,如下效果:

有了快照,你就可以通过往左的箭头图标,选择本地的快照进行查看了,它是直接在IDE中打开的,和在底部设备查看是一模一样的。

UI组件源码跳转

这个功能就厉害了,你可以通过ArkUI Inspector左侧的UI组件信息,双击直接进入到当前的组件代码位置,但是,需要开启这个功能。

点击要运行的模块之处,点击第一个Edit Configurations,如下图所示:

把"Enable DebugLine"进行勾选,开启源码跳转功能,点击OK保存后,需要重新运行工程。

这样就实现了源码跳转功能,如下图所示,双击左侧的组件,便可以直达它的源码之处,并且会被边框选中,非常的方便。

相关总结

目前ArkUI Inspector有一定局限性,首先仅支持运行在前台的应用,也就说,如果你的应用未启动,未在前台,那么进程是无法选择的,也就不能查看UI视图,以上的条件也就意味着,仅支持全屏应用或者焦点在前台的窗口,并且呢,也仅支持Stage工程的项目,由于是UI视图分析,那么同样也不支持应用市场上架的商用签名应用。

总之来说,对于我们分析UI界面存在的问题,边距啊,层级结构啊等等,ArkUI Inspector还是有着非常大的方便的。

本文标签:鸿蒙开发工具/DevEco Studio

相关推荐
雨白6 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
幽蓝计划8 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
kk爱闹8 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
每次的天空10 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭10 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日11 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安11 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑11 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
万少14 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划14 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos