HTTP Lens

A Chrome DevTools extension for debugging HTTP and GraphQL network requests.

Features

• Capture all network requests — HTTP and GraphQL, with auto-detection of GraphQL operations
• Request detail views — headers, request body, response body, raw response — all as formatted, collapsible JSON
• Copy as JSON — copy any section with one click
• Copy as cURL — export any request as a ready-to-paste cURL command
• Replay requests — re-send the exact same request and view the new response
• GraphQL support — operation name extraction, query formatting, variables display, introspection schema viewer
• Search & filter — by URL, operation name, domain (include/exclude), method, status code, type (All/GraphQL/REST)
• Request diffing — select two requests and compare headers and bodies side-by-side
• Export/Import — export captured requests as JSON or HAR, import them back
• Resizable sidebar — drag to resize the request list panel
• Domain display — see which domain each request was made to

Install

From Chrome Web Store

Coming soon

From Source

Prerequisites: Node.js (v18+) and pnpm

git clone https://github.com/khanakia/http-lens.git
cd http-lens
pnpm install
pnpm build

1. Open chrome://extensions
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked → select the dist folder
4. Open DevTools (F12) on any page → click the HTTP Lens tab

Development

pnpm install
pnpm dev

This runs Vite in watch mode with auto-reload. Save any file and the extension + panel reload automatically. Captured requests are preserved across reloads via chrome.storage.session.

See docs/DEV-RELOAD.md for how the auto-reload system works.

Build for Chrome Web Store

pnpm build
cd dist && zip -r ../http-lens.zip .

Upload http-lens.zip to the Chrome Web Store Developer Dashboard.

Tech Stack

• React 19
• TypeScript 5
• Tailwind CSS 4
• Zustand 5
• Vite 6
• Chrome Manifest V3

Project Structure

http-lens/
├── public/              # Static assets (manifest, devtools entry, icons)
├── src/
│   ├── background/      # Service worker (replay + dev reload)
│   ├── panel/           # React app (DevTools panel UI)
│   │   ├── components/  # UI components
│   │   ├── hooks/       # React hooks (network capture, filter, diff)
│   │   ├── stores/      # Zustand store
│   │   ├── types/       # TypeScript interfaces
│   │   └── utils/       # Utilities (GraphQL, replay, cURL, diff, export/import)
│   └── styles/          # Tailwind entry
├── docs/                # Technical documentation
└── vite.config.ts       # Build config with auto-reload plugin

Documentation

• Architecture & Technical Docs — full project structure, data model, component tree, build config, Chrome extension gotchas
• Dev Auto-Reload System — how the WebSocket-based dev reload works
• Chrome Web Store Listing — store description, privacy info, publishing steps

Privacy

HTTP Lens does not collect, transmit, or store any data externally. All captured network data stays entirely within your browser. See privacy.html for the full privacy policy.

License

MIT