Debug Your App with Developer Menu Tools

​

Set up port forwarding

• Open a command prompt, and run the following command. Vega Virtual Device:
  vega virtual-device start
  
  The Vega Virtual Device window opens and displays the home screen.
  vega device start-port-forwarding --device <DEVICE_NAME> -p <PORT> --forward false
  
  The terminal displays a confirmation that port forwarding started on the specified port. Fire TV Stick:
  vega device start-port-forwarding --port 8081
  
  The terminal displays a confirmation that port forwarding started on port 8081.

​

Start the Metro bundler

• Open a command prompt, and run the following command.
  npm start
  
  The Metro bundler loads dependencies and displays its welcome logo.

​

Start your app

• Follow the instructions to start your app in either the Vega Virtual Device or Fire TV Stick. After your app launches, you see the app’s home screen on the device or virtual device.

​

Debug your app

1. In the Metro bundler terminal window, press d to open the developer menu in your running app. A modal overlay appears on the device screen listing the available debugging options.
2. Choose a debugging option:
   • Reload - reloads the app.
   • Open Debugger - opens React Native DevTools (React Native 0.83) or the Flipper debugger (React Native 0.72). You can also access the debugger using Chrome’s remote debugger.
   • Show Element Inspector - displays the React Native’s element inspector.
   • Disable Fast Refresh - disables hot-reloading of the app after code changes.
   • Configure Bundler - configures the address where the JavaScript bundle is available.
   • Show Perf Monitor - opens the performance monitor.

​

Related topics

• Fix Debugging Issues
• Perform Line-by-Line Debugging with Vega Studio
• Manage Files, Crash Reports, and Logs
• React Native basic debugging docs