Proxy Interceptor Tutorial: Intercept and Modify HTTP Requests in 5 Exercises

What you will learn

A proxy interceptor lets you change HTTP traffic between an app and its server. Security tools like Burp do this by pausing each request for manual edits. For day-to-day development, rules are faster: describe what to match and what to change once, and it happens on every matching request.

We use the free public API https://jsonplaceholder.typicode.com so you can follow along without a backend of your own.

Setup (2 minutes)

1. Create a free ProxyCeptor account and open the dashboard.
2. Load the ProxyCeptor extension in Chrome and open DevTools (F12). Select the ProxyCeptor panel.
3. Open any page and run fetch("https://jsonplaceholder.typicode.com/users/1").then(r => r.json()).then(console.log) in the Console to check traffic is flowing.

Exercise 1: Inspect traffic

Open the Network tab in the ProxyCeptor panel and re-run the fetch. You will see method, URL, status, size and timing. From a row you can send the request to the Proxy tab to start a rule for that URL, or export the session as a HAR file. The Proxy tab also keeps a traffic log showing which rule acted on each request.

Exercise 2: Mock a response

Replace the whole response for user 1 with your own JSON. The request never reaches the server.

1{
2  "name": "Mock user 1",
3  "match": { "urlPattern": "https://jsonplaceholder.typicode.com/users/1", "matchType": "exact" },
4  "response": {
5    "body": {
6      "enabled": true,
7      "mode": "replace-whole",
8      "statusCode": 200,
9      "value": "{ \"id\": 1, \"name\": \"Ada Lovelace\", \"email\": \"ada@example.com\" }"
10    }
11  }
12}

Re-run the fetch: the console prints Ada. More detail in how to mock API responses with custom JSON.

Exercise 3: Change one field and keep the rest real (deep merge)

Full mocks go stale. A deep merge lets the real request through and patches only the keys you name. Nested objects merge recursively.

1{
2  "name": "User 1 lives in Paris",
3  "match": { "urlPattern": "*/users/1", "matchType": "wildcard" },
4  "response": {
5    "body": {
6      "enabled": true,
7      "mode": "merge-json",
8      "mergeValue": "{ \"address\": { \"city\": \"Paris\" } }"
9    }
10  }
11}

Disable the Exercise 2 rule first. The response now has the real name and email, and only address.city has changed. See merging and appending response data.

Exercise 4: Simulate a slow 500 error

Most UI bugs hide in failure paths. This rule waits 3 seconds and then returns a 500, so you can watch your loading state and your error state in turn.

1{
2  "name": "Posts API is down",
3  "match": { "urlPattern": "*/posts*", "matchType": "wildcard" },
4  "response": {
5    "delay": 3000,
6    "body": {
7      "enabled": true,
8      "mode": "replace-whole",
9      "statusCode": 500,
10      "value": "{ \"error\": \"Internal Server Error\" }"
11    }
12  }
13}

Try 401 (expired session), 429 (rate limit) and 504 (gateway timeout) too. See simulating HTTP error codes and the frontend API error testing checklist.

Exercise 5: Redirect an API to another environment

Point production UI at staging or localhost without rebuilding. A URL rewrite is a find-and-replace on the request URL, so /v1/orders?page=2 keeps its path and query. It is applied through Chrome's declarativeNetRequest, so it works for scripts, images and XHR alike.

1{
2  "name": "Prod API to local",
3  "match": { "urlPattern": "https://api.example.com/*", "matchType": "wildcard" },
4  "request": {
5    "urlRewrite": { "find": "https://api.example.com", "replace": "http://localhost:3000" }
6  }
7}

Need every match to go to one fixed URL instead? Use request.redirectUrl. See how to rewrite and redirect API URLs.

Next steps: share the rules

Everything above is a JSON rule. Export them to a file, or save them in a cloud workspace so QA, design and the rest of the team get the same mocks. On a TV, the SDK picks them up with a workspace API key. See sharing proxy rules across engineering teams.

Frequently asked questions

Read next