鸿蒙开发：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