如何检查从AppCenter下载的React Native正式版APP的UI元素

iOS平台 #

• Xcode Accessibility Inspector
  无需依赖浏览器，直接用Xcode原生工具即可：

  1. 打开Xcode，通过Xcode > Open Developer Tool > Accessibility Inspector启动工具
  2. 用USB连接安装了目标应用的iOS设备到电脑，确保设备已信任当前电脑
  3. 在Accessibility Inspector的设备列表中选中目标设备，打开AppCenter下载的应用
  4. 点击工具中的拾取按钮，即可点选应用内任意UI元素，查看其层级、位置、文本属性及对应的原生控件信息

• Flipper（需预配置）
  发布版应用默认禁用Flipper，若打包上传AppCenter前已修改配置开启发布版Flipper支持（调整Podfile及项目权限），可按以下操作：

  1. 打开Flipper桌面客户端
  2. USB连接设备，完成信任验证
  3. 在Flipper中找到目标应用，使用Layout Inspector插件查看UI元素结构

Android平台 #

• Chrome DevTools（需预开启调试）
  发布版默认关闭调试模式，需在打包时修改android/app/build.gradle，在buildTypes.release中设置debuggable = true，再上传至AppCenter：

  1. 打开Chrome浏览器，输入chrome://inspect
  2. 连接Android设备并开启USB调试（在开发者选项中启用）
  3. 在chrome://inspect页面找到目标应用，点击inspect进入DevTools
  4. 使用Elements面板查看UI元素，操作逻辑与调试模式一致

• Android Studio Layout Inspector
  无需修改应用配置，仅需设备开启开发者模式：

  1. 打开Android Studio，通过USB或无线调试连接目标设备
  2. 选择Tools > Layout Inspector启动工具
  3. 选中目标设备和应用进程，加载完成后即可查看UI层级、元素属性，包括React Native映射的原生控件细节

通用注意事项 #

• 针对发布版应用的UI检查工具，大多需要在打包上传AppCenter前完成相应配置（如开启调试、Flipper支持），已发布的应用无法事后修改配置
• 若未提前配置，系统自带的辅助检查工具（Xcode Accessibility Inspector、Android Studio Layout Inspector）是最可靠的选择，它们仅依赖设备的开发权限，无需应用开启调试模式

内容的提问来源于stack exchange，提问作者Madhu