Use React DevTools to Inspect Component Rendering

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the Release Notes.

React DevTools helps you debug and profile React component rendering in your Vega apps. It provides:

A component inspector to examine hierarchy, props, and styles.
A built-in profiler to analyze component re-rendering and its causes.

This page explains how to install, configure, and use React DevTools with your Vega apps.

Prerequisites

Three terminal windows with the Vega SDK environment script sourced.
A Vega app project configured for debug builds.

For set up instructions, see Install Vega SDK and Build a Vega App.

Set Up React DevTools

Install React DevTools globally.
Copied to clipboard.
```
 npm install -g react-devtools@6.0.1
```
Forward the required ports to activate connectivity.

React DevTools connects through port 8097, while the React Native packager uses port 8081.

Copied to clipboard.
```
kepler device start-port-forwarding -p 8097 -f false -d <<Device_Serial_Number>>
kepler device start-port-forwarding -p 8081 -f false -d <<Device_Serial_Number>>
```
For Vega Virtual Device testing, use VirtualDevice as «Device_Serial_Number».
Launch the React DevTools.
Copied to clipboard.
```
 npx react-devtools
```
Start the React Native packager in your project directory.
Copied to clipboard.
```
 npm start
```
Run the debug version of your app.

Copied to clipboard.
```
kepler run-kepler <<PATH_DEBUG_VPKG>> <<INTERACTIVE_COMPONENT_ID>>
```
React DevTools connects when your app loads. Press r in the packager terminal to reload if needed.