Mockgql

MockGQL - GraphQL Request Logger & Mocker

A powerful Chrome DevTools extension for developers working with GraphQL APIs. Intercept, inspect, and mock GraphQL requests directly from your browser.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

KEY FEATURES

• Request Logging
Automatically captures all GraphQL requests (fetch and XMLHttpRequest) and displays them in a clean, organized list.

• Detailed Inspection
View the complete details of each request including operation name, type (query/mutation/subscription), query, variables, and response.

• Mock Responses
Create custom mock rules to return fake responses for specific GraphQL operations. Perfect for testing edge cases, error states, and loading behaviors.

• Individual Rule Control
Enable or disable individual mock rules with toggles. Keep your mock configurations ready without affecting live requests.

• Response Delay
Add artificial latency to mocked responses (in milliseconds) to simulate slow network conditions and test loading states.

• Persistent Storage
Mock rules are saved to your browser and persist across sessions. Set up once, use everywhere.

• Copy Response
One-click copy of any response to clipboard for easy debugging and mock rule creation.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

USE CASES

→ Frontend Development: Test your UI against different API responses without modifying backend code
→ Error Handling: Simulate error responses to verify your error handling works correctly
→ Loading States: Add delays to test skeleton screens and loading indicators
→ Edge Cases: Mock unusual data scenarios that are hard to reproduce
→ Offline Development: Continue frontend work when the API is unavailable
→ Debugging: Inspect GraphQL queries and responses in a dedicated panel

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

HOW TO USE

1. Install the extension
2. Open Chrome DevTools (F12)
3. Navigate to the "MockGQL" tab
4. Browse any website with GraphQL requests
5. Click on requests to view details
6. Create mock rules from captured responses
7. Enable "Enable Mock" to activate mocking

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

TECHNICAL DETAILS

• Manifest V3 compliant
• Works with any GraphQL endpoint (/graphql or /gql paths)
• Supports both fetch and XMLHttpRequest
• Dark theme UI matching Chrome DevTools
• Minimal permissions required

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Open source: https://github.com/bill-min/mock-gql

Made for developers, by developers.