HBuilderX暂时不支持 uni-app x 项目 uvue 页面的元素审查，无法查看页面中元素的排版布局情况。
在开发中如果 uvue 页面中的元素无法显示或显示位置不符合预期，可以利用 Android Studio 自带的 Layout Inpector 工具查看元素布局相关信息。

准备环境

• 安装 Android Studio，可到Google Android官网下载，更多安装细节可参考Android官方文档
• 开发电脑连接Android设备（推荐使用Google官方模拟器），设备需启用开发者选项

运行uni-app x项目

启动HBuilderX，创建 uni-app x 项目（已创建项目忽略此步骤）。

打开项目的manifest.json文件，选择 "运行" -> "运行到手机或模拟器" -> "运行到Android App基座"：

在运行项目界面选择要使用的设备，点击"运行"：

确保应用编译成功，在手机上操作安装真机运行基座App，安装成功后HBuilderX会自动启动App。

Layout Inspector 审查元素

启动 Android Studio，首次运行需要创建Android原生项目。
打开项目，选择 "Tools" -> "Layout Inspector"，启动 Layout Inspector：

在 Layout Inspector 界面选择要操作的设备：

连接正常将会在 Layout Inspector 界面中显示手机端应用的截屏。

注意：需要确保uni-app x项目在设备前台运行

左侧 Component Tree 中展开所有子节点，查找到 DecorView -> LinearLayout -> content -> PageFrameView -> RenderContainer，下面就是 uvue 页面 template 中元素对应的原生View：

view 组件对应原生 UniView
image 组件对应原生 UniImageView
text 组件对应原生 UniTextView

在左侧 Component Tree 中选择要查看的view，对应右侧 Attributes 中显示其排版计算后的原生属性，如width是原生view的宽度，height是原生view的高度。

可切换到3D模式，查看原生组件的层级关系：

注意事项

• uni-app x项目需使用标准基座或自定义基座运行，发布为正式包后无法使用 Layout Inpector
• 如果启动 Layout Inspector 报错，请更新 Android Studio 到最新版本再重试
• 在部分设备连接 Layout Inspector 后应用可能会导致 App 退出，这时需换其它设备，建议使用Google官方提供的模拟器

参考

• Android Studio 使用布局检查器和布局验证工具调试布局
• Android检查GPU渲染速度和过渡绘制