Network Capture

The Network tab in Mock Studio captures live HTTP traffic from the current page, similar to Chrome's built-in Network panel — but with superpowers for mocking.

Capturing Requests

When the Network tab is active, Mock Studio automatically records all HTTP requests made by the page:

• Status code with color-coded badges (green for 2xx, red for 4xx/5xx)
• HTTP method (GET, POST, PUT, etc.)
• Full URL with tooltip for long URLs
• Response time in milliseconds
• Mock status indicator showing if a matching mock already exists

Controls

• Play/Pause — Toggle request recording on/off
• Clear — Remove all captured requests
• Reset — Clear and restart capture

Creating Mocks from Traffic

The most powerful feature: convert any captured request into a mock with one click.

1. Hover over a captured request
2. Click the "+ Mock" button that appears
3. Mock Studio opens the Mock Editor pre-filled with:

- The request's method and URL

- The actual response body (auto-formatted if JSON)

- The actual response headers

- The actual status code

1. Review and Save — your mock is ready

Note: You must have an active project selected. If no project is active, the "Mock" button will be disabled.

Mock Status Indicator

For each captured request, Mock Studio checks if a matching mock already exists in the current project:

• A badge appears next to requests that have matching mocks
• This helps you quickly see which endpoints are already mocked

Batch Scenario Creation (Pro)

Select multiple captured requests and create a complete scenario:

1. Select requests using the checkboxes
2. Click "Create Scenario"
3. Optionally, use AI to generate a meaningful scenario name and description
4. Mock Studio creates:

- Individual mocks for each selected request

- A scenario linking all the mocks together

This is perfect for recording a user flow (login → fetch data → submit form) and replaying it as a complete mock scenario.

See Scenarios for more details on working with scenarios.