rn-inspector 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +280 -280
- package/dist/config/Index.d.ts +4 -4
- package/dist/config/Index.d.ts.map +1 -1
- package/dist/config/Index.js +35 -29
- package/dist/config/Index.js.map +1 -1
- package/dist/devtools/bridge.d.ts +1 -1
- package/dist/devtools/bridge.d.ts.map +1 -1
- package/dist/devtools/bridge.js +130 -160
- package/dist/devtools/bridge.js.map +1 -1
- package/dist/devtools/discovery.d.ts +1 -1
- package/dist/devtools/discovery.d.ts.map +1 -1
- package/dist/devtools/discovery.js +13 -17
- package/dist/devtools/discovery.js.map +1 -1
- package/dist/devtools/handlers.d.ts +5 -4
- package/dist/devtools/handlers.d.ts.map +1 -1
- package/dist/devtools/handlers.js +248 -216
- package/dist/devtools/handlers.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +242 -214
- package/dist/index.js.map +1 -1
- package/dist/snippets/INJECT_NETWORK_SNIPPET.d.ts +1 -1
- package/dist/snippets/INJECT_NETWORK_SNIPPET.d.ts.map +1 -1
- package/dist/snippets/INJECT_NETWORK_SNIPPET.js +66 -163
- package/dist/snippets/INJECT_NETWORK_SNIPPET.js.map +1 -1
- package/dist/snippets/INJECT_STORAGE_SNIPPET.d.ts +1 -1
- package/dist/snippets/INJECT_STORAGE_SNIPPET.d.ts.map +1 -1
- package/dist/snippets/INJECT_STORAGE_SNIPPET.js +144 -56
- package/dist/snippets/INJECT_STORAGE_SNIPPET.js.map +1 -1
- package/dist/types/Index.d.ts +45 -5
- package/dist/types/Index.d.ts.map +1 -1
- package/package.json +54 -54
- package/ui/assets/index--lFxgTwV.js +255 -0
- package/ui/index.html +14 -14
- package/dist/index.old.d.ts +0 -3
- package/dist/index.old.d.ts.map +0 -1
- package/dist/index.old.js +0 -1665
- package/dist/index.old.js.map +0 -1
- package/dist/snippets/INJECT_INSPECTOR_SNIPPET.d.ts +0 -2
- package/dist/snippets/INJECT_INSPECTOR_SNIPPET.d.ts.map +0 -1
- package/dist/snippets/INJECT_INSPECTOR_SNIPPET.js +0 -186
- package/dist/snippets/INJECT_INSPECTOR_SNIPPET.js.map +0 -1
- package/ui/assets/index-B3ULljVT.js +0 -273
package/README.md
CHANGED
|
@@ -1,280 +1,280 @@
|
|
|
1
|
-
# rn-inspector CLI
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/rn-inspector)
|
|
4
|
-
[](https://www.npmjs.com/package/rn-inspector)
|
|
5
|
-
|
|
6
|
-
`rn-inspector` is a focused CLI + Web UI that helps you debug **React Native** apps by:
|
|
7
|
-
|
|
8
|
-
- Proxying **Metro** messages.
|
|
9
|
-
- Attaching to **DevTools** targets (single or multiple devices/emulators).
|
|
10
|
-
- Streaming **console logs**, **network requests**, **navigation state**, and selected **storage state** into a modern, glassy web UI.
|
|
11
|
-
|
|
12
|
-
This package is the **CLI entry point** you install globally.
|
|
13
|
-
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
## Installation
|
|
17
|
-
|
|
18
|
-
Install globally from npm:
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install -g rn-inspector
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
After installing, the `rn-inspector` command is available in your shell.
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
## Quick start
|
|
29
|
-
|
|
30
|
-
1. Start your React Native app as usual (Metro running, app open in simulator or device).
|
|
31
|
-
2. In another terminal, run:
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
rn-inspector
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
3. By default this will:
|
|
38
|
-
- Connect to **Metro** on port `8081`.
|
|
39
|
-
- Start a **WebSocket proxy** for the UI at `ws://localhost:9230/inspector`.
|
|
40
|
-
- Serve the **UI** at `http://localhost:4173`.
|
|
41
|
-
- Auto-discover any available **DevTools targets** (for connected devices/emulators).
|
|
42
|
-
|
|
43
|
-
4. Open the UI in your browser (or use the `o` keyboard shortcut), pick a device from the header, and start inspecting **Console** and **Network** events.
|
|
44
|
-
|
|
45
|
-
---
|
|
46
|
-
|
|
47
|
-
## CLI usage
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
rn-inspector \
|
|
51
|
-
[--port 8081 | --port=8081] \
|
|
52
|
-
[--ui-port 4173 | --ui-port=4173] \
|
|
53
|
-
[--ui-ws-port 9230 | --ui-ws-port=9230] \
|
|
54
|
-
[--devtools-url ws://...] \
|
|
55
|
-
[--version]
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### Options
|
|
59
|
-
|
|
60
|
-
- `--port <number>` / `--port=<number>`
|
|
61
|
-
- Metro port to connect to.
|
|
62
|
-
- Default: `8081`.
|
|
63
|
-
- This is also affected by the `METRO_PORT` environment variable (see below).
|
|
64
|
-
|
|
65
|
-
- `--ui-port <number>` / `--ui-port=<number>`
|
|
66
|
-
- HTTP port where the Web UI is served.
|
|
67
|
-
- Default: `4173`.
|
|
68
|
-
- The UI will be available at `http://localhost:<ui-port>`.
|
|
69
|
-
|
|
70
|
-
- `--ui-ws-port <number>` / `--ui-ws-port=<number>`
|
|
71
|
-
- WebSocket port used between the CLI proxy and the Web UI.
|
|
72
|
-
- Default: `9230`.
|
|
73
|
-
- The UI connects to `ws://localhost:<ui-ws-port>/inspector`.
|
|
74
|
-
|
|
75
|
-
- `--devtools-url <ws-url>` / `--devtools-url=<ws-url>`
|
|
76
|
-
- Explicit DevTools websocket URL to attach to (for advanced usage).
|
|
77
|
-
- If omitted, `rn-inspector` will **auto-discover** DevTools targets via `http://<host>:<port>/json` on a range of ports (starting around the Metro port) and attach to all matching targets.
|
|
78
|
-
|
|
79
|
-
- `--version`
|
|
80
|
-
- Print the `rn-inspector` CLI version and exit.
|
|
81
|
-
|
|
82
|
-
### Environment variables
|
|
83
|
-
|
|
84
|
-
- `METRO_PORT`
|
|
85
|
-
- If set, this overrides the default Metro port.
|
|
86
|
-
- Equivalent to passing `--port=<METRO_PORT>`.
|
|
87
|
-
|
|
88
|
-
- `RN_INSPECTOR_DEVTOOLS_URL`
|
|
89
|
-
- Default DevTools websocket URL if `--devtools-url` is not provided.
|
|
90
|
-
- Example: `ws://localhost:9229/devtools/page/XXXX-YYYY`.
|
|
91
|
-
|
|
92
|
-
---
|
|
93
|
-
|
|
94
|
-
## Multi-device DevTools support
|
|
95
|
-
|
|
96
|
-
`rn-inspector` is designed to work with **multiple React Native targets** at once:
|
|
97
|
-
|
|
98
|
-
- The CLI scans a set of ports (around the Metro port and some common DevTools ports) for `/json` endpoints.
|
|
99
|
-
- For each DevTools target it finds, it:
|
|
100
|
-
- Opens a WebSocket connection.
|
|
101
|
-
- Tags all console and network events with a `deviceId`.
|
|
102
|
-
- The CLI periodically sends a **meta `devices` event** over the UI WebSocket with a list of currently attached devices.
|
|
103
|
-
- The Web UI:
|
|
104
|
-
- Shows a **global device selector** in the header.
|
|
105
|
-
- Filters **Console** and **Network** events by the selected device while still showing Metro-only events.
|
|
106
|
-
|
|
107
|
-
If you prefer to control the DevTools connection manually, you can pass a `--devtools-url` instead of relying on auto-discovery.
|
|
108
|
-
|
|
109
|
-
---
|
|
110
|
-
|
|
111
|
-
## Web UI overview
|
|
112
|
-
|
|
113
|
-
When `rn-inspector` is running, the UI is served from:
|
|
114
|
-
|
|
115
|
-
```text
|
|
116
|
-
http://localhost:<ui-port>
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
By default this is `http://localhost:4173`.
|
|
120
|
-
|
|
121
|
-
The UI includes:
|
|
122
|
-
|
|
123
|
-
- **Console** page
|
|
124
|
-
- Live console logs from Metro and DevTools.
|
|
125
|
-
- Level filters (log/info/warn/error).
|
|
126
|
-
- Detail drawer with copy-to-clipboard and timestamps.
|
|
127
|
-
|
|
128
|
-
- **Network** page
|
|
129
|
-
- HTTP requests captured via an injected fetch wrapper / DevTools Network domain.
|
|
130
|
-
- Detail drawer with headers, payload, and response preview (including text, JSON, images, and some binary types).
|
|
131
|
-
|
|
132
|
-
- **Navigation** page
|
|
133
|
-
- Real-time navigation state inspection.
|
|
134
|
-
- Current route information and navigation history.
|
|
135
|
-
- Navigate to any available route with parameters.
|
|
136
|
-
- Deep link testing and navigation controls.
|
|
137
|
-
- Automatic route discovery from your React Navigation setup.
|
|
138
|
-
|
|
139
|
-
- **Storage** page
|
|
140
|
-
- AsyncStorage key/value inspection.
|
|
141
|
-
- Redux state visualization (when exposed).
|
|
142
|
-
|
|
143
|
-
- **Header controls**
|
|
144
|
-
- Global **device selector** (backed by the `deviceId` tagging in the CLI).
|
|
145
|
-
- Global **capture toggles** for Console and Network streams.
|
|
146
|
-
- Global **proxy WS status chip** (shows connection status and basic stats; click to reconnect when disconnected).
|
|
147
|
-
- Global **DevTools status chip** (shows connected/closed/error and lets you request a DevTools reconnect from the UI).
|
|
148
|
-
|
|
149
|
-
---
|
|
150
|
-
|
|
151
|
-
## Storage & Redux inspection
|
|
152
|
-
|
|
153
|
-
The **Storage** page lets you inspect:
|
|
154
|
-
|
|
155
|
-
- **AsyncStorage** key/value pairs.
|
|
156
|
-
- **Redux** state (if you are using Redux).
|
|
157
|
-
|
|
158
|
-
To keep the CLI simple and avoid depending on your bundler setup, you need to expose these on the global object in your app:
|
|
159
|
-
|
|
160
|
-
### AsyncStorage
|
|
161
|
-
|
|
162
|
-
In your React Native app (for example in `App.tsx`):
|
|
163
|
-
|
|
164
|
-
```ts
|
|
165
|
-
import AsyncStorage from
|
|
166
|
-
|
|
167
|
-
// Make AsyncStorage visible to rn-inspector storage helper
|
|
168
|
-
global.__RN_INSPECTOR_ASYNC_STORAGE__ = AsyncStorage;
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
Once this is set and the app is running with DevTools debugging enabled, the Storage page's **AsyncStorage** panel will show your keys and values.
|
|
172
|
-
|
|
173
|
-
### Redux store
|
|
174
|
-
|
|
175
|
-
If you use Redux, expose your store after you create it (anywhere in your app setup):
|
|
176
|
-
|
|
177
|
-
```ts
|
|
178
|
-
import { createStore } from
|
|
179
|
-
|
|
180
|
-
const store = createStore(reducer);
|
|
181
|
-
|
|
182
|
-
// Expose Redux store for rn-inspector
|
|
183
|
-
(global as any).__RN_INSPECTOR_REDUX_STORE__ = store;
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
The Storage page's **Redux State** panel will then show `store.getState()` and update as your state changes.
|
|
187
|
-
|
|
188
|
-
If you do not expose these globals, the Storage page will show a helpful message explaining what to add in your app.
|
|
189
|
-
|
|
190
|
-
---
|
|
191
|
-
|
|
192
|
-
## Navigation inspection
|
|
193
|
-
|
|
194
|
-
The **Navigation** page lets you inspect and control your React Navigation setup:
|
|
195
|
-
|
|
196
|
-
- **Current Route** information with name, key, params, and path.
|
|
197
|
-
- **Navigation History** with timestamps and route parameters.
|
|
198
|
-
- **Available Routes** automatically discovered from your navigation structure.
|
|
199
|
-
- **Navigate to Route** with support for route parameters and nested navigation.
|
|
200
|
-
- **Reset Navigation State** to restore specific navigation states.
|
|
201
|
-
- **Deep Link Testing** to test URL-based navigation.
|
|
202
|
-
- **Navigation Controls** including go back functionality.
|
|
203
|
-
|
|
204
|
-
### React Navigation setup
|
|
205
|
-
|
|
206
|
-
To enable navigation inspection, add the following to your React Native app (for example in `App.tsx`):
|
|
207
|
-
|
|
208
|
-
```ts
|
|
209
|
-
import { NavigationContainer } from '@react-navigation/native';
|
|
210
|
-
|
|
211
|
-
function App() {
|
|
212
|
-
const navigationRef = useRef(null);
|
|
213
|
-
|
|
214
|
-
useEffect(() => {
|
|
215
|
-
if (global.__RN_INSPECTOR_NAVIGATION__) {
|
|
216
|
-
global.__RN_INSPECTOR_NAVIGATION__
|
|
217
|
-
.setNavigationRef(navigationRef.current);
|
|
218
|
-
}
|
|
219
|
-
}, []);
|
|
220
|
-
|
|
221
|
-
return (
|
|
222
|
-
<NavigationContainer ref={navigationRef}>
|
|
223
|
-
{/* Your navigation stack */}
|
|
224
|
-
</NavigationContainer>
|
|
225
|
-
);
|
|
226
|
-
}
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
Once this is set and the app is running with DevTools debugging enabled, the Navigation page will show your current route, navigation history, and let you navigate to any available route.
|
|
230
|
-
|
|
231
|
-
### Navigation features
|
|
232
|
-
|
|
233
|
-
- **Automatic Route Discovery**: Scans your navigation structure and lists all available routes.
|
|
234
|
-
- **Nested Navigation Support**: Handles complex navigation hierarchies with proper screen parameter passing.
|
|
235
|
-
- **Real-time Updates**: Navigation state updates automatically as you navigate in your app.
|
|
236
|
-
- **Parameter Support**: Pass route parameters when navigating programmatically.
|
|
237
|
-
- **History Tracking**: See your navigation history with timestamps and parameters.
|
|
238
|
-
- **Deep Link Testing**: Test deep links directly from the inspector UI.
|
|
239
|
-
|
|
240
|
-
If you do not set up the navigation ref, the Navigation page will show setup instructions.
|
|
241
|
-
|
|
242
|
-
While `rn-inspector` is running in a TTY, the CLI listens for a few simple shortcuts:
|
|
243
|
-
|
|
244
|
-
- `o` / `O`
|
|
245
|
-
- Open the Web UI in your default browser (using `start` on Windows, `open` on macOS, or `xdg-open` on Linux).
|
|
246
|
-
|
|
247
|
-
- `r` / `R`
|
|
248
|
-
- Print a hint on how to fully reload the CLI:
|
|
249
|
-
- Press `Ctrl+C` to stop the process, then run `rn-inspector` again.
|
|
250
|
-
|
|
251
|
-
- `Ctrl+C`
|
|
252
|
-
- Quit `rn-inspector`.
|
|
253
|
-
|
|
254
|
-
If the terminal does not support raw mode (no TTY), these shortcuts are safely disabled.
|
|
255
|
-
|
|
256
|
-
---
|
|
257
|
-
|
|
258
|
-
## Error handling & reconnection
|
|
259
|
-
|
|
260
|
-
- If the **Metro websocket** closes or errors, the CLI logs a message and sends a small `meta` event to the UI so you can see the status.
|
|
261
|
-
- For **DevTools websockets** (one per device):
|
|
262
|
-
- The CLI emits `devtools` **status meta events** (`open`, `closed`, `error`) but does **not** auto-retry reconnecting.
|
|
263
|
-
- The Web UI header exposes a **DevTools status chip**; clicking it sends a control message to the CLI to re-run DevTools discovery and attach again.
|
|
264
|
-
- When DevTools auto-discovery finds no `/json` targets, the CLI logs a message _and_ emits a warning `meta` event so the UI can surface a toast like “DevTools auto-discovery found no /json targets (falling back to Metro-only mode)”.
|
|
265
|
-
|
|
266
|
-
---
|
|
267
|
-
|
|
268
|
-
## Repository
|
|
269
|
-
|
|
270
|
-
This CLI is part of the **RN Inspector Monorepo**:
|
|
271
|
-
|
|
272
|
-
- GitHub: <https://github.com/afzaal-28/rn-inspector>
|
|
273
|
-
|
|
274
|
-
Please open issues or pull requests in that repository for bugs, feature requests, or contributions.
|
|
275
|
-
|
|
276
|
-
---
|
|
277
|
-
|
|
278
|
-
## License
|
|
279
|
-
|
|
280
|
-
Licensed under the [MIT License](https://github.com/afzaal-28/rn-inspector/blob/main/LICENSE).
|
|
1
|
+
# rn-inspector CLI
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/rn-inspector)
|
|
4
|
+
[](https://www.npmjs.com/package/rn-inspector)
|
|
5
|
+
|
|
6
|
+
`rn-inspector` is a focused CLI + Web UI that helps you debug **React Native** apps by:
|
|
7
|
+
|
|
8
|
+
- Proxying **Metro** messages.
|
|
9
|
+
- Attaching to **DevTools** targets (single or multiple devices/emulators).
|
|
10
|
+
- Streaming **console logs**, **network requests**, **navigation state**, and selected **storage state** into a modern, glassy web UI.
|
|
11
|
+
|
|
12
|
+
This package is the **CLI entry point** you install globally.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
Install globally from npm:
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install -g rn-inspector
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
After installing, the `rn-inspector` command is available in your shell.
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Quick start
|
|
29
|
+
|
|
30
|
+
1. Start your React Native app as usual (Metro running, app open in simulator or device).
|
|
31
|
+
2. In another terminal, run:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
rn-inspector
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
3. By default this will:
|
|
38
|
+
- Connect to **Metro** on port `8081`.
|
|
39
|
+
- Start a **WebSocket proxy** for the UI at `ws://localhost:9230/inspector`.
|
|
40
|
+
- Serve the **UI** at `http://localhost:4173`.
|
|
41
|
+
- Auto-discover any available **DevTools targets** (for connected devices/emulators).
|
|
42
|
+
|
|
43
|
+
4. Open the UI in your browser (or use the `o` keyboard shortcut), pick a device from the header, and start inspecting **Console** and **Network** events.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## CLI usage
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
rn-inspector \
|
|
51
|
+
[--port 8081 | --port=8081] \
|
|
52
|
+
[--ui-port 4173 | --ui-port=4173] \
|
|
53
|
+
[--ui-ws-port 9230 | --ui-ws-port=9230] \
|
|
54
|
+
[--devtools-url ws://...] \
|
|
55
|
+
[--version]
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Options
|
|
59
|
+
|
|
60
|
+
- `--port <number>` / `--port=<number>`
|
|
61
|
+
- Metro port to connect to.
|
|
62
|
+
- Default: `8081`.
|
|
63
|
+
- This is also affected by the `METRO_PORT` environment variable (see below).
|
|
64
|
+
|
|
65
|
+
- `--ui-port <number>` / `--ui-port=<number>`
|
|
66
|
+
- HTTP port where the Web UI is served.
|
|
67
|
+
- Default: `4173`.
|
|
68
|
+
- The UI will be available at `http://localhost:<ui-port>`.
|
|
69
|
+
|
|
70
|
+
- `--ui-ws-port <number>` / `--ui-ws-port=<number>`
|
|
71
|
+
- WebSocket port used between the CLI proxy and the Web UI.
|
|
72
|
+
- Default: `9230`.
|
|
73
|
+
- The UI connects to `ws://localhost:<ui-ws-port>/inspector`.
|
|
74
|
+
|
|
75
|
+
- `--devtools-url <ws-url>` / `--devtools-url=<ws-url>`
|
|
76
|
+
- Explicit DevTools websocket URL to attach to (for advanced usage).
|
|
77
|
+
- If omitted, `rn-inspector` will **auto-discover** DevTools targets via `http://<host>:<port>/json` on a range of ports (starting around the Metro port) and attach to all matching targets.
|
|
78
|
+
|
|
79
|
+
- `--version`
|
|
80
|
+
- Print the `rn-inspector` CLI version and exit.
|
|
81
|
+
|
|
82
|
+
### Environment variables
|
|
83
|
+
|
|
84
|
+
- `METRO_PORT`
|
|
85
|
+
- If set, this overrides the default Metro port.
|
|
86
|
+
- Equivalent to passing `--port=<METRO_PORT>`.
|
|
87
|
+
|
|
88
|
+
- `RN_INSPECTOR_DEVTOOLS_URL`
|
|
89
|
+
- Default DevTools websocket URL if `--devtools-url` is not provided.
|
|
90
|
+
- Example: `ws://localhost:9229/devtools/page/XXXX-YYYY`.
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Multi-device DevTools support
|
|
95
|
+
|
|
96
|
+
`rn-inspector` is designed to work with **multiple React Native targets** at once:
|
|
97
|
+
|
|
98
|
+
- The CLI scans a set of ports (around the Metro port and some common DevTools ports) for `/json` endpoints.
|
|
99
|
+
- For each DevTools target it finds, it:
|
|
100
|
+
- Opens a WebSocket connection.
|
|
101
|
+
- Tags all console and network events with a `deviceId`.
|
|
102
|
+
- The CLI periodically sends a **meta `devices` event** over the UI WebSocket with a list of currently attached devices.
|
|
103
|
+
- The Web UI:
|
|
104
|
+
- Shows a **global device selector** in the header.
|
|
105
|
+
- Filters **Console** and **Network** events by the selected device while still showing Metro-only events.
|
|
106
|
+
|
|
107
|
+
If you prefer to control the DevTools connection manually, you can pass a `--devtools-url` instead of relying on auto-discovery.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Web UI overview
|
|
112
|
+
|
|
113
|
+
When `rn-inspector` is running, the UI is served from:
|
|
114
|
+
|
|
115
|
+
```text
|
|
116
|
+
http://localhost:<ui-port>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
By default this is `http://localhost:4173`.
|
|
120
|
+
|
|
121
|
+
The UI includes:
|
|
122
|
+
|
|
123
|
+
- **Console** page
|
|
124
|
+
- Live console logs from Metro and DevTools.
|
|
125
|
+
- Level filters (log/info/warn/error).
|
|
126
|
+
- Detail drawer with copy-to-clipboard and timestamps.
|
|
127
|
+
|
|
128
|
+
- **Network** page
|
|
129
|
+
- HTTP requests captured via an injected fetch wrapper / DevTools Network domain.
|
|
130
|
+
- Detail drawer with headers, payload, and response preview (including text, JSON, images, and some binary types).
|
|
131
|
+
|
|
132
|
+
- **Navigation** page
|
|
133
|
+
- Real-time navigation state inspection.
|
|
134
|
+
- Current route information and navigation history.
|
|
135
|
+
- Navigate to any available route with parameters.
|
|
136
|
+
- Deep link testing and navigation controls.
|
|
137
|
+
- Automatic route discovery from your React Navigation setup.
|
|
138
|
+
|
|
139
|
+
- **Storage** page
|
|
140
|
+
- AsyncStorage key/value inspection.
|
|
141
|
+
- Redux state visualization (when exposed).
|
|
142
|
+
|
|
143
|
+
- **Header controls**
|
|
144
|
+
- Global **device selector** (backed by the `deviceId` tagging in the CLI).
|
|
145
|
+
- Global **capture toggles** for Console and Network streams.
|
|
146
|
+
- Global **proxy WS status chip** (shows connection status and basic stats; click to reconnect when disconnected).
|
|
147
|
+
- Global **DevTools status chip** (shows connected/closed/error and lets you request a DevTools reconnect from the UI).
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## Storage & Redux inspection
|
|
152
|
+
|
|
153
|
+
The **Storage** page lets you inspect:
|
|
154
|
+
|
|
155
|
+
- **AsyncStorage** key/value pairs.
|
|
156
|
+
- **Redux** state (if you are using Redux).
|
|
157
|
+
|
|
158
|
+
To keep the CLI simple and avoid depending on your bundler setup, you need to expose these on the global object in your app:
|
|
159
|
+
|
|
160
|
+
### AsyncStorage
|
|
161
|
+
|
|
162
|
+
In your React Native app (for example in `App.tsx`):
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
166
|
+
|
|
167
|
+
// Make AsyncStorage visible to rn-inspector storage helper
|
|
168
|
+
global.__RN_INSPECTOR_ASYNC_STORAGE__ = AsyncStorage;
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
Once this is set and the app is running with DevTools debugging enabled, the Storage page's **AsyncStorage** panel will show your keys and values.
|
|
172
|
+
|
|
173
|
+
### Redux store
|
|
174
|
+
|
|
175
|
+
If you use Redux, expose your store after you create it (anywhere in your app setup):
|
|
176
|
+
|
|
177
|
+
```ts
|
|
178
|
+
import { createStore } from 'redux';
|
|
179
|
+
|
|
180
|
+
const store = createStore(reducer);
|
|
181
|
+
|
|
182
|
+
// Expose Redux store for rn-inspector
|
|
183
|
+
(global as any).__RN_INSPECTOR_REDUX_STORE__ = store;
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
The Storage page's **Redux State** panel will then show `store.getState()` and update as your state changes.
|
|
187
|
+
|
|
188
|
+
If you do not expose these globals, the Storage page will show a helpful message explaining what to add in your app.
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
## Navigation inspection
|
|
193
|
+
|
|
194
|
+
The **Navigation** page lets you inspect and control your React Navigation setup:
|
|
195
|
+
|
|
196
|
+
- **Current Route** information with name, key, params, and path.
|
|
197
|
+
- **Navigation History** with timestamps and route parameters.
|
|
198
|
+
- **Available Routes** automatically discovered from your navigation structure.
|
|
199
|
+
- **Navigate to Route** with support for route parameters and nested navigation.
|
|
200
|
+
- **Reset Navigation State** to restore specific navigation states.
|
|
201
|
+
- **Deep Link Testing** to test URL-based navigation.
|
|
202
|
+
- **Navigation Controls** including go back functionality.
|
|
203
|
+
|
|
204
|
+
### React Navigation setup
|
|
205
|
+
|
|
206
|
+
To enable navigation inspection, add the following to your React Native app (for example in `App.tsx`):
|
|
207
|
+
|
|
208
|
+
```ts
|
|
209
|
+
import { NavigationContainer } from '@react-navigation/native';
|
|
210
|
+
|
|
211
|
+
function App() {
|
|
212
|
+
const navigationRef = useRef(null);
|
|
213
|
+
|
|
214
|
+
useEffect(() => {
|
|
215
|
+
if (global.__RN_INSPECTOR_NAVIGATION__) {
|
|
216
|
+
global.__RN_INSPECTOR_NAVIGATION__
|
|
217
|
+
.setNavigationRef(navigationRef.current);
|
|
218
|
+
}
|
|
219
|
+
}, []);
|
|
220
|
+
|
|
221
|
+
return (
|
|
222
|
+
<NavigationContainer ref={navigationRef}>
|
|
223
|
+
{/* Your navigation stack */}
|
|
224
|
+
</NavigationContainer>
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
Once this is set and the app is running with DevTools debugging enabled, the Navigation page will show your current route, navigation history, and let you navigate to any available route.
|
|
230
|
+
|
|
231
|
+
### Navigation features
|
|
232
|
+
|
|
233
|
+
- **Automatic Route Discovery**: Scans your navigation structure and lists all available routes.
|
|
234
|
+
- **Nested Navigation Support**: Handles complex navigation hierarchies with proper screen parameter passing.
|
|
235
|
+
- **Real-time Updates**: Navigation state updates automatically as you navigate in your app.
|
|
236
|
+
- **Parameter Support**: Pass route parameters when navigating programmatically.
|
|
237
|
+
- **History Tracking**: See your navigation history with timestamps and parameters.
|
|
238
|
+
- **Deep Link Testing**: Test deep links directly from the inspector UI.
|
|
239
|
+
|
|
240
|
+
If you do not set up the navigation ref, the Navigation page will show setup instructions.
|
|
241
|
+
|
|
242
|
+
While `rn-inspector` is running in a TTY, the CLI listens for a few simple shortcuts:
|
|
243
|
+
|
|
244
|
+
- `o` / `O`
|
|
245
|
+
- Open the Web UI in your default browser (using `start` on Windows, `open` on macOS, or `xdg-open` on Linux).
|
|
246
|
+
|
|
247
|
+
- `r` / `R`
|
|
248
|
+
- Print a hint on how to fully reload the CLI:
|
|
249
|
+
- Press `Ctrl+C` to stop the process, then run `rn-inspector` again.
|
|
250
|
+
|
|
251
|
+
- `Ctrl+C`
|
|
252
|
+
- Quit `rn-inspector`.
|
|
253
|
+
|
|
254
|
+
If the terminal does not support raw mode (no TTY), these shortcuts are safely disabled.
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## Error handling & reconnection
|
|
259
|
+
|
|
260
|
+
- If the **Metro websocket** closes or errors, the CLI logs a message and sends a small `meta` event to the UI so you can see the status.
|
|
261
|
+
- For **DevTools websockets** (one per device):
|
|
262
|
+
- The CLI emits `devtools` **status meta events** (`open`, `closed`, `error`) but does **not** auto-retry reconnecting.
|
|
263
|
+
- The Web UI header exposes a **DevTools status chip**; clicking it sends a control message to the CLI to re-run DevTools discovery and attach again.
|
|
264
|
+
- When DevTools auto-discovery finds no `/json` targets, the CLI logs a message _and_ emits a warning `meta` event so the UI can surface a toast like “DevTools auto-discovery found no /json targets (falling back to Metro-only mode)”.
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
## Repository
|
|
269
|
+
|
|
270
|
+
This CLI is part of the **RN Inspector Monorepo**:
|
|
271
|
+
|
|
272
|
+
- GitHub: <https://github.com/afzaal-28/rn-inspector>
|
|
273
|
+
|
|
274
|
+
Please open issues or pull requests in that repository for bugs, feature requests, or contributions.
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
## License
|
|
279
|
+
|
|
280
|
+
Licensed under the [MIT License](https://github.com/afzaal-28/rn-inspector/blob/main/LICENSE).
|
package/dist/config/Index.d.ts
CHANGED
|
@@ -7,17 +7,17 @@ export declare const DEVTOOLS_EXTRA_PORTS: number[];
|
|
|
7
7
|
export declare const DEFAULT_DISCOVERY_TIMEOUT_MS = 750;
|
|
8
8
|
export declare const DEVTOOLS_DISCOVERY_PATH = "/json";
|
|
9
9
|
export declare const METRO_WS_PATH = "/message";
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const UI_WS_MESSAGES_PATH = "/inspector-messages";
|
|
11
|
+
export declare const UI_WS_NETWORK_PATH = "/inspector-network";
|
|
12
|
+
export declare const UI_WS_STORAGE_PATH = "/inspector-storage";
|
|
13
|
+
export declare const UI_WS_CONTROL_PATH = "/inspector-control";
|
|
11
14
|
export declare const UI_STATIC_INDEX = "index.html";
|
|
12
15
|
export declare const ENV_DEVTOOLS_URL = "RN_INSPECTOR_DEVTOOLS_URL";
|
|
13
16
|
export declare const ENV_METRO_PORT = "METRO_PORT";
|
|
14
17
|
export declare const CONTROL_MSG_TYPE = "control";
|
|
15
18
|
export declare const CONTROL_CMD_RECONNECT = "reconnect-devtools";
|
|
16
19
|
export declare const CONTROL_CMD_FETCH_STORAGE = "fetch-storage";
|
|
17
|
-
export declare const CONTROL_CMD_FETCH_UI = "fetch-ui";
|
|
18
20
|
export declare const CONTROL_CMD_MUTATE_STORAGE = "mutate-storage";
|
|
19
|
-
export declare const CONTROL_CMD_START_MIRROR = "start-mirror";
|
|
20
|
-
export declare const CONTROL_CMD_STOP_MIRROR = "stop-mirror";
|
|
21
21
|
export declare const DEVICE_ID_EXPLICIT = "devtools-explicit";
|
|
22
22
|
export declare const DEVICE_ID_ALL = "all";
|
|
23
23
|
export declare const DEVICE_LABEL_EXPLICIT = "DevTools (explicit URL)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Index.d.ts","sourceRoot":"","sources":["../../src/config/Index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,eAAO,MAAM,YAAY,cAAc,CAAC;AACxC,eAAO,MAAM,qBAAqB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Index.d.ts","sourceRoot":"","sources":["../../src/config/Index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,eAAO,MAAM,YAAY,cAAc,CAAC;AACxC,eAAO,MAAM,qBAAqB,EAAE,MAAM,EAAiD,CAAC;AAC5F,eAAO,MAAM,oBAAoB,UAAqB,CAAC;AACvD,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAChD,eAAO,MAAM,uBAAuB,UAAU,CAAC;AAC/C,eAAO,MAAM,aAAa,aAAa,CAAC;AACxC,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AACzD,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,eAAe,eAAe,CAAC;AAC5C,eAAO,MAAM,gBAAgB,8BAA8B,CAAC;AAC5D,eAAO,MAAM,cAAc,eAAe,CAAC;AAC3C,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAC1C,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AACzD,eAAO,MAAM,0BAA0B,mBAAmB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,sBAAsB,CAAC;AACtD,eAAO,MAAM,aAAa,QAAQ,CAAC;AACnC,eAAO,MAAM,qBAAqB,4BAA4B,CAAC;AAC/D,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,eAAO,MAAM,aAAa,SAAS,CAAC;AAIpC,eAAO,MAAM,OAAO,EAAE,MACiD,CAAC;AAExE,wBAAgB,cAAc,IAAI,MAAM,CAcvC;AAED,wBAAgB,aAAa,IAAI,MAAM,CAStC;AAED,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CASjE"}
|