Moq - Mock API Requests Pavel Shpakovich توسط

Moq - Powerful API Mocking for Chrome DevTools

Moq is a developer tool that intercepts and mocks HTTP requests directly in your browser, eliminating the need to modify backend code or wait for API changes during frontend development.

WHY INSTALL MOQ?

✓ Speed Up Development - Test different API responses instantly without backend changes or server restarts
✓ Isolated Testing - Work offline or test edge cases (errors, timeouts, specific data) that are hard to reproduce
✓ No Code Changes - Mock requests at the browser level without touching your application code
✓ Real Time Control - Enable/disable mocks on-the-fly, perfect for comparing real vs mocked responses

KEY FEATURES

→ Client-Side Interception
Captures fetch() and XMLHttpRequest before they reach the network

→ Full Response Control
Set custom status codes (200, 404, 500), response bodies, headers, and delays

→ Proxy Rules
Route matching requests through a custom proxy target instead of returning a mock response
• Redirect requests to any base URL (e.g. staging, local server)
• Optional path rewrite with from/to pattern (plain string or regex)
• Attach JavaScript response hooks to transform proxied responses
• Conflict detection warns when a proxy rule overlaps with a mock rule
• Hit counters track how many times each proxy rule is triggered
• Import/Export proxy rules independently from mock rules

→ Response Hooks with JavaScript
Write code to transform responses dynamically (both mock and real)
• Toggle hooks on/off without deleting code
• Comprehensive validation catches undefined variables and syntax errors
• Available globals: response, request, helpers (uuid, timestamp, random data)

→ Two Response Modes
• Mock Mode - Return configured mock response with your custom data
• Passthrough Mode - Forward request to real server and transform response with JavaScript hook

→ Dynamic Variables
Generate unique data with {{timestamp}}, {{uuid}}, {{random_number}}, {{random_string}} in responses

→ Request Recording & Logging
Record and inspect actual network traffic, create mocks from real responses with one click

→ Smart Organization
Group rules into folders, search and filter, bulk enable/disable, hit counters show usage
• Compact and detailed view modes for both Rules and Proxy tabs

→ Rule Validation & Warnings
Automatic detection of invalid regex, JSON errors, overlapping rules, and unused rules

→ Import/Export with Preview
Share rule configurations with merge or replace modes, validate before importing

→ Multi-Monitor Support
Open in standalone window or DevTools panel, full state synchronization

→ Dark/Light Theme
System preference detection with manual override

→ CORS Auto-Fix
Automatically inject CORS headers to bypass cross-origin restrictions

→ Multi-Language
Full English and Russian translations

USE CASES & BENEFITS

FOR FRONTEND DEVELOPERS:
• Test different API responses without backend changes
• Redirect API calls to a local or staging server with Proxy Rules
• Work offline or before backend APIs are ready
• Validate error handling with custom error responses
• Test loading states with configurable delays

FOR QA ENGINEERS:
• Simulate edge cases that are hard to reproduce
• Test timeout scenarios and network failures
• Validate UI with specific data combinations
• Automate testing with exported rule configurations

FOR DEBUGGING:
• Modify production API responses locally for troubleshooting
• Proxy requests to a different environment without changing application code
• Compare real vs mocked responses side-by-side
• Track request/response patterns with hit counters
• Organize test scenarios into folders for different features

PRIVACY & SECURITY

✓ No data collection
✓ No external servers
✓ All data stored locally in your browser
✓ Open source and transparent

GETTING STARTED

1. Open Chrome DevTools (F12)
2. Click the "Moq" tab
3. Create your first mock rule with URL pattern matching
4. Enable recording to capture real requests
5. Click "Mock This" on any logged request to create a rule instantly
6. Use Proxy Rules to redirect requests to a different server without changing your code

Perfect for frontend developers, QA engineers, and anyone who needs to test API integrations without modifying backend code or waiting for server changes. All data stays local - no external servers, no data collection, complete privacy.