Browser Interception

Once you’ve installed the Requestly browser extension, you can start intercepting, inspecting, and modifying HTTP(S) traffic directly in your browser. This feature is great for testing APIs, debugging frontend issues, and simulating server responses, without touching your backend or deploying changes.

This guide assumes you’ve already installed the Requestly browser extension for your browser. If not, start there.

Steps to Intercept traffic in Browser DevTools

1. Open DevTools

   Right-click on the webpage and click Inspect.

   
2. Open Requestly Panel

   Click on the Requestly tab.

   

   If it is not visible, click on the >> button to expand the hidden tabs and then select Requestly

   

Once open, this tab will list out all the requests made by your browser. Here, you have two tabs:

Network Traffic

The Network Traffic tab displays a network table where all requests and responses from the webpage are listed. This tab provides debugging options such as:

• Add JavaScript to Page: Injects custom JavaScript into the webpage.

• Add CSS to Page: Applies custom styles to the page.

• Emulate a Different Device: Simulates how the page renders on different devices.

Clicking on any request in the network table reveals detailed information, including request headers, request body, and response body. Additionally, users have the option to create a rule directly from the network table for the selected request.

The available rule creation options are:

• Redirect to Another URL

• Replace Host

• Replace Part of URL

• Delay Request

• Cancel Request

Clicking any of these buttons will take you to the Requestly dashboard with some parameters set, Here you can customize and apply your modifications.

Rules Execution

The Rules Execution tab shows all the rules that have been executed on the current webpage. This helps users track which modifications have been applied to network requests and ensure that their configured rules are working as expected.