How To Create Rules To Modify HTTP Requests in Chrome & Safari

Modern web development often demands direct control over how the browser sends or receives HTTP requests. Developers must modify HTTP requests to debug APIs, test edge cases, or bypass CORS (Cross-Origin Resource Sharing) and header restrictions. However, doing this without touching the production code or backend services can be challenging.

To achieve this, developers can use built‑in browser tools or external extensions like Requestly that offer more powerful and flexible request‑modification capabilities.

In this article, you’ll learn how to modify HTTP requests in Chrome and Safari in detail.

Why Modify HTTP Requests?

HTTP requests form the backbone of any web application. They control how data flows between the front end and the back end, dictate behavior based on user roles or sessions, and handle everything from authentication headers to data payloads.

Here are some real-world scenarios where developers need to intercept or modify HTTP requests:

• Simulate API Responses: Mock different success or failure payloads to test frontend behavior without changing the backend.

• Test Authentication Logic: Inject or remove headers like Authorization to simulate logged-in or anonymous users.
• Force Edge Cases: Manipulate request bodies or query parameters to send invalid, missing, or boundary data for testing validation logic.
• Bypass CORS Restrictions: Temporarily modify headers to test cross-origin requests during local development.
• Debug Headers and Tokens: Check or override headers like Content-Type, User-Agent, or custom tokens to isolate request-level issues.
• Handle Feature Flags and Experiments: Add or change query parameters to test different A/B test groups or feature toggles.
• Replicate Slow Networks: Delay or throttle requests to test loaders, spinners, and timeout handling.
• Patch Frontend Bugs Temporarily: Inject client-side fixes or diagnostics while the real patch is still in progress.

How to Modify HTTP Requests in Chrome

Chrome DevTools offers limited but useful features for modifying responses or headers during debugging. Here’s a complete step-by-step guide:

Step 1: Open Chrome DevTools

Right-click on any webpage and select Inspect, or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).

Step 2: Go to the Network Tab

Select the Network tab in the DevTools panel. Reload the page to capture all HTTP requests.

Step 3: Enable Local Overrides

Click the gear icon in the DevTools panel, go to the Experiments section, and click on Enable Local Overrides. Then, right-click in the Network tab and choose Enable Local Overrides. Chrome will prompt you to select a folder on your local file system.

Step 4: Save Request for Override

Find the request you want to edit. Right-click on it and select Save for overrides. Chrome stores a local copy of the response that can now be edited.

Step 5: Modify Response Headers or Body

Navigate to the Overrides tab on the left sidebar. Open the saved file and edit the response headers or JSON/XML body as needed.

Step 6: Reload the Page

Refresh the page and observe the updated response from the Overrides tab.

Limitations in Chrome DevTools

Chrome DevTools are useful for temporary debugging, but they have technical constraints that limit broader usage.

• No Outgoing Request Body Editing: You cannot change the request payload of POST, PUT, or PATCH methods directly. There’s no UI to alter or resend modified bodies.
• No Query Parameter Control: DevTools doesn’t allow you to add, remove, or modify query parameters in outgoing requests. Any testing with different query strings has to be done manually in the address bar or code.
• No Request Header Injection: While response headers can be overridden, request headers like Authorization or User-Agent cannot be added or modified unless you patch the code using fetch/XHR overrides.
• Non-Persistent Rules: Local overrides are saved on your file system and tied to a specific directory. They don’t sync across tabs, sessions, or projects without manual reconfiguration.
• No Pattern-Based Matching: Overrides work only when the URL matches exactly. You cannot use wildcards, URL patterns, or regex to apply the same override across different endpoints or domains.

How to Modify HTTP Requests in Safari

Safari also provides support for local overrides using the Web Inspector. While it offers similar functionality to Chrome DevTools, it comes with its own interface and steps.

Step 1: Enable Developer Menu

Go to Safari > Preferences > Advanced and enable Show Develop menu in menu bar.

Step 2: Open Web Inspector

Click Develop > Show Web Inspector from the menu bar or use the shortcut Cmd+Option+I.

Step 3: Navigate to the Network Tab

Reload the page if needed to capture active HTTP requests.

Step 4: Locate Target Request

Scroll through the requests and select the one you want to override.

Step 5: Create Local Override

Right-click the request and select Create Request Local Override. Safari will generate a local, editable copy.

Step 6: Edit Headers or Payload

Go to the Local Overrides tab. Right-click the override and select Edit Local Override. You can now add or remove headers or modify the response body.

Step 7: Include Request Body (if applicable)

If the request is a POST, PUT, or PATCH, check the option Include original request data to ensure payloads are retained during override.

Step 8: Reload and Verify

Refresh the page to validate that the override is applied correctly.

Limitations in Safari Web Inspector

While Safari’s override system works for basic testing, there are several restrictions that impact advanced workflows.

• Request Header Editing Not Supported: Safari does not allow modification of request headers. You cannot inject or alter headers like Authorization, Origin, or User-Agent.
• No Dynamic Query Control: There is no option to change or inject query parameters in outgoing requests. Modifications must be done manually in the browser or source code.
• No Full Request Body Control: While you can include the original request body for methods like POST, you cannot directly modify the payload. Safari doesn’t offer a built-in body editor.
• Overrides Bound to File System: All overrides are stored locally and require explicit file system access. Overrides are not synced across tabs or projects unless reconfigured.
• No Pattern Matching: Overrides only work for the exact URL that was saved. You cannot define flexible rules with wildcards or regular expressions to match multiple paths.

How Requestly Helps Modify HTTP Requests in Chrome and Safari

Requestly is a cross-platform tool that allows developers to intercept, inspect, and modify HTTP requests and responses directly in the browser.

It works as both a browser extension and a desktop app, supporting Chrome, Safari, Edge, and Firefox. This makes it ideal for teams working across different environments or needing consistent testing setups.

Unlike DevTools or Web Inspector, Requestly supports persistent, rule-based workflows. It allows you to:

Below is a detailed explanation of what each rule does and how it can be used.

1. Redirect URLs

The Redirect URL rule changes the destination of any outgoing HTTP request. Instead of hitting the original endpoint, the request is rerouted to a new URL. This is useful when switching between environments, working with mock APIs, or rerouting third-party dependencies.

Use Cases

• Test against staging APIs: Redirect requests from production endpoints to staging or mock servers.
• Fix broken paths: Temporarily route failing endpoints or 404s to valid alternatives.
• Bypass third-party limits: Reroute calls to local mocks if rate-limiting blocks the original service.

2. Modify or Inject Headers

The Modify HTTP Headers rule allows you to modify both request and response headers. You can add new headers, update existing ones, or remove them. This rule supports conditional logic based on URL, method, and other attributes.

Use Cases

• Simulate authentication: Inject bearer tokens or session headers to mimic logged-in behavior.
• Bypass CORS issues: Add or alter CORS-related headers to debug frontend/backend interactions.
• Remove caching headers: Strip ETag, If-None-Match, or Cache-Control to test uncached responses.

3. Modify API Response

The Modify API Response rule lets you change the response body, status code, or headers returned by the server in real time. It works with JSON, HTML, XML, or plain text and includes a live editor for injecting or replacing content.

Use Cases

• Mock API output: Alter API responses to test frontend behavior without changing backend code.
• Reproduce bug conditions: Modify payload content or structure to replicate specific failures.
• Intercept POST requests: Test how the backend reacts to malformed or altered input bodies.

4. Block HTTP Requests

The Cancel Request rule blocks requests from reaching the network. As soon as a request matches the rule, it is stopped. This helps avoid unwanted network calls or simulate network failures.

Use Cases

• Simulate API failure: Block one or more endpoints to test app resilience and error handling.
• Disable third-party code: Prevent loading of scripts like analytics or chat widgets during dev.
• Enforce minimal dependencies: Ensure that app functionality works only with critical resources.

5. Delay Request

The Delay HTTP Request rule introduces artificial delays in network requests. You specify how many milliseconds a request should be paused before being sent or completed. It’s helpful when you want to simulate poor network conditions or test loading states in your application.

Use Cases

• Test loading states: Validate if your skeleton screens, spinners, or retry logic work correctly.
• Find race conditions: Create out-of-order responses between dependent requests.
• Simulate low-bandwidth environments: Throttle specific APIs to match 2G or 3G behavior.

6. Inject Custom Scripts

The Inject Custom JavaScript rule allows you to inject custom JavaScript into any page. You can write inline code (up to 500 characters) or host a script using Requestly’s library and include the script URL. You can also control when the script executes, either before or after page load.

Use Cases

• Patch site behavior: Inject code that temporarily disables or modifies app features for testing.
• Override functions: Replace or mock built-in functions like fetch or console.log on the fly.
• Add testing hooks: Insert logging or monitoring code during live debugging.

Talk to an Expert

7. Change Query Parameters

The Modify Query Parameters rule lets you modify the query string part of a URL. You can add new parameters, remove existing ones, or completely clear the query string. The rule works with all HTTP methods and is especially helpful when query parameters affect how the server responds.

Use Cases

• Bypass cache: Add dynamic query parameters like timestamps to force fresh responses.
• Simulate user states: Inject feature flags, tokens, or test values for frontend experiments.
• Mimic production URLs: Match the exact query shape expected by real endpoints during tests.

8. Replace Parts of a URL

The Replace URL rule allows you to find and replace specific strings in the request URL. It operates on any part of the URL, including the domain, path, or query string. You can define static matches or use regex for dynamic replacements.

Use Cases

• Switch between environments: Replace api.example.com with dev.api.local automatically.
• Update path segments: Fix or remap legacy paths like /v1/users to /v2/users.
• Normalize URLs: Rewrite dynamic portions of URLs to a test-friendly structure.

9. Modify User Agents

This rule overrides the default User-Agent header and the browser’s navigator.userAgent value. It allows your app or third-party services to believe the request came from a different browser or device.

Use Cases

• Test mobile layouts: Change the user agent to see how your site looks and behaves on mobile or tablet devices without needing the actual device.
• Simulate search engine bots: Use a crawler user agent like Googlebot to check how your site responds to search engine indexing or bot traffic.
• Bypass browser restrictions: Trick websites that block certain browsers by changing your user agent to mimic a supported one.

Conclusion

Modifying HTTP requests is critical in modern frontend and API development, especially when testing, debugging, or working with external services. While Chrome DevTools and Safari’s Web Inspector offer basic override capabilities, they fall short regarding persistent rules, advanced matching, or complete request manipulation.

Requestly fills this gap with a rule-based system that works consistently across browsers. It helps developers redirect URLs, inject headers, mock responses, block or delay traffic, and much more without changing code or relying on backend changes.

Try Requestly for Free