Files
gemini-cli/packages/devtools/GEMINI.md

86 lines
2.8 KiB
Markdown

# 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 |
## 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
```