Browser Interception

---

Requestly enables developers to monitor, debug, and modify network requests seamlessly within their development environment. Whether you're an API developer debugging endpoints, a QA tester simulating error conditions, or a front-end developer testing changes without updating the backend, Requestly simplifies these tasks effortlessly. There are two primary methods to intercept network requests using Requestly:

1. Inside the browser using DevTools

2. By connecting the browser to the desktop app proxy

Intercepting Requests in Browser DevTools

You can use Requestly directly inside your browser’s DevTools to inspect and modify network requests.

Steps to Intercept in Browser DevTools

Once opened, this tab will list out all the requests made by the website. Here, you have three 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.

Connect browsers with Requestly Desktop App

Requestly allows you to connect multiple browsers, making it easy to configure and switch between them for network interception.

To open the Connect Panel, follow these steps:

Supported Browsers & Profiles

The Connect Panel shows a list of browsers that Requestly supports. You can select from various profiles for browsers such as Google Chrome, Firefox, and Safari. Here are the details of each browser and its profile options:

• Google Chrome (New Profile):

  Launch a new browser profile without any pre-configured settings, logins, or extensions. This is ideal for testing requests in a clean environment.

• Google Chrome (Existing Profile):

  Use an existing Chrome profile to connect, keeping all your extensions, settings, and history intact.

• Firefox:

  Connect to Firefox for testing your network requests on this browser. it will launch a new profile with a clean environment.

• Arc:

  Arc is another modern browser supported by Requestly. You can create a new profile or use an existing one.

• Safari:

  Connect to the Safari browser, clicking the connect button will open a new Safari window.

For other browsers, find the proxy IP and port at the top of Requestly’s dashboard and refer to your browser's documentation to configure proxy settings.

Connect existing browser profile

You can connect your existing browser profile to the desktop app using the Requestly extension.

Steps to connect using browser extension

1. Launch the desktop app

2. Open the Requestly extension popup in the browser profile you want to connect.

   

   This button is only visible when the desktop app is open.

3. You should see a connect button in the popup to connect with the desktop app.

4. Click on the button and the desktop app starts intercepting the traffic.

With this method, you can easily link your current browser profile to the desktop app without needing to relaunch or lose your browsing session

Custom Browser Launch Options

Requestly offers custom browser launch options for certain browsers, specifically Chromium-based ones. These options allow you to tweak the behavior of the browser during interception.

Use the buttons next to the browser selection to customize the launch options. Here's a quick rundown of the preset configurations:

Without Safety Checks Disables security restrictions, allowing insecure content to run and third-party modules to load. Flags used:

• --allow-running-insecure-content Allows the browser to load content from websites that are not served over HTTPS.

• --allow-insecure-localhost Allows insecure content to be loaded from localhost

• --allow-third-party-modules Allows third-party modules (which could include extensions or custom scripts) to run even if they are not from trusted sources

Without CORS The --disable-web-security flag disables CORS (Cross-Origin Resource Sharing) restrictions in the browser, allowing requests to be made across different domains without security checks, to learn more on cors check out our blogpost here.

With Custom Arguments

Launch the browser with custom flags (only supported for Chromium-based browsers). Here are some interesting flags for launching Chromium-based browsers with custom arguments:

--incognito: Launches Chromium in Incognito mode by default.

--window-size: Sets the initial window size. Provided as a string in the format "800,600".

--user-agent : A string used to override the default user agent with a custom one.

A full list of available arguments can be found here.