Getting Started

This guide will help you set up Requestly and intercept and modify web requests using easy-to-follow examples.

Requestly is an open-source tool that simplifies development cycles with API Sessions, Mocking, and Testing. It supports every stage of API development, from creating API contracts to development, integration, testing, and debugging the production. This guide will explore how Requestly can assist at each stage.

Requestly helps in Development Cycle

API Planning

During the planning phase, API Contracts are created as the first agreement between frontend and backend teams. Both teams begin development based on these contracts. With Requestly’s API Client, you can create API Contracts, organise them into collections, and share them with your team through workspaces.

Requestly supports environment and collection variables, making it easier to define and manage variables in API Contracts.

API Development

In the development phase, teams implement the APIs based on the contracts defined during the planning phase. With Requestly, you can use the API Client to send requests, test endpoints, and ensure they meet the agreed-upon specifications.

API Integration

During integration, Requestly’s API Client and HTTP Rules make testing and customization seamless. Developers can test endpoints, override APIs, and mock responses to simulate different backend behaviours, handle edge cases, test error responses, and validate integrations efficiently—all without modifying the backend.

API Testing

In API testing, QAs use Requestly’s API Client to hit API endpoints, test their responses, and validate them against the defined API Contracts.

Application Testing

Application testing focuses on end-to-end functionality, ensuring that APIs work seamlessly within the application. Requestly’s session book and HTTP interceptor allow you to monitor and manipulate network calls in real-time, making it easier to identify and resolve issues during testing. Simulating network delays or modifying requests further enhances your ability to test under real-world conditions.

Debugging

Debugging is essential for resolving issues in development and production. Requestly supports debugging through tools like API mocking, rule overrides, and network call monitoring. Its detailed logs and session recording features help developers trace issues to their source and replicate bugs for faster resolution.

Bug Reporting

Effective bug reporting is critical for resolving issues efficiently. Requestly’s session book captures detailed bug reports, including screen recording, network logs, console logs, local storage, and environment details, making it easy for developers to replicate and fix issues. These reports can be shared with teams for better collaboration and faster resolution.

Installation

Requestly is available in two versions: Browser Extension and Desktop App. Both versions offer the same core features, but the Desktop App provides enhanced functionality, as it is not subject to the limitations faced in the browser extension. Each version serves distinct use cases—let’s explore them to help you decide which one best suits your needs.

Browser Extension

We have created browser extensions for all popular browsers, including Chrome, Firefox, Edge, Vivaldi, Arc, Brave, and Opera. The browser extension is particularly useful for scenarios involving browser-based workflows, such as web application development. It also has some advantages over the desktop application:

  1. It is lightweight.

  2. It works seamlessly within the browser.

  3. It utilizes the browser’s network APIs, avoiding conflicts with VPNs.

Click here to download the Requestly extension for your favorite browser.

Desktop App

The Desktop application offers additional features compared to the Browser Extension, as browser extensions are limited by security and other restrictions imposed by browsers. For example, while a browser extension cannot access local files, the Desktop app can. Here are some advantages of using the Desktop app:

  1. It can access local files, enabling you to map files in mock responses.

  2. The Desktop app can set up system-wide or application-level proxies, allowing it to intercept traffic from browsers, desktop applications, and mobile apps.

  3. It can intercept traffic from Android/iOS simulators.

  4. It can record an application's traffic and use it to create bulk mocks.

  5. It allows you to import and view HAR files easily.

Click here to download the Desktop App for your OS.

Signup

After downloading Requestly’s Browser Extension or Desktop App, you’ll need to sign up or sign in to start using the app.

We’ve made signup mandatory to address technical challenges with syncing rules for logged-in and non-logged-in users. Managing the differences between local storage and cloud storage for logged-in users was causing significant issues, so we eliminated the non-logged-in use case to streamline the experience.

This change benefits users as well. Once you sign up, your rules are encrypted and securely stored in the cloud, enabling features like syncing across devices and seamless team collaboration through workspaces.

Browser Extension Interface

As you start using Requestly Browser Extension you might want to get familiar with the interface, let’s explore the Browser Extension. Browser Extension has 2 interfaces — Extension Popup & Extension App

Extension Popup

You can open the Requestly Extension popup by clicking its icon in the browser’s extensions list or top bar if pinned. We recommend pinning the Requestly Extension for quick access.

The pop-up serves several purposes:

  1. The first section includes the Running Status toggle to turn the extension on/off and an Open App button to launch the Requestly app (https://app.requestly.io/) for creating rules or accessing the API Client.

  2. The second section helps manage rules. Pinned rules and recently used rules appear for quick access. The Executed Rules tab shows rules applied to the current page. You can toggle rules using the toggle button and quickly create new ones using the button in the top-right corner.

  3. The third section is for reporting webpage issues with detailed information, including screen recordings, console logs, network logs, local storage, and environment details. Record this tab starts recording, and Watch last 5 min replay shows recent activity, enabled via the Configure option. Data is stored locally and doesn’t affect performance unless shared.

    You can click on Record this tab and check out the working of this feature quickly.

  4. The last section, visible only if the Desktop App is running, lets you intercept browser traffic via the desktop app. Click Connect to link the browser profile to the app, useful for tasks like bulk mocking.

Web App

The Web App can be accessed using the Open App button in the Extension Popup or by visiting https://app.requestly.io/ directly in your browser. The app is organised into six main sections, represented by icons on the left sidebar:

  1. Home: The homepage provides an overview of your resources and quick access to key actions.

  2. Network Inspector: Similar to the browser’s dev tools, but with additional features.

  3. HTTP Rules: Allows you to override network requests by modifying parts of the request or redirecting them—our most popular feature.

  4. Sessions: Contains saved sessions from the Extension Popup discussed earlier.

  5. Mock Server: Enables the creation of cloud-based mock APIs.

  6. API Client: Offers an intuitive interface to create, manage, and call APIs.

Each section is explained in detail in its respective documentation. Visit Network Inspector, HTTP Rules, Sessions, Mock Server, and API Client for a deeper dive.

On Top (from left to right)

  1. Workspace Selector — Allows you to create a new workspace or switch between existing ones. Workspaces are where you group your work for specific teams or projects.

  2. Star — A GitHub widget to star our repository and track Requestly’s development.

  3. Search — Helps you quickly navigate the app; search for an action like “Create New Workspace” and hit enter to quickly create new workspace.

  4. Ask AI — An AI bot that can instantly assist with most queries. While our support team is prompt, AI provides even faster responses.

  5. Settings (Cog Icon) — Opens the settings page, where you can configure Requestly to suit your needs.

  6. Profile Picture Dropdown — Displays your logged-in profile information and includes links to billing and logout.

On the Bottom Left

  1. Invite Button — This lets you invite teammates to collaborate on Requestly.

  2. Version Information — Displays the current version of Requestly, which can be helpful when communicating with our support team.

On the Bottom Right

  1. Chat Support Icon — Located slightly above the API Documentation link, this connects you to our dedicated customer support team.

Desktop App Interface

The Desktop App interface closely mirrors the Web App interface, maintaining a consistent experience across platforms. However, there are some key differences from the Browser Extension:

  1. Network Traffic Tab — Located on the left sidebar, this is the main feature of the Desktop App. It enables you to intercept traffic from desktop apps, Android simulators, iOS simulators, and even proxy traffic from mobile apps for detailed analysis.

  2. Proxy Server Indicator — The Proxy Server is listening bar indicates that the proxy server is running on the Desktop App. It is used to intercept traffic from the various places mentioned above and display it in the Network Traffic table. Clicking the Connect apps button provides options to connect to browsers, desktop apps, mobile simulators, mobile apps, and more.

  3. Sessions — Sessions in the Desktop App are recorded from the Network Traffic table, making them slightly different from the Web App. These sessions can be used for reference or to create bulk mocks.

  4. Apart from these differences, the rest of the interface remains the same as the Web App.

The Desktop App’s additional capabilities make it ideal for scenarios requiring non-browser traffic interception and advanced mocking.

API Client

Requestly’s API Client enables you to create and manage API contracts and test API responses by sending requests. The API Client supports features like Collections, Environment Variables, Scripts, and History for API management.

Let’s create a request and check its response quickly:

Step 1: Click the + New button to create a new request and select Request from the menu.

Step 2: Choose a descriptive title for your request to make it easy to identify later.

Step 3: Pick the HTTP method (e.g., GET, POST) and type the URL of the API you want to test.

If you don’t have an API to test, use the sample endpoint: https://app.requestly.io/echo with the method GET. It will return request details in JSON format.

Step 4: Click the Send button.

Step 5: View the API response under the Response tab and the response headers under the Headers tab. The Status Code and Time Taken are displayed on the right side of the response tab bar.

HTTP Interceptor

HTTP Interceptor lets you capture and analyze network traffic from websites, applications, and devices in real time. It’s a powerful tool for debugging, testing, or analyzing API calls made by a webpage.

Let’s connect a browser and intercept traffic of a website:

Step 1: Open the Requestly Desktop App and click the Connect Apps button.

Step 2: From the options provided, select your browser of choice, such as Chrome.

Step 3: In the new browser window, open a website you want to analyse. For example, visit https://www.agoda.com.

Step 4: Navigate back to the Requestly Desktop App. The Traffic Table will start displaying the network traffic from the Agoda website, including API calls, headers, and response details.

HTTP Rules

Requestly’s HTTP Rules feature allows you to modify network requests and responses dynamically. You can override headers, redirect URLs, mock APIs, or add delays to simulate different scenarios—all without making changes to the codebase. This makes it an invaluable tool for developers and testers.

Let’s create a rule to see how HTTP Rules work:

Step 1: Open the Requestly App (Browser Extension) and navigate to the HTTP Rules section.

Step 2: Click the + New Rule button and select Replace Rule from the menu.

Step 3: Configure the rule settings:

Step 4: Save the rule by clicking Save Rule button.

Step 5: Test whether it’s working by searching for something on Google. It should automatically open www.duckduckgo.com result page.

Similarly, you can use other rules to match a URL and modify the part of the request/response you want to modify.

Updated on
Introduction
Downloads