CLI Tool

Command-line interface for launching the standalone React DevTools application with an Electron-based desktop interface for debugging React applications.

Capabilities

React DevTools Command

Launches the standalone DevTools application in an Electron window.

react-devtools [project-roots...]

Parameters:

• project-roots (optional): Array of project root directory paths for "click to open in editor" functionality

Usage Examples:

# Basic usage - launch DevTools
react-devtools

# With project root for editor integration
react-devtools /path/to/my/project

# Multiple project roots
react-devtools /path/to/frontend /path/to/backend

# Global installation
npm install -g react-devtools
react-devtools

# Local installation via npx
npx react-devtools

Environment Variables

The CLI tool respects the following environment variables:

REACT_DEVTOOLS_PORT=<port>

REACT_DEVTOOLS_PORT

• Type: Number
• Default: 8097
• Description: Override the default port for the DevTools server

Usage Examples:

# Use custom port
REACT_DEVTOOLS_PORT=9090 react-devtools

# Windows
set REACT_DEVTOOLS_PORT=9090 && react-devtools

Application Features

Electron Desktop App

The CLI launches a standalone Electron application with the following features:

• Window Configuration: 800x600 pixel window with custom frame
• Icon Support: Platform-specific icons (macOS dock icon support)
• Security: Context isolation enabled, remote module disabled
• External Links: Opens external URLs in system browser

Project Root Integration

When project roots are provided, the DevTools application gains enhanced functionality:

• Click-to-Open: Click on components in DevTools to open source files in your editor
• File Resolution: Resolves relative file paths within specified project directories
• Multi-Project Support: Supports monorepos and multi-project setups

Editor Support

The CLI tool supports opening files in various editors:

• Visual Studio Code: code
• Atom: atom
• Sublime Text: subl
• Vim/Neovim: vim, nvim
• Emacs: emacs
• WebStorm/IntelliJ: Platform-specific binaries

Update Notifications

The CLI includes automatic update checking:

• Check Interval: Every 7 days
• Notification Display: Shows available updates with installation instructions
• Update Methods: Supports both npm and yarn update commands

# Update with npm
npm update -g react-devtools

# Update with yarn
yarn global upgrade react-devtools

Error Handling

Common Issues

Port Already in Use

Another instance of DevTools is running.
Only one copy of DevTools can be used at a time.

Solution: Close other DevTools instances or use a different port

Connection Timeout

• Ensure React Native app is running
• Verify port forwarding: adb reverse tcp:8097 tcp:8097
• Check firewall settings

Troubleshooting

React Native Connection Issues:

1. Verify DevTools is running: react-devtools
2. Forward ports: adb reverse tcp:8097 tcp:8097
3. Reload React Native app
4. Check React Native version compatibility

Editor Integration Issues:

1. Verify editor is in PATH
2. Check project root paths are correct
3. Ensure files exist at expected locations
4. Test editor launch manually