开发中，UI布局分析是调试和优化界面的重要环节。ArkUI Inspector是DevEco Studio提供的布局分析工具，可以查看设备上应用的UI显示效果，快速分析定位UI界面存在的问题。
一、ArkUI Inspector
ArkUI Inspector支持以下功能：
| 查看UI显示效果 | 查看设备上应用的UI显示效果 |
| 快照导入/导出 | 导出及导入应用UI界面快照，脱离设备查看UI |
| 组件选择与属性查看 | 在组件树或UI界面选择组件，属性列表显示当前组件属性信息 |
| UI组件源码跳转 | 选中UI组件后跳转至源码位置 |
| 显示组件区域 | 在UI界面上显示所有组件区域 |
| 状态变量查看 | 查看自定义组件配置的状态变量信息 |
| 窗口交互事件 | 查看触屏、鼠标、按键、滚轮、窗口焦点变化事件（6.1.0 Beta1+） |
| 3D展开应用 | 按组件粒度3D展开，查看嵌套、遮挡关系（6.0.0 Beta1+，API 20+） |
二、限制
使用场景
| 界面较复杂的应用 | 通过组件树查看父子关系，检查是否存在冗余组件 |
| UI界面显示异常 | 分析定位应用在真机/模拟器上运行时出现的界面错误 |
限制
| 应用状态 | 仅运行在前台的应用支持 |
| 连接方式 | 已通过USB或WLAN连接设备 |
| 工程类型 | 仅支持Stage工程 |
| 窗口类型 | 仅支持全屏应用或焦点在前台的窗口 |
| 应用类型 | 不支持应用市场上架的商用签名应用 |
三、操作步骤
3.1 打开ArkUI Inspector
在DevEco Studio下方点击ArkUI Inspector。
3.2 推送应用
点击RUN或DEBUG按钮，将应用推送安装到设备上。
3.3 选择UI进程
在设备的应用列表中选择当前显示在前台的UI进程。
3.4 界面布局
ArkUI Inspector布局分为三部分：
| 左侧 | 组件树结构 |
| 中间 | 当前设备的UI界面 |
| 右侧 | 选中组件的属性信息 |
同步UI效果：当设备上UI发生变化时，点击中间栏右上角的同步按钮同步设备上的UI效果。
3.5 断开连接
在设备框，点击设备列表的最后一项Stop inspector，断开与设备的连接。
四、进阶功能
4.1 显示组件信息
| Show Tree Statistics | 显示组件树组件信息 |
| Show Hidden Components | 显示隐藏的组件 |
| Show Custom Components | 过滤自定义组件 |
| Show System Components | 过滤系统组件 |
4.2 导入/导出UI界面快照
| 导入 | 点击导入按钮，导入本地的应用UI界面快照，在DevEco Studio中打开 |
| 导出 | 点击导出按钮，将应用UI界面快照导出到本地，默认在DevEco Studio中打开 |
4.3 UI组件源码跳转
单击Run → Edit Configurations，勾选Enable DebugLine，点击OK保存后重新运行工程
在ArkUI Inspector中选中UI组件，点击右侧的源码跳转按钮，即可跳转到UI组件源码位置
4.4 显示布局边框
勾选Show Component Border，可显示当前页面所有组件的布局信息。
4.5 查看UI组件的状态变量
点击自定义组件，可以查看自定义组件的状态变量，以及状态变量影响的下一层组件。
4.6 查看窗口交互事件（6.1.0 Beta1+）
| 启动 | 选择WindowEvents页签，点击Start按钮，开始上报事件消息 |
| 停止 | 点击Stop按钮，停止上报事件 |
支持的事件类型：触屏、鼠标、按键、滚轮、窗口焦点变化事件。
4.7 3D展开应用（6.0.0 Beta1+，API 20+）
进入3D视图
点击3D View按钮，进入3D视图（首次进入需等待数据加载）。
基础操作
| 旋转视图 | 按住鼠标左键移动 |
| 平移视图 | 按住鼠标右键移动 |
| 放大/缩小视图 | 滚动鼠标滚轮 |
图层操作
| Hide Views in Front | 隐藏当前选中图层前方的所有图层 |
| Hide Views Behind | 隐藏当前选中图层后方的所有图层 |
| Restore Hidden Views | 恢复所有隐藏的图层 |
图层排列顺序
| id顺序（默认） | 渲染顺序，图层遮挡关系与实际应用一致 |
| 层级顺序 | 组件树同一层级的组件显示在相同Z轴平面，减少Z轴长度 |
其他操作
| 调节图层间距 | 鼠标悬浮在调节按钮上，拖动滑块（0~100px） |
| 显示/隐藏图层边框 | 点击Hide Border/Show Border按钮 |
| 放大/缩小视图 | 点击Zoom In/Zoom Out按钮 |
| 自适应窗口 | 点击Zoom to Fit Screen按钮 |
| 切换正面/侧面视图 | 点击Switch to Front View/Switch to Side View按钮 |
| 返回2D视图 | 点击2D View按钮 |
鸿蒙ArkUI Inspector通过组件树、UI界面、属性面板三区域帮助分析布局，支持快照导入/导出、源码跳转、状态变量查看、窗口交互事件监听，以及3D展开查看组件嵌套与遮挡关系。
