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
Open DevTools
Right-click on the webpage and click Inspect.
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:
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.