Use Chrome DevTools for App Profiling

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 Native for Vega supports Chrome DevTools (CDT) for debugging Fire TV apps. The Chrome browser includes CDT, which lets developers inspect, debug, and profile apps. For CDT basics, visit the React Native debugging documentation.

This page explains how to set up a CDT debugging in Vega Studio for both the Vega Virtual Device and Fire TV Stick.

Run your React Native for Vega app

Follow these steps to start debugging:

Open the command palette in Vega Studio:

Mac: Shift + Command ⌘ + P

Linux: Ctrl + Shift + P
Enter Kepler App: Run the current Vega app.

This command:
- Starts the metro packager (a JavaScript bundler for React Native)
- Sets up port forwarding between your device and host computer
- Launches your app on your device

Start CDT

Start CDT from either Vega Studio or Chrome browser. Vega Studio offers and integrated experience, while Chrome provides direct browser access and browser-specific tools. Use the certified version within Vega Studio for best results.

Animated demonstration showing the process of connecting and using CDT with React Native for Vega apps — Animated demo of the debugging process

You can watch the process in the animated demo, or complete the following steps:

In Vega Studio

Connect your Vega device to your development machine.
In Visual Studio Code (VS Code), go to the Kepler Studio panel.
Select your project from the Vega section.
Select Debug from the Build Modes section.

Note: CDT for React Native is only supported on Debug builds.
Select a Fire TV Stick device or Vega Virtual Device from the Devices section.
Run your app for debugging.

a. Follow the steps in Run your React Native for Vega app.

b. Wait for the app to run successfully.

c. Make sure the React Native Packager is connected.

d. Navigate to VS Code Output window.

e. Select React Native from the drop-down list.

Connected React Native packager in Vega Extension
Launch CDT.

Launch CDT from the command palette

a. Open the command palette.
- Mac: shift + command ⌘ + p
- Linux: Ctrl + Shift + P
b. Enter Kepler: Launch Dev Tools and press return for Mac or Enter for Linux.

Launch CDT from App Performance Tools

You can also select the Chrome Dev Tools from Kepler Studio > App Performance Tools.

CDT session
When you start CDT, a progress bar appears in a new window. When loading completes, CDT opens in that same window.

Connection error

If CDT fails to connect to the app on your device, you see Disconnected at the top of the window.

If CDT disconnects due to Splash Screen display, app restart, or other reasons, close the Dev Tools tab in Vega Studio. Then follow the steps in Start CDT to reconnect.

Set a breakpoint or line-by-line debugging

A breakpoint is a designated point in the code where the debugger pauses execution, allowing you to examine the program's state.

Screenshot shows a breakpoint in a designated point in the code — Line-by-line debugging

Open the JavaScript code file &platform=kepler&dev=true&minify=false, and search for the code line you copied. Click the code line number to set a breakpoint.

Set a breakpoint
Execute the code in your app. Once the breakpoint is hit, the debugger pauses execution.

Debug with breakpoints
Inspect the variables or control program execution as normal.

Flipper and CDT support

According to the React Native team, React Native 0.74 discontinues support for Flipper. However, source maps support in CDT is fully functional in React Native 0.73, and is available for React Native for Vega when updated to React Native 0.73.

Last updated: Sep 30, 2025