Fabulous RPC DevTools

A Chrome DevTools extension for debugging Connect-RPC and gRPC-Web API calls.

Features

• Automatic Network Capture - Captures all Connect-RPC and gRPC-Web calls without code changes
• Request/Response Inspection - View full JSON payloads with syntax highlighting
• Performance Metrics - See request duration and response size
• DevTools Integration - Appears as a tab in Chrome DevTools
• Optional Interceptor - Add client-side interceptor for enhanced metadata
• Dark Mode - Matches Chrome DevTools aesthetic
• Zero Dependencies - Built on Manifest V3, no external libraries

Screenshots

Default Theme

Monokai Theme

Batman Theme

Pink Pilates Princess Theme

Installation

1. Open chrome://extensions/
2. Enable Developer mode (toggle in top-right)
3. Click Load unpacked and select this folder
4. Open DevTools (F12) - you should see an "RPC" tab

Usage

Automatic Capture (No Code Changes Required)

Simply make requests from your Connect-RPC client:

import { createClient } from '@connectrpc/connect';
import { ElizaService } from './gen/connectrpc/eliza/v1/eliza_pb';

const client = createClient(ElizaService, transport);
const response = await client.say({ sentence: 'Hello!' });

1. Open Chrome DevTools (F12)
2. Click the "RPC" tab
3. Make a request - it appears in the panel
4. Click any request to view details

Enhanced Capture with Optional Interceptor

For richer metadata (full field names, better error details), add the interceptor to your project:

1. Copy the interceptor file:

   cp src/interceptor/connect-interceptor.js /path/to/your-project/src/utils/

2. Import and use it:

   import { createGrpcWebTransport } from '@connectrpc/connect-web';
   import { connectRpcDevToolsInterceptor } from './utils/connect-interceptor';
   
   const transport = createGrpcWebTransport({
     baseUrl: 'https://your-api.com',
     interceptors: [connectRpcDevToolsInterceptor()]
   });

See INTERCEPTOR_USAGE.md for complete setup instructions.

UI Guide

Request List (Left Panel)

• Method Name - The RPC method being called
• Status Indicator - Color-coded: green (2xx), red (4xx/5xx), yellow (pending)
• Timestamp - When the request was made

Detail View (Right Panel)

• Request: Method, URL, timestamp, full JSON payload
• Response: Status, duration, size, full JSON response
• Headers: Request and response headers

Troubleshooting

Requests Not Appearing?

1. Verify the extension is loaded at chrome://extensions/
2. Check the Network tab to confirm requests are being made
3. Close and reopen DevTools, then make a new request
4. Try reloading the extension (click reload icon)

Performance Issues?

The extension limits capture to the last 100 requests. Click Clear to remove old requests.

Architecture

Chrome DevTools Panel
    │ chrome.devtools.network
    ▼
Service Worker (background)
    │ chrome.runtime.sendMessage
    ▼
Content Script
    │ window.postMessage
    ▼
Optional Interceptor (page context)

Browser Compatibility

Browser	Status
Chrome	Fully supported
Edge	Fully supported
Firefox	Not supported (no DevTools extension API)
Safari	Not supported

Known Limitations

• Requires Chrome 88+ (Manifest V3)
• DevTools panel only - not available as a standalone popup
• Cannot intercept service worker requests
• Response streaming is captured as a single event

Contributing

See CONTRIBUTING.md for development setup and guidelines.

Changelog

See CHANGELOG.md for version history.

License

MIT License - See LICENSE for details.