rn-inspector 0.2.0 → 0.2.1
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 +54 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +861 -22
- package/dist/index.js.map +1 -1
- package/package.json +5 -3
- package/ui/assets/index-1MGE-7sm.js +166 -0
- package/ui/index.html +1 -1
- package/ui/assets/index-CuX4W-zF.js +0 -164
- package/ui/dist/Legend_moyai.png +0 -0
- package/ui/dist/assets/index-1KQqYNq3.css +0 -1
- package/ui/dist/assets/index-CuX4W-zF.js +0 -164
- package/ui/dist/banner.png +0 -0
- package/ui/dist/icon.png +0 -0
- package/ui/dist/index.html +0 -14
package/README.md
CHANGED
|
@@ -47,30 +47,38 @@ After installing, the `rn-inspector` command is available in your shell.
|
|
|
47
47
|
## CLI usage
|
|
48
48
|
|
|
49
49
|
```bash
|
|
50
|
-
rn-inspector
|
|
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 | -v | version]
|
|
51
56
|
```
|
|
52
57
|
|
|
53
58
|
### Options
|
|
54
59
|
|
|
55
|
-
- `--port=<number>`
|
|
60
|
+
- `--port <number>` / `--port=<number>`
|
|
56
61
|
- Metro port to connect to.
|
|
57
62
|
- Default: `8081`.
|
|
58
63
|
- This is also affected by the `METRO_PORT` environment variable (see below).
|
|
59
64
|
|
|
60
|
-
- `--ui-port=<number>`
|
|
65
|
+
- `--ui-port <number>` / `--ui-port=<number>`
|
|
61
66
|
- HTTP port where the Web UI is served.
|
|
62
67
|
- Default: `4173`.
|
|
63
68
|
- The UI will be available at `http://localhost:<ui-port>`.
|
|
64
69
|
|
|
65
|
-
- `--ui-ws-port=<number>`
|
|
70
|
+
- `--ui-ws-port <number>` / `--ui-ws-port=<number>`
|
|
66
71
|
- WebSocket port used between the CLI proxy and the Web UI.
|
|
67
72
|
- Default: `9230`.
|
|
68
73
|
- The UI connects to `ws://localhost:<ui-ws-port>/inspector`.
|
|
69
74
|
|
|
70
|
-
- `--devtools-url=<ws-url>`
|
|
75
|
+
- `--devtools-url <ws-url>` / `--devtools-url=<ws-url>`
|
|
71
76
|
- Explicit DevTools websocket URL to attach to (for advanced usage).
|
|
72
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.
|
|
73
78
|
|
|
79
|
+
- `--version`, `-v`, `version`
|
|
80
|
+
- Print the `rn-inspector` CLI version and exit without starting the proxy.
|
|
81
|
+
|
|
74
82
|
### Environment variables
|
|
75
83
|
|
|
76
84
|
- `METRO_PORT`
|
|
@@ -131,6 +139,47 @@ The UI includes:
|
|
|
131
139
|
|
|
132
140
|
---
|
|
133
141
|
|
|
142
|
+
## Storage & Redux inspection
|
|
143
|
+
|
|
144
|
+
The **Storage** page lets you inspect:
|
|
145
|
+
|
|
146
|
+
- **AsyncStorage** key/value pairs.
|
|
147
|
+
- **Redux** state (if you are using Redux).
|
|
148
|
+
|
|
149
|
+
To keep the CLI simple and avoid depending on your bundler setup, you need to expose these on the global object in your app:
|
|
150
|
+
|
|
151
|
+
### AsyncStorage
|
|
152
|
+
|
|
153
|
+
In your React Native app (for example in `App.tsx`):
|
|
154
|
+
|
|
155
|
+
```ts
|
|
156
|
+
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
157
|
+
|
|
158
|
+
// Make AsyncStorage visible to rn-inspector storage helper
|
|
159
|
+
(global as any).AsyncStorage = AsyncStorage;
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
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.
|
|
163
|
+
|
|
164
|
+
### Redux store
|
|
165
|
+
|
|
166
|
+
If you use Redux, expose your store after you create it (anywhere in your app setup):
|
|
167
|
+
|
|
168
|
+
```ts
|
|
169
|
+
import { createStore } from 'redux';
|
|
170
|
+
|
|
171
|
+
const store = createStore(reducer);
|
|
172
|
+
|
|
173
|
+
// Expose Redux store for rn-inspector
|
|
174
|
+
(global as any).__RN_INSPECTOR_REDUX_STORE__ = store;
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
The Storage page's **Redux State** panel will then show `store.getState()` and update as your state changes.
|
|
178
|
+
|
|
179
|
+
If you do not expose these globals, the Storage page will show a helpful message explaining what to add in your app.
|
|
180
|
+
|
|
181
|
+
---
|
|
182
|
+
|
|
134
183
|
## Keyboard shortcuts (CLI)
|
|
135
184
|
|
|
136
185
|
While `rn-inspector` is running in a TTY, the CLI listens for a few simple shortcuts:
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAw0DA,wBAAsB,IAAI,kBA4BzB"}
|