How to Use Chrome DevTools as a Request Interceptor

Debugging or testing a live site often requires modifying API responses, headers, or scripts, but you may not have access to the backend. Developers need a way to intercept and change network requests directly in the browser.

This is where a request interceptor helps. It lets you inspect, block, modify, or redirect HTTP traffic without requiring access to the backend.

This article explains how to use Chrome DevTools as a request interceptor and when to use Requestly for more complete control over requests.

What Is a Request Interceptor?

A request interceptor is a tool or technique that captures HTTP requests and responses between the browser and server. It allows you to view or modify these messages before they reach the server or after the server responds, but before the browser processes the data.

Request Interceptor lets you:

• Modify API responses for testing or debugging without backend changes
• Block requests to simulate failures or latency
• Change headers for authentication or caching tests
• Redirect requests to different URLs for fallback testing

Practical Use Cases for Chrome DevTools Request Interception

Below are common scenarios where Chrome request interceptor is particularly useful:

• Simulating API Failures: Modify JSON responses to return error codes or messages and verify how the application handles such failures.

• Modifying CORS and Cache Headers: Edit response headers to test cross-origin policies or cache expiration behavior.

• Replacing Resources: Swap out images, JavaScript, or CSS files with local copies to test new designs or scripts before production release.
• Testing UI Changes: Change backend data values on the fly to observe UI adjustments without backend redeployment.

• Redirecting Requests: Point requests to alternative endpoints such as local development servers or staging environments for testing purposes.

How Chrome DevTools Request Interception Works

Chrome DevTools uses a feature called Local Overrides that enables interception by saving server responses locally and serving the modified versions on subsequent page loads. The process involves:

• Enabling Local Overrides and selecting a folder on the local machine to store override files
• Capturing and saving network responses during page load
• Editing saved response files directly within DevTools
• Reloading the page to serve the modified responses instead of originals

Step-by-Step Process to Intercept Responses with Chrome DevTools

Local Overrides method saves response files locally and serves your edited versions when you reload the page. Follow these steps to set it up and use it effectively:

1. Enable Local Overrides

First, you need to allow Chrome to save local override files by selecting a folder on your computer for storage. This setup lets Chrome redirect requests to these saved files.

• Open Chrome DevTools by pressing Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
• Go to the Sources tab.
• Find the Overrides pane in the left sidebar.
• Click Select folder for overrides and pick a local folder to save files.
• When prompted, grant Chrome permission to access that folder.

2. Capture Network Responses for Override

Next, capture the server responses you want to modify by saving them locally. This allows you to edit their content for testing.

• Switch to the Network tab and reload the webpage.
• Identify the request to intercept, such as an API call or resource file.
• Right-click the request and select Save for overrides. This saves a copy locally.

3. Edit the Saved Response

After saving, you can open the response file and make your changes. These edits will apply the next time the page loads.

• Go back to the Sources tab and locate the saved file under Overrides.
• Open the file and edit its content as needed (e.g., change JSON data or HTML).
• Save the changes with Ctrl+S (Windows/Linux) or Cmd+S (Mac).

4. Reload the Page to Apply Changes

Finally, reload the webpage to see the modified response take effect. The browser will serve your edited version instead of the original from the server.

• Refresh the page in Chrome.
• Verify your changes by checking the page content or Network tab.

Modifying HTTP Response Headers in Chrome DevTools

Once you understand how to override response bodies, the next common need is to test how different HTTP headers affect your web app. Response headers control caching, security, and cross-origin behavior, so editing them helps verify frontend reactions without backend changes.

In Chrome DevTools, you cannot directly edit response headers on live requests. Instead, you modify the saved override files where headers are included. This allows testing header effects like:

• Changing Cache-Control to simulate caching policies
• Adjusting Access-Control-Allow-Origin for CORS testing
• Modifying authentication-related headers

Injecting Custom JavaScript Using Chrome DevTools

Beyond response content and headers, you may want to test UI behavior changes or debug issues by running custom JavaScript code inside the page. Chrome DevTools offers a feature called Snippets that lets you write and execute JavaScript directly on the loaded page.

This helps you:

• Modify DOM elements dynamically
• Test UI changes without reloading or redeploying code
• Run small scripts to debug or automate page tasks

Since injected scripts run after the page loads, they cannot change network requests or responses directly but can manipulate page behavior based on received data.

Replacing or Redirecting Network Requests with Chrome DevTools

Replacing and redirecting requests give you flexibility to test different backend responses or frontend resources without changing live servers or deployment pipelines.

For instance, you might want to test how your app behaves when certain resources like scripts, styles, or images are modified. You can replace these files with local versions using Chrome DevTools’ Local Overrides. When you reload the page, the browser loads your edited files instead of the originals from the server.

Alternatively, you may want to redirect requests to different servers like staging or local development. Chrome DevTools does not have a built-in full redirect feature, but you can manually modify request URLs as follows:

• Open the Network tab in DevTools
• Find the request you want to redirect
• Right-click and select Edit and Resend
• Change the request URL to the target server or endpoint
• Click Send to resend the modified request

This method works for one-off tests but is manual and does not persist across page reloads.

Limitations of Chrome DevTools as a Request Interceptor

Chrome DevTools can intercept and modify network responses but has some important limitations that affect how you can test and debug your app effectively.

• Cannot modify request headers or bodies: You cannot change the data or headers being sent from your browser to the server before the request goes out. This limits your ability to test scenarios involving altered authentication tokens or form submissions.
• Only response overrides are supported: Chrome’s Local Overrides feature lets you change server responses but does not allow you to intercept or edit outgoing requests themselves.
• Cross-origin restrictions apply: Requests made to different domains may be blocked from interception due to HTTPS security and CORS policies. This reduces control over API requests hosted on other servers.
• Overrides are local and manual: Changes you make with Local Overrides exist only on your computer and require manual setup and file editing. This means you cannot easily share or automate these overrides across your team or in continuous testing.
• Not suited for complex or repeated changes: Because you must save and edit files manually, DevTools becomes inefficient when you need to apply many conditional or recurring modifications across requests and responses.

Requestly: A Robust Alternative for Request Interception

Requestly is a Chrome extension that fills the gaps of DevTools by providing an easy way to create rules that automatically intercept and modify HTTP requests and responses. It is designed to handle more complex testing scenarios without needing to change backend code.

• Modify HTTP Headers and Body: Whether you need to test with a different auth token or tweak form data before it’s sent, Requestly lets you update request content right before it reaches the server.
• Modify Responses: You can override the response your app receives with custom data, different status codes, or error messages to test how the frontend handles various server conditions.
• Redirect Requests to New URLs: Instead of editing your app or changing server configs, you can reroute traffic to another environment like staging or local, just by setting up a simple rule.
• Block or delay network requests: If you want to see how your app behaves when an API call fails or takes too long, Requestly can block specific calls or add delays to mimic those scenarios.
• Inject scripts or styles into any page: Run custom JavaScript or CSS as the page loads to test UI changes, experiment with layout tweaks, or debug elements without modifying the actual codebase.

Talk to an Expert

Conclusion

Chrome DevTools lets you override responses and test frontend behavior when backend access is limited. You can simulate data changes, modify headers, or inject scripts directly in the browser. But its limitations like no request editing or cross-origin support make it less useful for complex or repeated testing.

Requestly solves these gaps by giving you full control over both requests and responses through simple rules. You can reroute traffic, inject code, block requests, and share setups across teams. It makes testing faster and more flexible without relying on backend changes.

Try Requestly for Free