The FlowMock extension is the fastest way in. You don't change your app's API base URL and you don't deploy anything: the extension sends your browser's API calls through FlowMock, and a FlowMock tab in DevTools lets you mock any of them in one click.

Everyone else keeps using the app exactly as before. Only requests from your browser, on sites you turned FlowMock on for, go through the proxy.

What you'll need

Chrome or Firefox on a desktop computer
A FlowMock account. It's free forever for one person; you pay only when teammates join
The app you test, open in a tab - staging, a preview deploy, or localhost

Signing up creates a project for you. The extension asks for your staging API's address the first time you turn it on, so you don't need to visit the dashboard first.

Step 1: Install and connect

Install FlowMock from the Chrome Web Store or Firefox Add-ons (the dashboard links to the right one for your browser), then click the FlowMock button in the toolbar.

Connect opens a FlowMock tab: sign in, approve the extension, and you're back. The extension gets its own revocable credential - never your password, your dashboard cookie, or an organization API key. Every connected browser is listed under your account settings → Connected browser extensions, where you can revoke it.

Step 2: Open DevTools on your app

Open the app you test, open DevTools (F12, or Cmd+Option+I on a Mac), and pick the FlowMock tab next to Network. If you don't see it, look under the » overflow menu.

The tab lists the page's API requests as they finish, even before FlowMock is on for the site.

Step 3: Turn FlowMock on for the site

FlowMock reads where the site's requests go. When they go to the API of one of your environments, it picks that environment for the site - and turns it on by itself once the browser has granted access. Otherwise the bar at the top says FlowMock is off for this site, names the environment it matched, and turns it on with Turn on. Use the dropdown to choose a different environment.

If the environment has no API address yet, as with the project FlowMock creates when you sign up, the bar asks for it first. FlowMock suggests the API it saw the site calling: click Use api.example.com, or Other address to type it. That saves the address and turns FlowMock on for the site. Only team admins can set it, and once it's set you change it in the dashboard.

The browser asks for access to the site and its API the first time. Reload the page and its API requests now go through FlowMock.

Step 4: Mock a request

Click any request to see its response, request, and headers. Then click Mock:

FlowMock opens the editor with the real response already filled in - status, body, and content type
Change what you need: the status, the JSON body, a delay, or response headers. Pass through keeps the real response and only adds the delay
Click Mock it for my session

The mock is a draft that is already on for your session, and nobody else's. Reload the page (or repeat the action in the app) to see it. The details pane shows Mock is on for your session with a switch to turn it off, and Open in dashboard to refine it there - matchers, other response types, AI edit, or publishing it to the team's library.

A request that one of your drafts already answered offers Edit mock instead.

See what is on

Once the site is on, the panel has two views:

Requests - the network log. The FlowMock column says what happened to each response: Mocked, Transformed, Delayed, or Proxied. Filter by method, path, or status, show Only FlowMock, and keep the list across navigations with Preserve log
Active - everything on for your session on this site: the running scenario with the mocks it contains, then each mock and transform with how many times it answered this tab in the last 10 minutes. Turn any of them off from its row, clear everything with Turn all off, or use Turn on a mock or scenario to switch on anything from the project's library

The header shows the site, its environment (with the dropdown to switch or stop), the session you're mocking as, an On for this site switch, and Open dashboard.

Never forget a mock is on

A mock left on is the classic "why is staging broken for me?" moment. FlowMock makes it hard to miss:

The toolbar badge counts the responses FlowMock changed on that tab in the last 10 minutes, and its tooltip says how many were mocked, transformed, or delayed
The page shows a reminder for 10 minutes after a mocked response. Pick the style from In page on the Active view: a Glow around the edges (the default), a Side line, a corner Ribbon, a small Pill, or Off for the toolbar badge only
The Active tab label counts what is on and pulses while something was changed recently

On the page itself

Sites you turned on also get a small FlowMock button on the page. It opens a panel with Setup, Mocks, Traffic, and Settings, so you can switch mocks and scenarios without opening DevTools. Drag it anywhere; it remembers where you put it.

Manage sites

Click the toolbar button on a page that isn't on yet, or open Connect, to see the Sites list: every site with its environment and its on/off switch. Add a site binds a new address to an environment. Each site's Advanced section holds the rarely needed settings:

Follow site identity - stop sending the extension's own session and let FlowMock read the session from the site's own token, like any other request (see QA sessions)
Forward site cookies - on by default, so apps that sign in with cookies stay signed in through FlowMock. The cookies go only to FlowMock's proxy, which forwards them to the same API the browser would have sent them to
API origins - the API hosts FlowMock routes for this site. Add one by hand, or accept one FlowMock noticed the site calling
Request scope - which request types FlowMock handles (fetch and XHR always), plus path prefixes to leave alone, such as Next.js server actions

Privacy

The extension only touches sites on your Sites list. Their API requests go through FlowMock, which records them in your project's Traffic like any proxied request, with the redaction rules your project sets
API hosts FlowMock notices a site calling stay on your computer as suggestions. They are never sent to FlowMock unless you add one
Your FlowMock credential stays in the extension's background. Pages you test never see it
Sign out of this browser on the Connect page revokes the install and removes its rules. You can also revoke any install from Connected browser extensions in your account settings

When something doesn't work

The FlowMock tab says "Connect this browser" - use Open FlowMock Connect and sign in
Requests show, but nothing says Mocked - check that the site is on (the switch in the header), then reload the page so its requests go through FlowMock
"Allow access" appears - the browser hasn't granted access to the site or its API yet. Click it and accept the prompt
No environment matches - your environment's API base URL must be the API the site calls. Pick the environment from the dropdown, or fix its API URL in the dashboard
"FlowMock stopped passing requests" - until your API's domain is verified, FlowMock passes a limited number of requests through to it, per minute and in total. Mocks keep working. Verify domain opens your team's Domains settings, where you add a DNS record or a file to prove you own the API

More fixes in Connect troubleshooting.

Getting started - the extension and the base URL setup, side by side
Mocks and overrides - drafts, matchers, and the mock library
Scenarios - switch whole states from the Active tab
Awareness headers - the response headers the extension reads