【鸿蒙开发】第三十三章 DevEco Studio - ArkUI Inspector设备分析汇总

目录

1 功能介绍

2 使用场景

3 使用约束

4 操作步骤

5 UI界面快照

6 UI组件源码跳转

7 显示布局边框

8 查看UI组件的状态变量

---

1 功能介绍

功能包括：

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

2 使用场景

针对界面较复杂的应用：

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

3 使用约束

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

4 操作步骤

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

   

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

   

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

   

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

   

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

   

5 UI界面快照

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

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

6 UI组件源码跳转

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

   

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

   

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

   

7 显示布局边框

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

8 查看UI组件的状态变量

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