Moq - Mock API Requests bởi 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

→ 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

→ 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
• 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
• 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

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.