Docs/Getting Started

Getting Started with Mock Studio

Mock Studio is a Chrome DevTools extension that lets you intercept, mock, and inspect network requests directly in your browser. Whether you're building a frontend against an API that doesn't exist yet, testing edge cases, or debugging production issues — Mock Studio has you covered.

Quick Start

Get up and running in under 2 minutes:

  1. Install Mock Studio from the Chrome Web Store
  2. Open DevTools (F12 or Right-click → Inspect)
  3. Navigate to the Mock Studio tab
  4. Create a Project to organize your mocks
  5. Add your first mock — define a URL pattern and response

That's it! Your mock is now active and will intercept matching requests.

Creating your first project and mock

Core Concepts

Projects

Projects are the top-level container for organizing your mocks. Each project contains its own set of mocks, folders, scenarios, and environments. Think of a project as one API or service you're working with.

Mocks

A mock defines a rule: when a request matches a specific method and URL pattern, Mock Studio intercepts it and returns your custom response body, status code, and headers.

Folders

Organize mocks within a project using folders. Group related endpoints together — for example, all /users/* endpoints in a "Users" folder.

Scenarios

Scenarios let you group mocks together and override their default responses. Perfect for testing specific flows like "Checkout Success" or "Payment Failed" without editing individual mocks.

Environments

Manage environment variables (like base URLs or tokens) that can be swapped between Development, Staging, and Production.

What's Next?

Next
Installation & Setup