netwatch 1.0.0
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 +121 -0
- package/dist/cli.js +37138 -0
- package/package.json +53 -0
package/README.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# netwatch
|
|
2
|
+
|
|
3
|
+
Terminal-based network inspector for React Native apps. Captures HTTP requests via Reactotron and displays them in a flicker-free split-pane TUI.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Split-pane TUI** — request list (left) + detail view (right) with borders
|
|
12
|
+
- **Flicker-free rendering** — Ink incremental rendering + synchronized output (BSU/ESU)
|
|
13
|
+
- **JSON syntax highlighting** — colored keys, strings, numbers, booleans in response bodies
|
|
14
|
+
- **Status badges** — background-colored status codes with descriptions (200 OK, 404 Not Found, etc.)
|
|
15
|
+
- **Headers toggle** — press `h` to show/hide request/response headers
|
|
16
|
+
- **Fuzzy filtering** — press `/` to search by URL, method, or status
|
|
17
|
+
- **Mouse support** — click to focus panes, scroll wheel on focused pane, hover highlighting
|
|
18
|
+
- **Follow-cursor scrolling** — request list viewport follows selection
|
|
19
|
+
- **Request/response toggle** — press `r` to switch between request and response body
|
|
20
|
+
- **Pause capture** — press `p` to pause incoming requests
|
|
21
|
+
- **Terminal resize** — layout adjusts dynamically on window resize
|
|
22
|
+
- **Config file** — `.netwatchrc` for port, mode, ignored URLs, max requests
|
|
23
|
+
|
|
24
|
+
## Quick Start
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
# Clone and install
|
|
28
|
+
git clone https://github.com/kmelkon/netwatch.git
|
|
29
|
+
cd netwatch
|
|
30
|
+
npm install --registry https://registry.npmjs.org/
|
|
31
|
+
|
|
32
|
+
# Run
|
|
33
|
+
npm start
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Then configure your React Native app to connect Reactotron to port 9090.
|
|
37
|
+
|
|
38
|
+
## Keyboard Shortcuts
|
|
39
|
+
|
|
40
|
+
| Key | Action |
|
|
41
|
+
|-----|--------|
|
|
42
|
+
| `↑↓` / `j/k` | Navigate request list |
|
|
43
|
+
| `u` / `d` | Scroll detail pane |
|
|
44
|
+
| `r` | Toggle request/response body |
|
|
45
|
+
| `h` | Toggle headers display |
|
|
46
|
+
| `/` | Focus filter input |
|
|
47
|
+
| `Esc` | Exit filter |
|
|
48
|
+
| `c` | Clear all requests |
|
|
49
|
+
| `p` | Pause/resume capture |
|
|
50
|
+
| `q` | Quit |
|
|
51
|
+
|
|
52
|
+
## Mouse Support
|
|
53
|
+
|
|
54
|
+
- **Click** a pane to focus it (cyan border)
|
|
55
|
+
- **Scroll wheel** on the focused pane to scroll content
|
|
56
|
+
- **Hover** highlights pane border (yellow)
|
|
57
|
+
|
|
58
|
+
Requires a terminal with mouse support (iTerm2, kitty, WezTerm, Windows Terminal).
|
|
59
|
+
|
|
60
|
+
## Configuration
|
|
61
|
+
|
|
62
|
+
Create a `.netwatchrc` file in your project root or `~/.netwatchrc`:
|
|
63
|
+
|
|
64
|
+
```json
|
|
65
|
+
{
|
|
66
|
+
"port": 9090,
|
|
67
|
+
"mode": "reactotron",
|
|
68
|
+
"ignoredUrls": ["/symbolicate", "/logs"],
|
|
69
|
+
"maxRequests": 500
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
| Option | Default | Description |
|
|
74
|
+
|--------|---------|-------------|
|
|
75
|
+
| `port` | `9090` | WebSocket server port |
|
|
76
|
+
| `mode` | `"reactotron"` | Connection mode (`reactotron` or `standalone`) |
|
|
77
|
+
| `ignoredUrls` | `[]` | URL patterns to ignore |
|
|
78
|
+
| `maxRequests` | `500` | Max stored requests |
|
|
79
|
+
|
|
80
|
+
The `NETWATCH_PORT` environment variable overrides the config file port.
|
|
81
|
+
|
|
82
|
+
## Tech Stack
|
|
83
|
+
|
|
84
|
+
- [Ink](https://github.com/vadimdemedes/ink) — React for terminal UIs
|
|
85
|
+
- [Zustand](https://github.com/pmndrs/zustand) — state management
|
|
86
|
+
- [Fuse.js](https://fusejs.io/) — fuzzy search
|
|
87
|
+
- [ws](https://github.com/websockets/ws) — WebSocket server
|
|
88
|
+
- [chalk](https://github.com/chalk/chalk) — terminal styling
|
|
89
|
+
|
|
90
|
+
## Development
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm run dev # Watch mode
|
|
94
|
+
npm test # Run tests
|
|
95
|
+
npm run test:watch # Watch tests
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Reactotron Setup
|
|
99
|
+
|
|
100
|
+
In your React Native app:
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
import Reactotron from "reactotron-react-native";
|
|
104
|
+
|
|
105
|
+
Reactotron.configure({
|
|
106
|
+
host: "localhost",
|
|
107
|
+
port: 9090,
|
|
108
|
+
})
|
|
109
|
+
.useReactNative({ networking: true })
|
|
110
|
+
.connect();
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
> **Tip:** Reactotron doesn't auto-reconnect. Add `onDisconnect` to retry:
|
|
114
|
+
>
|
|
115
|
+
> ```typescript
|
|
116
|
+
> Reactotron.configure({
|
|
117
|
+
> host: "localhost",
|
|
118
|
+
> port: 9090,
|
|
119
|
+
> onDisconnect: () => setTimeout(() => Reactotron.connect(), 3000),
|
|
120
|
+
> })
|
|
121
|
+
> ```
|