File size: 3,078 Bytes
7421850 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | # Gemini CLI DevTools
Integrated Developer Tools for Gemini CLI, providing a Chrome DevTools-like
interface for Network and Console inspection. Launched automatically when the
`general.devtools` setting is enabled.
## Features
- **Network Inspector**: Real-time request/response logging with streaming
chunks and duration tracking
- **Console Inspector**: Real-time console log viewing
(log/warn/error/debug/info)
- **Session Management**: Multiple CLI session support with live connection
status
- **Import/Export**: Import JSONL log files, export current session logs
## How It Works
When `general.devtools` is enabled, the CLI's `devtoolsService` automatically:
1. Probes port 25417 for an existing DevTools instance
2. If found, connects as a WebSocket client
3. If not, starts a new DevTools server and connects to it
4. If another instance races for the port, the loser connects to the winner
No environment variables needed for normal use.
## Architecture
```
gemini.tsx / nonInteractiveCli.ts
│ (dynamic import)
▼
devtoolsService.ts ← orchestration + DevTools lifecycle
│ (imports)
▼
activityLogger.ts ← pure logging (capture, file, WebSocket transport)
│ (events)
▼
DevTools server (:25417) ← this package (HTTP + WebSocket + SSE)
│ (SSE /events)
▼
DevTools UI (React) ← client/ compiled by esbuild
```
## Environment Variables
| Variable | Description |
| -------------------------------- | --------------------------------------------- |
| `GEMINI_CLI_ACTIVITY_LOG_TARGET` | File path for JSONL mode (optional, fallback) |
## API Endpoints
| Endpoint | Method | Description |
| ----------------------- | --------- | --------------------------------------------------------------------------- |
| `/ws` | WebSocket | Log ingestion from CLI sessions (register, network, console) |
| `/events` | SSE | Pushes snapshot on connect, then incremental network/console/session events |
| `/api/trigger-debugger` | POST | Triggers the Node.js debugger for a specific CLI session via WebSocket |
## Development
```bash
# Build everything (client + server)
npm run build
# Rebuild client only after UI changes
npm run build:client
```
### Project Structure
```
packages/devtools/
├── src/
│ └── index.ts # DevTools server (HTTP, WebSocket, SSE)
├── client/
│ ├── index.html
│ └── src/
│ ├── main.tsx # React entry
│ ├── App.tsx # DevTools UI
│ └── hooks.ts # Data fetching hooks
├── esbuild.client.js # Client build script
└── dist/ # Build output
├── src/index.js # Compiled server
└── client/ # Bundled client assets
```
|