0
# CLI Tool
1

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

4
## Capabilities
5

6
### React DevTools Command
7

8
Launches the standalone DevTools application in an Electron window.
9

10
```bash { .api }
11
react-devtools [project-roots...]
12
```
13

14
**Parameters:**
15
- `project-roots` (optional): Array of project root directory paths for "click to open in editor" functionality
16

17
**Usage Examples:**
18

19
```bash
20
# Basic usage - launch DevTools
21
react-devtools
22

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

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

29
# Global installation
30
npm install -g react-devtools
31
react-devtools
32

33
# Local installation via npx
34
npx react-devtools
35
```
36

37
### Environment Variables
38

39
The CLI tool respects the following environment variables:
40

41
```bash { .api }
42
REACT_DEVTOOLS_PORT=<port>
43
```
44

45
**REACT_DEVTOOLS_PORT**
46
- **Type**: Number
47
- **Default**: 8097
48
- **Description**: Override the default port for the DevTools server
49

50
**Usage Examples:**
51

52
```bash
53
# Use custom port
54
REACT_DEVTOOLS_PORT=9090 react-devtools
55

56
# Windows
57
set REACT_DEVTOOLS_PORT=9090 && react-devtools
58
```
59

60
## Application Features
61

62
### Electron Desktop App
63

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

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

71
### Project Root Integration
72

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

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

79
### Editor Support
80

81
The CLI tool supports opening files in various editors:
82

83
- **Visual Studio Code**: `code`
84
- **Atom**: `atom`
85
- **Sublime Text**: `subl`
86
- **Vim/Neovim**: `vim`, `nvim`
87
- **Emacs**: `emacs`
88
- **WebStorm/IntelliJ**: Platform-specific binaries
89

90
### Update Notifications
91

92
The CLI includes automatic update checking:
93

94
- **Check Interval**: Every 7 days
95
- **Notification Display**: Shows available updates with installation instructions
96
- **Update Methods**: Supports both npm and yarn update commands
97

98
```bash
99
# Update with npm
100
npm update -g react-devtools
101

102
# Update with yarn
103
yarn global upgrade react-devtools
104
```
105

106
## Error Handling
107

108
### Common Issues
109

110
**Port Already in Use**
111
```
112
Another instance of DevTools is running.
113
Only one copy of DevTools can be used at a time.
114
```
115

116
**Solution**: Close other DevTools instances or use a different port
117

118
**Connection Timeout**
119
- Ensure React Native app is running
120
- Verify port forwarding: `adb reverse tcp:8097 tcp:8097`
121
- Check firewall settings
122

123
### Troubleshooting
124

125
**React Native Connection Issues:**
126

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

132
**Editor Integration Issues:**
133

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