07 · Requestly#

?> TL;DR ?> Requestly is a free, open-source browser extension + desktop app that lets you intercept any request your browser makes, modify it on the fly, redirect it, or mock the response entirely — without touching backend code or deploying anything. Acquired by BrowserStack in 2025. Installed by 300,000+ developers.

Why Interception?#

You’re a frontend developer. The backend API isn’t ready yet. Or it’s returning real production data and you want to test the “error” case. Or you need to point the app at a staging server while the URL is hard-coded to prod.

Classical solutions all suck:

1. Change the backend — requires coordination, deploys, permissions.
2. Change the frontend code — you forget and ship the hack.
3. Set up Charles/Fiddler proxy — certificate dance, corporate VPN issues.

Requestly sits inside your browser (no proxy, no certificates) and lets you intercept, modify, and mock with one-click rules.

Install#

1. Chrome / Edge / Firefox extension — Chrome Web Store (or requestly.com).
2. Desktop app (optional) — intercepts mobile apps, desktop apps, and iOS/Android simulators. Get it from requestly.com/desktop.

Pin the extension to your toolbar after install.

The Rule Types#

Each feature in Requestly is a rule you create. The extension evaluates them on every network request.

Rules can target:

• Exact URL, URL contains, URL matches regex
• Source filter (which website made the request)
• HTTP method
• Resource type (XHR, script, image, stylesheet)

Recipe 1 — Mock an API Response#

Your backend /api/users isn’t ready. Mock it in 30 seconds:

1. Open Requestly → New Rule → Modify API Response.
2. URL contains: /api/users
3. Status code: 200
4. Response body:

   [
     {"id": 1, "name": "Alice", "role": "admin"},
     {"id": 2, "name": "Bob",   "role": "viewer"}
   ]

5. Save → Enable.

Now when your page calls /api/users, Requestly returns this mock — the real server is never hit.

Dynamic mocks with JavaScript#

Need the mock to respond differently based on the request? Switch to Programmatic mode:

// `response` is the original response (or null if mocked).
// `request` contains URL, method, body, headers.
if (request.url.includes("userId=1")) {
  return {
    id: 1,
    name: "Alice",
    premium: true
  };
}
return { id: 0, name: "Unknown", premium: false };

Recipe 2 — Redirect production to localhost#

You’re debugging a bug that only happens in prod — but your local dev server has your fix.

1. New Rule → Redirect Request.
2. If URL contains: prod.example.com/api/
3. Redirect to: localhost:8000/api/
4. Enable → reload the prod site in your browser.

Now every API call from prod goes to your laptop. Nobody else sees this.

Map Local — serve a local file as the response#

1. Redirect Request → source pattern that matches a JS bundle URL.
2. Redirect to: file:///Users/you/dev/myapp/dist/app.js

This is brilliant for testing a fix live on production before you deploy.

Recipe 3 — Inject a debug script#

Want to see what events a page fires?

1. New Rule → Insert Script.
2. Page URL contains: example.com
3. Script (inject at start):

   // Log every fetch call
   const origFetch = window.fetch;
   window.fetch = function(...args) {
     console.log("[fetch]", args[0], args[1]);
     return origFetch(...args);
   };

Now every page load on example.com logs its fetch calls. No source changes, no build.

Recipe 4 — Simulate errors and slow networks#

Test your error handling without waiting for something to actually break:

Recipe 5 — Modify Request Headers#

Add an Authorization header only on your frontend:

1. New Rule → Modify Headers.
2. Target: Request.
3. Action: Add.
4. Header: Authorization
5. Value: Bearer debug-token
6. URL contains: localhost:8000

Useful when testing APIs that require auth, without hardcoding the token.

Sessions — Record Bug Reports#

Sessions record a full browser session — network requests, console logs, DOM changes, screen recording — in a single shareable file. When a QA engineer finds a bug, they click record → reproduce → share. The developer gets everything they need to debug.

• Automatic mode records every tab in the background (retains last N minutes).
• Manual mode: click Record → Reproduce → Stop → Share URL.

Local Workspaces — Git-Friendly Collaboration#

Unlike Postman, Requestly’s API Client and rules can store everything as plain JSON in a local folder. Point to ~/dev/myapp/requestly/ and every teammate sharing that folder via Git, iCloud, or Google Drive gets the same collections, environments, and rules.

Requestly as an API Client (Postman Alternative)#

The Requestly desktop app also includes a full API client:

• Build requests with collections, environments, variables
• Pre-request + post-response scripts
• Team workspaces
• No mandatory login, no cloud lock-in
• Import Postman/Bruno/Insomnia collections

When NOT to Use Requestly#

• End-to-end browser automation — use Playwright (Week 6). Requestly is for interactive dev, not CI.
• Server-to-server debugging — requests from your Python script won’t go through the extension. Use mitmproxy or log at the request level.
• HTTPS issues at the network layer — Requestly works inside the browser; for full-stack transparent proxy, use the desktop app or a real proxy.

5-Minute Exercise#

1. Install the Chrome extension.
2. Open jsonplaceholder.typicode.com/users/1. Note the real response.
3. Create a Modify Response rule:
   • URL contains: jsonplaceholder.typicode.com/users/1
   • Response body: {"id": 1, "name": "MOCKED!"}
4. Reload the page → you should see the mocked response.
5. Disable the rule → real response returns.

Bonus: make the rule dynamic — return MOCKED! only if the query string has mock=true.

Further Reading#

• Requestly docs
• Requestly on GitHub (open source)
• Sessions feature deep-dive
• Local-first workspaces