使用开发者菜单工具调试您的应用

应用内开发者菜单可访问调试工具，其中包括元素检查器与性能监视器。在应用运行于真机或虚拟设备上时，可使用开发者菜单来检查用户界面元素、监控帧速率、重新加载应用，或打开调试器。

​

设置端口转发

要访问应用的开发者菜单调试工具，请先将应用连接到Metro bundler。要将应用连接到Metro bundler，则必须先设置端口转发。 设置端口转发

• 打开命令提示符，然后运行以下命令。 Vega虚拟设备：
  vega virtual-device start
  
  Vega虚拟设备窗口随即打开，并显示主屏幕。
   vega device start-port-forwarding --device <设备名称> -p <端口> --forward false
  
  终端会显示一条确认信息，表明端口转发已在指定端口启动。 Fire TV Stick：
  vega device start-port-forwarding --port 8081
  
  终端会显示一条确认信息，表明端口转发已在端口8081启动。

​

启动Metro bundler

在使用Vega虚拟设备或Fire TV Stick启动应用之前，启动Metro bundler。 启动Metro bundler

• 打开命令提示符，然后运行以下命令。
  npm start
  
  Metro bundler会加载依赖项，并显示欢迎标志。

​

启动您的应用

启动Metro bundler后，您可以启动您的应用。 启动您的应用

• 按照说明在Vega虚拟设备或Fire TV Stick中启动应用。应用启动后，您将在真机或虚拟设备上看到应用的主屏幕。

​

调试应用

在Vega虚拟设备或Fire TV Stick中运行应用后，您可以调试应用。 调试应用

1. 在Metro bundler终端窗口中，按下d键即可在正在运行的应用中打开开发者菜单。设备屏幕上会出现模态叠加层，列出可用的调试选项。
2. 选择调试选项：
   • Reload（重新加载）- 重新加载应用。
   • Open Debugger（打开调试器）- 打开React Native DevTools (React Native 0.83) 或Flipper调试器 (React Native 0.72)。您也可以通过Chrome的远程调试器访问调试器。
   • Show Element Inspector – 显示React的原生元素检查器。
   • Disable Fast Refresh（禁用快速刷新）– 在代码更改后禁用应用的热重载。
   • Configure Bundler（配置Bundler）– 配置JavaScript包的服务地址。
   • Show Perf Monitor（显示性能监视器）- 打开性能监视器（仅提供英文版）。

选择选项后，开发者菜单将关闭，所选工具会在设备上激活。

​

相关主题

• 修复调试问题
• 使用Vega Studio执行逐行调试
• 管理文件、崩溃报告和日志
• React Native基础调试文档（仅提供英文版）

---