pocket-mocker

PocketMocker is a visual in-browser HTTP mocking tool designed for modern frontend development. It is a lightweight, zero-intrusion debugging tool that embeds directly into your page to intercept and modify HTTP requests in real-time during development.

Purpose: To provide a visual interface for intercepting fetch and XMLHttpRequest calls, allowing developers to dynamically modify response data, simulate network latency, and test error status codes without needing a backend API.

Target Audience: Frontend developers working on web applications who need to mock API responses for development, testing error handling, or simulating network conditions.

Key Features:

• Dual-Core Interception Engine: Natively supports both fetch and XMLHttpRequest (Ajax), making it compatible with libraries like Axios.
• Visual Debugging Panel: Features a built-in UI with a CodeMirror 6 editor (with JS syntax highlighting) for managing mock rules.
• Dynamic Responses: Supports writing JavaScript functions to generate responses based on request parameters, bodies, or other logic.
• Smart Mock Data Generation: Includes a generator with template syntax (e.g., @guid, @name, @email) to create realistic test data easily.
• Config Import: Can import mock rules directly from Postman Collections and OpenAPI 3.0 specifications, with intelligent data generation based on field names and types.
• Comprehensive Network Panel: Logs all network requests (mocked and real) with search/filter, detailed views, and a "Mock It" feature to convert real requests into mock rules with one click.
• Network Simulation: Allows simulation of API latency and error status codes (e.g., 404, 500).
• Dual-Mode Persistence:
  • Local Mode: Rules are stored in the browser's LocalStorage and persist across page refreshes.
  • Server Mode (via Vite Plugin): Rules are saved to local files, enabling team collaboration.
• Shadow DOM Isolation: The UI is encapsulated to prevent style conflicts with the host application.
• Smart UI: Auto-adaptive light/dark theme and responsive layout.

Use Cases:

• API development before backend completion.
• Testing error boundaries and network failure scenarios.
• Performance testing of loading states with artificial delays.