GraphQeLves

Stop digging through generic network tabs to find your GraphQL requests. GraphQeLves adds a purpose-built panel to Chrome DevTools that captures, filters, and inspects GraphQL traffic in real-time.

Built by developers, for developers who work with GraphQL APIs daily.

━━━━━

Why GraphQeLves?
The standard Network tab shows you everything — which means finding your GraphQL operations requires constant filtering and clicking. GraphQeLves automatically identifies GraphQL requests and presents them in a clean, organized interface designed specifically for GraphQL debugging.

Whether you're debugging a single query, tracking down a mutation that's sending the wrong variables, or exporting multiple requests to share with your team, GraphQeLves streamlines your workflow.

━━━━━

Features
▸ Real-time monitoring Automatically captures GraphQL queries, mutations, subscriptions, and persisted queries as they happen. Color-coded badges make it easy to identify operation types at a glance.

▸ Request inspection View the complete GraphQL query with syntax highlighting and vibrant color coding, plus formatted variables. Copy individual elements or the entire request with one click.

▸ Response analysis Browse formatted JSON responses with theme-aware syntax highlighting. Access the raw response body when needed. Quickly spot errors, inspect returned data, and copy results for debugging.

▸ Header inspection View request and response headers side-by-side. Sensitive headers (authorization, cookies, API keys) are automatically redacted in exports for safe sharing.

▸ Network metrics
See HTTP status codes, response sizes (formatted as bytes, KB, or MB), and request duration in milliseconds — all visible in the request list.

▸ Smart filtering Filter by operation type (Query, Mutation, Subscription, Persisted) or search by operation name and URL. Find what you need instantly, even with hundreds of requests.

▸ Multi-select export Select multiple requests using Shift+Click (range) or Cmd/Ctrl+Click (individual), then export as a JSON bundle complete with generated cURL commands.

▸ cURL command generation Generate ready-to-use cURL commands for any request. Perfect for reproducing issues, testing in terminals, or sharing with teammates.

▸ Batched request support Handles GraphQL batching automatically — when multiple operations are sent in a single HTTP request, each operation appears as a separate entry for easy inspection.

▸ Persisted query detection Identifies Apollo-style persisted queries and displays them with a distinct badge, making it easy to track hash-based query execution.

▸ Light & dark themes Dark mode optimized for DevTools, with a light theme option. Toggle between them to match your preference — saved automatically.

▸ Virtual scrolling
Handles thousands of requests smoothly. The list stays responsive no matter how many operations you've captured.

━━━━━

How to use:
1. Open Chrome DevTools (F12 or Cmd+Option+I)
2. Find the "GraphQeLves" panel tab
3. Browse any page that makes GraphQL requests
4. Click any request to inspect details
5. Use filters and search to find specific operations
6. Export single or multiple requests as needed

━━━━━

Perfect for:
• Frontend developers debugging GraphQL client code
• Backend developers testing GraphQL API responses
• QA engineers documenting API behavior
• Teams sharing reproducible API requests
• Anyone working with Apollo, Relay, urql, or any GraphQL client

━━━━━

Privacy first
GraphQeLves is designed with privacy as a core principle:
• All data stays in your browser — nothing is transmitted externally
• No analytics, tracking, or third-party services
• Network data is only captured while DevTools is open
• Sensitive headers are automatically redacted in exports
• Minimal permissions: only storage (for preferences) and clipboard (for copy features)
• 100% open source — inspect the code yourself on GitHub

━━━━━

Keyboard shortcuts
• Click — Select single request
• Shift+Click — Select range of requests
• Cmd/Ctrl+Click — Toggle individual selection
• Keyboard-friendly navigation throughout

━━━━━

Technical details
• Manifest V3 compliant
• Built with React, TypeScript, and Tailwind CSS
• Lightweight and performant
• Works with any GraphQL endpoint
• Supports standard JSON requests and multipart uploads

━━━━━

Open source
GraphQeLves is MIT licensed and open source. Contributions, bug reports, and feature requests are welcome on GitHub.

━━━━━

Support
Found a bug or have a feature request? Open an issue on GitHub: https://github.com/da-troll/GraphQeLves

━━━━━

Perfect for debugging GraphQL APIs, monitoring application behavior, and sharing request details with your team. Install GraphQeLves today.