rn-inspector 0.1.6 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # rn-inspector CLI
 
-> **Warning:** All versions **before `0.1.6`** had known issues (especially on macOS). Please upgrade and use the latest version `0.1.6` or newer. We’re sorry for the inconvenience.
+> **Warning:** All versions **before `0.2.0`** had known issues (especially on macOS and DevTools reconnect behavior). Please upgrade and use the latest version `0.2.0` or newer. We’re sorry for the inconvenience.
 
 `rn-inspector` is a small CLI + Web UI that helps you debug **React Native** apps by:
 
@@ -47,30 +47,38 @@ After installing, the `rn-inspector` command is available in your shell.
 ## CLI usage
 
 ```bash
-rn-inspector [--port=8081] [--ui-port=4173] [--ui-ws-port=9230] [--devtools-url=ws://...]
+rn-inspector \
+  [--port 8081 | --port=8081] \
+  [--ui-port 4173 | --ui-port=4173] \
+  [--ui-ws-port 9230 | --ui-ws-port=9230] \
+  [--devtools-url ws://...] \
+  [--version | -v | version]
 ```
 
 ### Options
 
-- `--port=<number>`
+- `--port <number>` / `--port=<number>`
   - Metro port to connect to.
   - Default: `8081`.
   - This is also affected by the `METRO_PORT` environment variable (see below).
 
-- `--ui-port=<number>`
+- `--ui-port <number>` / `--ui-port=<number>`
   - HTTP port where the Web UI is served.
   - Default: `4173`.
   - The UI will be available at `http://localhost:<ui-port>`.
 
-- `--ui-ws-port=<number>`
+- `--ui-ws-port <number>` / `--ui-ws-port=<number>`
   - WebSocket port used between the CLI proxy and the Web UI.
   - Default: `9230`.
   - The UI connects to `ws://localhost:<ui-ws-port>/inspector`.
 
-- `--devtools-url=<ws-url>`
+- `--devtools-url <ws-url>` / `--devtools-url=<ws-url>`
   - Explicit DevTools websocket URL to attach to (for advanced usage).
   - 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.
 
+- `--version`, `-v`, `version`
+  - Print the `rn-inspector` CLI version and exit without starting the proxy.
+
 ### Environment variables
 
 - `METRO_PORT`
@@ -116,14 +124,59 @@ The UI includes:
   - Live console logs from Metro and DevTools.
   - Level filters (log/info/warn/error).
   - Detail drawer with copy-to-clipboard and timestamps.
+  - Glassy search bar and Clear action in the header to filter and reset the current view.
 
 - **Network** page
   - HTTP requests captured via an injected fetch wrapper / DevTools Network domain.
   - Detail drawer with headers, payload, and response preview (including text, JSON, images, and some binary types).
+  - Glassy search bar and Clear action in the header to filter by URL/method/status and reset the current view.
 
 - **Header controls**
   - Global **device selector** (backed by the `deviceId` tagging in the CLI).
   - Global **capture toggles** for Console and Network streams.
+  - Global **proxy WS status chip** (shows connection status and basic stats; click to reconnect when disconnected).
+  - Global **DevTools status chip** (shows connected/closed/error and lets you request a DevTools reconnect from the UI).
+
+---
+
+## Storage & Redux inspection
+
+The **Storage** page lets you inspect:
+
+- **AsyncStorage** key/value pairs.
+- **Redux** state (if you are using Redux).
+
+To keep the CLI simple and avoid depending on your bundler setup, you need to expose these on the global object in your app:
+
+### AsyncStorage
+
+In your React Native app (for example in `App.tsx`):
+
+```ts
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Make AsyncStorage visible to rn-inspector storage helper
+(global as any).AsyncStorage = AsyncStorage;
+```
+
+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.
+
+### Redux store
+
+If you use Redux, expose your store after you create it (anywhere in your app setup):
+
+```ts
+import { createStore } from 'redux';
+
+const store = createStore(reducer);
+
+// Expose Redux store for rn-inspector
+(global as any).__RN_INSPECTOR_REDUX_STORE__ = store;
+```
+
+The Storage page's **Redux State** panel will then show `store.getState()` and update as your state changes.
+
+If you do not expose these globals, the Storage page will show a helpful message explaining what to add in your app.
 
 ---
 
@@ -149,8 +202,9 @@ If the terminal does not support raw mode (no TTY), these shortcuts are safely d
 
 - 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.
 - For **DevTools websockets** (one per device):
-  - The CLI retries reconnecting a few times with a delay.
-  - After several failures, it stops reconnecting and emits a `meta` event so the UI can reflect that the device is offline.
+  - The CLI emits `devtools` **status meta events** (`open`, `closed`, `error`) but does **not** auto-retry reconnecting.
+  - 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.
+  - 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)”.
 
 ---
 

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AA45BA,wBAAsB,IAAI,kBAsBzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAw0DA,wBAAsB,IAAI,kBA4BzB"}