Use React Native DevTools to Inspect Component Rendering

Starting with React Native 0.83, React Native DevTools is the recommended debugging and profiling tool for Vega apps. React Native DevTools is built into Metro and provides:

• A component inspector to examine hierarchy, props, and styles.
• A console for viewing JavaScript logs.
• A built-in profiler to analyze component re-rendering and its causes.
• Network, Performance, and Memory tabs for deeper analysis.

Prerequisites

1. Two terminal windows: one for port forwarding and app launch commands, and one for the Metro bundler.
2. A Vega app built in debug mode.

Set up React Native DevTools

Step 1: Set up port forwarding

In your first terminal, run:

vega device start-port-forwarding --port 8081

If you have multiple devices connected, specify the device serial number:

vega device start-port-forwarding --port 8081 -d <<Device_Serial_Number>>

For Vega Virtual Device testing, use VirtualDevice as «Device_Serial_Number».

Step 2: Start Metro

In your second terminal, navigate to your project directory and start the Metro bundler:

npm start

Wait for the Metro Server to display:

INFO  Dev server ready.
INFO  Key commands available:
 r - reload app(s)
 d - open Dev Menu
 j - open DevTools

Step 3: Launch your debug app

After Metro is running, go back to your first terminal and launch the debug version of your app:

vega run-app <<PATH_DEBUG_VPKG>> <<INTERACTIVE_COMPONENT_ID>>

For example, on a Fire TV Stick:

vega run-app build/armv7-debug/keplersample_armv7.vpkg com.amazon.keplersampleapp.main

When the app connects to Metro, you see BUNDLE index.js in the Metro terminal. This confirms the device is communicating with the bundler.

If Metro doesn't show BUNDLE index.js, verify that port forwarding is active and that Metro was started before the app.

Step 4: Open React Native DevTools

In the Metro terminal, press j to open React Native DevTools. A browser window opens with the React Native DevTools interface.

The title bar displays your app name and device information (for example, "com.amazon.keplersampleapp (Unknown Device) - React Native DevTools").

If React Native DevTools doesn't open, press r in the Metro terminal to reload the app and try again.

Inspect and debug your app

React Native DevTools includes the following tabs: Welcome, Console, Sources, Network, Performance, Memory, Components, and Profiler. This page covers the Components and Profiler tabs.

Components

Use the Components tab to examine your component hierarchy, props, and styles. The tree view shows the full structure of your React component tree, from the RootComponent down to individual Text and View elements.

Profiler

The Profiler tab helps you measure rendering performance by recording commit cycles as you interact with your app.

Step 1: Start profiling

Select the Profiler tab then the record button (blue circle) in the toolbar. The screen displays "Profiling is in progress…" while it captures render data.

Step 2: Interact with your app

While profiling is active, navigate through your app to capture the rendering behavior you want to analyze. Each user interaction that triggers a React render is recorded as a commit.

Step 3: Stop profiling

Select the red record button to stop recording. The Profiler displays the captured commits as a bar chart in the timeline.

Each bar represents a React commit cycle. Taller, yellow bars indicate longer renders. Select a bar to inspect the components rendered in that commit.

Step 4: Analyze results

The Profiler provides two views to analyze the recorded data:

Flamegraph view

The Flamegraph shows the component tree for a selected commit. Each bar represents a component. The bar width indicates how long it took to render. The right panel shows commit details:

• Priority – the render priority (Normal or Sync).
• Committed at – when the commit occurred relative to the profiling start.
• Durations – Render time, Layout effects, and Passive effects.
• What caused this update? – the component that triggered the re-render.

For deeper trace analysis, see Inspect Traces in Vega Apps and Identify UI Rendering Issues.

Ranked view

The Ranked view lists components ordered by render time, with the slowest components at the top. Use this view to quickly identify which components are the most expensive to render.

For more details on analyzing re-renders, see Investigate Component Re-rendering Issues and Measure App KPIs.

Other tabs

React Native DevTools also includes the following tabs for additional debugging and analysis:

• Console – view console.log, console.warn, and console.error output from your app. In React Native 0.83, logs no longer appear in the Metro terminal.
• Sources – browse and debug your JavaScript source files with breakpoints, watch expressions, and call stack inspection.
• Network – monitor network requests made by your app. See Monitor Network Traffic with Charles Proxy for advanced network debugging.
• Performance – record and analyze runtime performance traces. See Inspect Traces in Vega Apps for deeper native-level analysis.
• Memory – capture heap snapshots and track memory allocations. See Detect Memory Leaks for advanced leak detection with MemLab.

Connection issues

If DevTools loses connection to the device, a dialog displays "DevTools is disconnected" with the reason. Choose Reconnect DevTools to reconnect, or Dismiss to continue viewing the current data while disconnected.

If you see "Connection refused" errors, confirm port 8081 is forwarded correctly using vega device start-port-forwarding --port 8081.

For cloud development environments, add the following SSH configuration option:

LocalForward 8081 127.0.0.1:8081

Related topics

• Investigate Component Re-rendering Issues
• Identify UI Rendering Issues
• Inspect Traces in Vega Apps
• Measure App KPIs
• Debug Your App with Developer Menu Tools
• Set Up Fast Refresh
• Set Up Amazon Devices Builder Tools for AI-Powered Development

Last updated: Jul 10, 2026