Features

# Adding Delay to Network Requests

\#APITesting #SimulateLatency #WebAppTesting #SlowNetwork #DevTools

As a frontend developer or QA, Testing certain parts of web applications require you to simulate delay in one or more components of the web app.

Here are some scenarios where you would like to delay the network requests.

- Test performance of your web app on a slower condition
- Test behaviour of your app when one or more APIs respond slow (API Latency has gone up)
- Check if any race conditions exist when some resource X gets loaded after/before another resource Y.
- Test the impact of slow loading of external resources impact on your app.
- Test your loading experience in the app.

It is important for a developer to test the website performance in poor network conditions. This article focuses on the different methods which could enable developers to simulate network conditions.

## Approach 1: Network throttling feature of DevTools. Available in Chrome, Firefox and Edge.

The network tab in DevTools provides an option to throttle network requests. With this you can experience the same network conditions what one might face when using slow 3G, 2G connections or offline.

### Steps to use the throttler:

- Open DevTools (Ctrl + Shift + I)
- Switch to the Network Tab.
- By default, the throttler is set to ‘No Throttle’.
- From the dropdown menu, you can select the type of network to simulate.
- Long Press the reload icon while the DevTools panel is open.

![Long press the reload icon to see advanced reload options](/assets/blog-images/networkTab.png)
Long press the reload icon to see advanced reload options

_Source: https://css-tricks.com/throttling-the-network/_

- Select ‘Empty Cache and Hard Reload’ from the advanced reload options.

> It is important to empty cache to examine the page as a first time visitor.

### Limitations

- It throttles the entire network. It is not possible to delay a particular network request.
- It might not be helpful in cases where you want to selectively delay network requests.

For more information, refer the documentation: <a href="https://developer.chrome.com/docs/devtools/network/reference/">Docs</a>

## Approach 2: Server Side Delay - Using public APIs to add delay in requests

APIs like [deelay.me](https://deelay.me/) and [https://app.requestly.io/delay](https://app.requestly.io/delay) allow selectively delaying a network request. This kind of delay does not impact the browser.

### How to use the API:

Change the link to be delayed as:

 https://app.requestly.io/delay/<delay_in_millisecods>/<URL_to_be_delayed>

For example - Suppose you want to delay
[https://code.jquery.com/jquery-3.6.0.slim.js](https://code.jquery.com/jquery-3.6.0.slim.js)
by 4000 ms and see the impact on your app as your libraries heavily depend on jQuery. This url has to be changed to :

<pre>https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.slim.js</pre>

or

<pre>https://deelay.me/4000/https://code.jquery.com/jquery-3.6.0.slim.js</pre>

You can configure a Redirect Rule in Requestly to redirect jQuery CDN URL [https://code.jquery.com/jquery-3.6.0.slim.js](https://code.jquery.com/jquery-3.6.0.slim.js) to above mentioned URL like

<pre>https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.slim.js</pre>

### Limitations

- As the requests are redirected to public APIs, it cannot be applied on XHR requests as [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) policy would block the redirected resources.

## Method 3: ClientSide Delay - Using Requestly browser extension (Chrome, Firefox, Edge, Opera, Brave)

Using [Requestly](https://requestly.io/), you can Modify Headers, Redirect URLs, Switch hosts, Mock API response, Delay network requests, Insert custom scripts and much more.

Requestly delay rule works primarily on client side. This is how you can create a Delay Request Rule.

![Selecting Delay Rule in Requestly](/assets/blog-images/delayRuleSelector.png)Selecting Delay Rule in Requestly

![Configuring Delay Rule in Requestly](/assets/blog-images/delayRuleBuilder.png)Configuring Delay Rule in Requestly

- It supports delaying multiple requests which contain a certain keyword or match against the regex.
- It also works with AJAX requests.

You can also combine this with other rules of requestly, which is helpful in many situations, like somewhere you want to modify the headers of the request after delaying it. It could be easily solved using requestly.

### Limitations

- The Requestly extension actually adds the delay in the browser.
- Adding the delay in the browser could lead to poor browsing experience when the delay is applied to too many requests or it is applied for a large duration.

## Conclusion

- To test your entire application on a slower network, prefer using the browser's network throttling feature.
- To add delays to external resources like CSS, JS etc prefer using Server Side delay.
- To add delays to API requests (& AJAX requests) prefer using Client Side delay.

Hope this article gives you clarity on how you can test your applications on a slower network or simulate API latency in your app.

We share news about developer tools. Follow us on [Twitter](http://twitter.com/requestlyIO) to learn more about devtools. We are also reachable on email at contact@requestly.io


# The Why

At first, let us understand **WHY** do we need to test our application for different network conditions

While developing applications, we experience performance based on our home network and we optimize the performance with our network in reference. We fail to consider performance optimizations for situations where there could be an unstable network or low network coverage.

Testing our application for different network conditions helps us **optimize** our applications for them thus **improving** the overall **UX**.

Now, these can be done via the built-in dev tools' network tab in the browser, publicly available APIs that respond with delay, browser extensions that add delay to the network request, and other similar methods.

So what's the need to automate then?

Because automation is fun. Why do something manually when you can just automate that with a code snippet written taking a decade long time **" clears throat "**

![Awkward stares](https://media4.giphy.com/media/HP7mtfNa1E4CEqNbNL/giphy.gif)

# The How

Now, let's dive deep into the implementation.

### Let's get Automating!

![I'll get you automating](https://media0.giphy.com/media/l1KtYG8BndKBmWrM4/giphy.gif)

## Approach 1: Using Selenium Chromedriver API for Network Emulation

Since we're gonna use selenium, let's first install the selenium npm package

```
npm install selenium-webdriver
```

Run this on your project directory terminal and we've installed selenium as a dependency for the project

We also need the driver for the specific browser we're going to test our application on. In this blog, we'll be focusing on the Chrome browser. You can find the link to that [here](https://chromedriver.storage.googleapis.com/index.html)

Now that these are out of the way, let's get writing some code

![Finallyyy!](https://media0.giphy.com/media/Quh1CAKOTRCl9VVU3f/giphy.gif)

Let's start by importing few parts from the selenium package

```
const { Builder } = require("selenium-webdriver")
```

Now, let's write the function where the main code would stay

```
async function testApplication() {
  let driver = await new Builder().forBrowser("chrome").build();

  await driver.setNetworkConditions({
    offline: false,
    latency: 5000, // Additional latency (ms).
    download_throughput: 50 * 1024, // Maximal aggregated download throughput.
    upload_throughput: 50 * 1024, // Maximal aggregated upload throughput.
  });

  driver.get("http://www.google.com/");
}
```

If we run this function, we would experience a slower speed than usual. But there are a few downsides to this code.

- It throttles the entire network and not a specific website

- You can't throttle a specific network request

Now let's find out how can we overcome these downsides with our next approach.

## Approach 2: Using Requestly's Selenium Package to Throttle Specific Network Request

The selenium package from [Requestly](https://requestly.io/) offers us the ability to create network request specific rules. We'll be discussing their Delay Network Request feature.

For using this package, we need to create a rule first in the Requestly client and then use that rule to delay any network request.

Head on to [requestly's application](https://app.requestly.io/) and click on the New Rule Button, a popup would open up showing the types of rules we can create. For the time being, select delay network request.

![Rules Popup](https://cdn.hashnode.com/res/hashnode/image/upload/v1631821223774/OQO1-OdGh.png)

Now add the URL of the network request you want to delay and add the delay time in milliseconds

![Add Rule](https://cdn.hashnode.com/res/hashnode/image/upload/v1631821353416/TJy5JuIOt.png)

Now we need to get the link to the rule so that we can use that to import the rule.

For that, click on Save Rule and then Share Rule. A popup would appear asking you to name the shared list where this rule would live in. Name it and click on create.

![Naming Shared List.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631821960950/xRAsLubGU.png)

Now a popup with an option to copy the shared list link would appear. Copy that and keep it handy, we'd require it in our code.

![Copy Link Popup](https://cdn.hashnode.com/res/hashnode/image/upload/v1631822140085/4WQVTtliL.png)

![Phewwww!](https://media3.giphy.com/media/l3q2NdI5m0jrtwFpu/giphy.gif)

Phew, that was a lot! Now finally we get to implement it in our code.

![Yayyyy!](https://media4.giphy.com/media/tMUw5b0PF8SwAAE11c/giphy.gif)

Let's start by installing the dependencies and importing them into our project

```
npm install selenium-webdriver @requestly/selenium
```

```
require("chromedriver");
const { Builder } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const {
  getRequestlyExtension,
  importRequestlySharedList,
} = require("@requestly/selenium");
```

Now that we've all the dependencies into our project, let's create a variable to store our shared list link

```
const sharedListUrl = "YOUR_SHARED_LIST_LINK_HERE"
```

We now have all the components to write our function.

```
async function testApplicationViaRequestly() {
  const options = new chrome.Options().addExtensions(
    getRequestlyExtension("chrome") // This installs requestly chrome extension in your testing instance
  );

  const driver = new Builder()
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();

  await importRequestlySharedList(driver, sharedListUrl); // Here we import the shared list we created some time back
  driver.get("http://www.google.com/");
}
```

Now, if you try to run the function, you would have the exact behavior as before but with a lot more control over all the network requests and without any downside, we had before.

You, my friend, are a **power user** now 😉.


You can Activate/Deactivate requestly with your right click on requestly icon present on Chrome toolbar. If you deactivate Requestly, your rules won’t be affected but they won’t be executed anymore. Similarly, When you activate Requestly, your active rules will get starting to execute.

## How to use

You can use _Right click_ on requestly icon in toolbar to see the option to deactivate requestly. When requestly is deactivated, same option converts to activate requestly.

![image](https://app.requestly.in/content/images/deactivate-option-in-menu.png)

Snapshot of right click context menu

## How to know if Requestly is Deactivated

You can instantly know the state by looking the color of icon in toolbar menu.

![image](https://app.requestly.in/content/images/256x256_greyscale.png) 
Icon is grey color in deactivated state

## Is there any other way to deactivate Requestly

You can disable any extension on your Chrome browser by following steps:

1. Go to `chrome://extensions`
2. UnCheck `Enable` after Requestly
3. You can enable it later when you need.

This is a bit longer process. That’s why this feature is introduced with which you can deactivate Requestly with just single click.

## Implementation Details

For intercepting network requests, Requestly adds three types of listeners

1. [OnBeforeRequest](https://developer.chrome.com/extensions/webRequest#event-onBeforeRequest): Used in Redirect and Replace Rules
2. [OnBeforeSendHeaders](https://developer.chrome.com/extensions/webRequest#type-OnSendHeadersOptions): Used to Modify Request Headers
3. [OnHeadersReceived](https://developer.chrome.com/extensions/webRequest#event-onHeadersReceived): Used to modify Response Headers

So, when Requestly is deactivated all these listeners are unregistered. These listeners are registered again when user activates requestly.

Once User deactivates Requestly, this information is stored inside `chrome.sync.storage` So if User has deactivated Requestly on one machine, it would automatically deactivate on other synced Chrome browsers.

We have always thought of building Requestly as a complete web debugging toolkit that enables, the developers, to easily modify the network requests. As the complexity of web applications started increasing, many developers suggested us to add an ability to modify the response as well. Today, we are excited to announce such a feature, _Modify Response Rule_.

With Modify Response Rule, you`ll now be able to modify the response body of AJAX requests.

![](https://requestly.io/assets/images/requestly-modify-response-rule.gif)Similar to other Rules, this Rule will also allow you to specify advanced filters including the regular expressions.

An update to our browser extension has been rolled out and all you have to do is just make sure that your extension version matches the latest.

## Example Use Cases

- Test AJAX response without actually modifying backend
- Mock fluctuating AJAX responses
- Mock AJAX response to focus on front-end development even if back-end is not available.

## Using Modify Response Rule

Let`s consider we have a web app that requests some external resource using AJAX and processes the response to generate views.

![](/assets/blog-images/regular-response.png)Using DevTools, we can **find the data source**. 
In our example, it is: *https://canvasjs.com/data/gallery/jquery/daily-sales-data.json*

Let`s **create a Rule** to modify the response of AJAX request to this data source.

Navigate to your Requestly Dashboard and select **New Rule &gt; Modify AJAX Response**

Enter the **Source URL** (data source) and the **response body** we expect. You can also use JavaScript function to customize the response.

![](/assets/blog-images/rule-settings.png)**Save the Rule and reload** the web app. Now our web app will receive the modified response to the AJAX request.

![](/assets/blog-images/modified-response.png)That`s it. You can also check the modified response in the DevTools.

It is worth noting that Modify Response Rule does not have support for the `fetch() `API yet.


## Introducing Query Param Rule

Modification of query parameters is one of the most popular feature requests we have received after [script execution](https://medium.com/@requestly_ext/inserting-scripts-dynamically-in-a-webpage-be4af90da20a) feature. We are very excited to announce the release of QueryParam as a new rule type. If you are not able to see QueryParam rule type, please update your extension [by following this guide](https://medium.com/@requestly_ext/how-to-update-chrome-and-firefox-extensions-manually-29de9798f646).

## Use Cases

Query Parameters is important part of URL. When you want to pass data in HTTP Get request, that data is sent in the form of query params. Thus QueryParam rule can be extremely useful to test server’s behaviour with different query parameter. Query Params Rule can be used to perform the following modifications on a given url:

1. RemoveAll parameters.
2. Add parameter.
3. Remove a specific parameter.

## How to Create Query Param Rule

Please follow these steps to create Query Params rule in Requestly.

### Click on Add Icon present in toolbar on [Rules Page](https://app.requestly.in/rules/)

![](/assets/blog-images/Screenshot-2018-04-07-15.50.19-1.png)

### Select Query Param Rule

Since Requestly supports multiple rule types, when you click on Add Icon, it takes you to [Rule Type selection page.](https://app.requestly.in/rules/#selectRule) Click on Query Param Rule Card to create a new Query Param Rule.

![](/assets/blog-images/Screenshot-2018-04-07-15.55.49.png)

### Create Query Param Rule

Based on your use case, you can populate different fields in Rule Editor. For Example, In this case we are adding dl=1 param to urls which contain dropbox.com

![](/assets/blog-images/Screenshot-2018-04-07-16.00.19.png)

## Examples

##### Example 1 — Add Parameter “c” when url contains “foo”

![](/assets/blog-images/QueryParam_example_1-1.png)

##### Example 2 — Remove All params and then add parameters “a” and “b” when url contains “example”

![](/assets/blog-images/QueryParam_example_2-1.png)

## FAQ

**Q1.** If I add a parameter by QueryParam rule and the same parameter already exists in the given url, will Requestly overwrite the parameter value ?  
**Ans:** Yes, Requestly will overwrite the value present in the url to the value given in the rule. For example:

> **Rule Definition:**  
> Url Contains example.com  
> Add Param “a” Value “200”

When Requestly gets above query param rule definition and the request url is [http://www.example.com?a=100](http://www.example.com/?a=100), then it will change the param value to 200 as per the rule and the new url will be [http://www.example.com?a=200](http://www.example.com/?a=100)

**Q2**. What is the difference between “Remove” and “RemoveAll” ?  
**Ans**: RemoveAll will remove all the parameters while Remove will remove only provided parameter.

That’s all to cover in this article. Feel free to reach out to us for any questions you have. Drop a comment if you have any suggestions to improve this post.



`Replace Rule` is commonly used ruleType provided by Requestly. As the word `replace` indicates it allows users to replace a string (or matching pattern) with another string in the url. It looks to be very simple but it can achieve very complex use cases. Lets discuss some of them one by one.

## Use Cases

### Switch Domains

**Situation:** Suppose you are working on a web app which fetches content from your REST API available at `http://my-app-server.com/rules`. You have cloned the API server, made some changes and running it locally on `http://localhost:4000/rules`. Now, you want to test your app with the new changes done on API server.

**Approach1:** Change the domain in your App code to hit `localhost` instead of `my-app-server`. Once your testing is done revert this change.

**Approach2:** Use Replace Rule Define a Replace Rule to replace `http://my-app-server.com`with `http://localhost:4000` in all URLs. No need to change url inside your code. After your testing, just disable the rule. As simple as that.

**![](/assets/blog-images/domain-switching-example.png)Chrome Store Feedback** Here is a review listed on Chrome Store about Replace Rule.

### ![](/assets/blog-images/chrome-store-feedback-adam.png)

### Change Query Parameter Values

You can change the values of query parameters present in Url. For example: Changing `?dl-0`to `?dl=1` in dropbox Urls downloads the file directly without going to the usual preview page. Such a simple use case of Replace Rule.

### Fix broken/updated Urls

Often you may find that links to some documentation or blog posts are changed but you have developed a typing habbit of old urls. Well, you can use replace rule to achieve that use case.

## Pattern Matching in Replace Rule

With all the use cases mentioned above, we know Replace Rule can be used to replace a string with another string in a Url. Apart from it, Replace Rule can also match a `JS Based Regex` in the Urls and you can replace them with another string. Please note in case of Regex pattern, you can also use the values of group expressions in your regex and use them in final strings. For Example:

### Example 1: Extract domain, pathName and extension for Urls ending with `.jpg`

```
/(https:\/\/[^\/]*)(.+)(\.jpg)$/i
```

- $1 is the value of 1st group expression. – DomainName
- $2 is the value of 2nd group expression – PathName but not file extension
- $3 is the value of 3rd group expression – File extension `.jpg` in this case

### Example 2: Strip out Query Parameters in a URL

```
Replace /(.+)(\?)(.+)/ig
With $1
```

- $1 is the value of URL before “?”
- $2 matches “?”
- $3 is your query string

Checkout this [Regex on regex101](https://regex101.com/r/nX7qM7/1) and try your use cases.

---

You can use [Regex 101](http://regex101.com/) for creating your Regex and try out various scenarios. For any further questions, please drop us a comment or open a bug on Github.

## Links

- [Requestly on Chrome Store](https://chrome.google.com/webstore/detail/requestly/mdnleldcmiljblolnjhpnblkcekpdkpa)
- [Regex 101](http://regex101.com/)


This article (including all other articles under `Developers` category) are meant for Requestly development team only. If you have any suggestions, please feel free to suggest.

## Steps

### Before Release

- Checkout master branch and fetch latest code `git checkout master && git pull origin master`
- Checkout `production` branch – `git checkout production && git pull origin production`
- Merge master branch to it – `git merge master`
- Update version number in ```
 manifest_chrome.json,
 mainfest_firefox.json,
 manifest_edge.json,
 config/version.json,
 components/browser-extension/package.json

### Release Chrome

- Change browser to chrome in the configs `./rq-config browser=chrome env=prod`
- Build all the components to test for prod on local machine `./build.sh prod`
- Run Unit tests – `./test.sh`
- Refresh `chrome://extensions` and click on extension icon and run the sample rule
- Switch to browser-extension directory `cd components/browser-extension`
- Run build command – `grunt release-chrome`
- Upload the build to [Chrome Store](https://chrome.google.com/webstore/developer/dashboard)
- Delete the earliest build. We want to keep only 3 previous builds
- cd ../..

### Release Edge

- Change browser to chrome in the configs `./rq-config browser=edge env=prod`
- Build all the components to test for prod on local machine `./build.sh prod`
- Run Unit tests – `./test.sh`
- Open `edge://extensions` and click on extension icon and run the sample rule
- Switch to browser-extension directory `cd components/browser-extension`
- Run build command – `grunt release-edge`
- Upload the build to [Edge Store](https://partner.microsoft.com/en-us/dashboard/microsoftedge/b3e69bf0-262d-40a8-a4f5-eded941b79eb/packages/overview)
- Delete the earliest build. We want to keep only 3 previous builds
- cd ../..

### Release Firefox

- Change browser to chrome in the configs `./rq-config browser=firefox env=prod`
- ``Run command – `./release_firefox.sh`
- Copy requestly artefact inside `app/public/firefox/builds` directory and save it as `requestly-latest.xpi`
- Update latest version in `updates.json` inside same directory

### Post Release

- Enable Logger in `logger.js`
- Commit the files – `git add .. && git commit -am "Requestly va.b.c released"`
- Push to production branch – `git push origin production`
- Add tag – `git tag -a va.b.c -m "Requestly va.b.c released"`
- Push the tags – `git push --tags origin`
- Merge to master – `git checkout master && git merge production`
- Change browser to chrome `./rq-config browser=chrome env=beta && ./build.sh beta`
- Push master – `git push origin master`

Once you have developed a Mozilla addon, you will try to take the next step to distribute it to wider audience. There are two ways you can distribute your addon.

1. Submitting to AMO (Listed version)
2. Self Hosting addon (Unlisted version)

Submitting to AMO provides you a listed version of your addon and your addon is visible in Mozilla store to be searched and installed by users. This should be the first choice for users but given the current state of Mozilla review process, developers tend to incline towards self hosting. First of all, Mozilla is very strict in their review process. They will ask for your code unminified, unobfuscated, details about all the libraries used, versions of the libraries used. They check for all kinds of security loopholes and also check if you have done anything in an antipattern fashion. This makes their review queue last longer and your addon may be reviewed after a month or so just to know that you need to fix A,B,C and resubmit. One side of coin is very fair which makes your addon secure but the other side is darker because at times, your business requirements need a mozilla addon but you may not have all the time in world to fix all the tech debts at once like you cannot upgrade all libraries just to pass review process.

I submitted Requestly to AMO twice and end up deciding self hosting it just to cross the review time barrier. In this article, we will discuss about how to self host your unlisted version of addon.

# Steps for Self Hosting Mozilla Addon

## Step1: Install NPM and web-ext (1 Time step)

Both the methods of addon distribution require developers to sign their addon. `web-ext` is a command line tool developed by Mozilla to speed up various parts of the WebExtension development process, making development faster and easier. To sign an unlisted version we will use `web-ext` npm command line package so we need to install npm first.

#### Install Npm

> https://nodejs.org/en/download/

#### Test npm Installation

> npm -v

#### Install web-ext

> npm install –global web-ext

#### Test web-ext installation

> web-ext –version

## Step2: Obtain keys from Mozilla (1 Time Step)

Please visit [Mozilla Addon API Keys Page](https://addons.mozilla.org/en-US/developers/addon/api/key/) to obtain userId and secret. The page should look like this:

## ![](/assets/blog-images/mozilla-api-keys-page.png)Step3: Signing the build using userId and secret

Final step is to use the Mozilla sign apis to get your build signed and ready to host. Just go to directory where addon code is present.

#### Define applications key in your manifest

Signing the build requires you to add `applications` key in your manifest like this

```json
"applications": {
 "gecko": {
 "id": "<some_random_id>",
 "update_url": "https://<your_server_location_where_you_host_zips>/updates.json"
 }
}
```

Please note that along with hosting zip files, you will also need to host an `updates.json` file which tells Firefox the location to download any updates to your addon. Mozilla requires that your update_url must be an https based url.

#### Create updates.json file

updates.json file looks like this

```jsonon
{
 "addons": {
 "<your_addon_id>": {
 "updates": [
 {
 "version": "1.0.0",
 "update_link": "<your_server_location_where_you_host_zips>/addon-1.0.0.xpi"
 }
 ]
 }
 }
}
```

Please note that should be same as you defined in manifest.json

#### Sign

```
web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET
```

After running this command, you should see an xpi file in web-artifacts directory. Host this xpi file along with updates.json and you are done!

# References

- [WebExtensions Home](https://developer.mozilla.org/en-US/Add-ons/WebExtensions)
- [Getting Started with web-ext](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext)

# Contact

Feel free to post questions via comments or mail at requestly.extension@gmail.com

Requestly offers a ton of features which just make surfing the web a whole lot easier, be it for Web Designers, Product Marketers or even Developers in general. Definitely at some point, you would want to share the rules you would have created with your colleagues and other developers. We will show you how you can share a list of rules create by you, Let's dive right in!

## See how this works!


<iframe width="900" height="506.25" src="https://www.youtube.com/embed/BM7kTFy-vdc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


## Create a Shared List

The process of sharing rules is fairly simple and I'll show how to do it in just a few steps:

- Select the rules from the list that you would like to share
 <img alt="select rules" src="/assets/blog-images/requestly-select-rule-to-share.png" />

- Next Click the Share Button on the toolbar which appears after the rules to be shared have been selected. 
 <img alt="Click on Share Button on toolbar" src="/assets/blog-images/click-on-share-btn.png" />

- At this point if you aren't Logged into your account, you will be prompted to Log In.
- If Logged in, then your shared list will be created successfully and this dialog will appear with some pre-defined details like your shared list name and public URL.
 <img alt="Enter a meaningful name for your sharedList and Click on Create Button." src="/assets/blog-images/shared-list-dialog.png" />

- Now if you wish to rename your shared list then you can do so by simply clicking on the edit icon next to your shared list name. Once edited, simply press enter to save the changes and update the URL accordingly. 
 <img alt="SharedList success dialog" src="/assets/blog-images/edit-shared-details.png" />

- From here on you can either copy the link and share with your colleagues and friends (or) you can enter emails separated by a comma (,) and they will be notified from our end.

- You can manage your Shared List from Shared List option on the top nav bar.

## Import a Shared List in Web!

- Click on the Shared List Link given to you. The link should be in this form – https://app.requestly.io/shared-lists/viewer/1625686153436-Sample-Rules
- Click on the 👁️ icon to preview the rule.
- Click on Import List button to download the rules on your system. 
 <img alt="Click on Import List Button" src="/assets/blog-images/import-shared-list.png" />

## Import a Shared List in Requestly Desktop App

Incase you don't know then requestly even comes with a desktop app which you can download from this link .
Now in order to import a shared list in desktop app you need to follow the following steps.

- Navigate to the shared list section from the top nav bar.
 <img alt="Click on Shared list menu" src="/assets/blog-images/desktop-app-shared-list.png" />
- At this point if you aren't Logged into your account, you will be prompted to Log In.
- Once logged in, you need to click on the "Import from URL" button accessible from both sidebar as well as from main section itself.
 <img alt="Click on import URL " src="/assets/blog-images/desktop-app-import-url.png" />
- Now paste the link given to you in the input box. The link should be in this form https://app.requestly.io/shared-lists/viewer/1625686153436-Sample-Rules. which will redirect you to preview shared list content section.
 <img alt="import URL dialog " src="/assets/blog-images/desktop-app-import-url-dialog.png" />
- Click on the 👁️ icon to preview the rule.
- Click on Import to My Rules button to import the rules on your dashboard.
 <img alt="Click on import to my rules" src="/assets/blog-images/desktop-app-preview-shared-list.png" />

The User-Agent request header is most commonly used by servers to identify its client’s application type, operating system, software vendor or software version. Based on the User-Agent string, server selects suitable content to be sent in response. For instance, when a website is opened in a mobile device, it usually looks quite compact and different compared to the way it opens in desktop.

Now imagine if your browser allows you to override the User-Agent string, you could see any version of a website you like! All you need to do is to install [Requestly](https://www.requestly.in/) extension in your browser and enjoy the fun.

<figure class="wp-caption aligncenter" style="width: 1597px">![UserAgent Rule Card](https://app.requestly.in/content/images/documentation/introducing-useragent/useragent-card-highlighted.jpeg)<figcaption class="wp-caption-text">UserAgent Rule Card</figcaption></figure>

You can choose among popular devices like `Android Phone`, `iPhone`, tablets or web browsers like `Internet Explorer`, `Safari`, etc. Or you may also specify a `Custom User-Agent` string to experience a specific version of website.

Requestly has a simple rule builder where you specify the source request URL or domain and select type of User Agent. You may also choose whether to override User-Agent only for the website URL or for all HTTP requests originating from that page.

<figure class="wp-caption aligncenter" style="width: 1356px">![UserAgent Rule Editor](https://app.requestly.in/content/images/documentation/introducing-useragent/useragent-ruleeditor.jpeg)<figcaption class="wp-caption-text">UserAgent Rule Editor</figcaption></figure>

<figure class="wp-caption aligncenter" style="width: 401px">![UserAgent Select Device](https://app.requestly.in/content/images/documentation/introducing-useragent/ua-selectdevice.jpeg)<figcaption class="wp-caption-text">UserAgent Select Device</figcaption></figure>

<figure class="wp-caption aligncenter" style="width: 402px">![UserAgent Select Browser](https://app.requestly.in/content/images/documentation/introducing-useragent/ua-selectbrowser.jpeg)<figcaption class="wp-caption-text">UserAgent Select Browser</figcaption></figure>

> Requestly also allows you to set your custom UserAgent.

<figure class="wp-caption aligncenter" style="width: 1169px">![Setting Custom UserAgent String](https://app.requestly.in/content/images/documentation/introducing-useragent/ua-custom.jpeg)<figcaption class="wp-caption-text">Setting Custom UserAgent String</figcaption></figure>

The best part of this extension is that you may run different rules for different websites simultaneously.

Requestly also has a great application in web-development where you usually want to test your website on different platforms.

Please give it a try and share your valuable feedback with us. We will try to improve and help you in best possible way. For further questions, feel free to reach out at `requestly.extension@gmail.com` or tweet to `@requestly_ext`.

Features

Adding Delay to Network Requests

Automate Testing via Selenium

Deactivate Requestly Feature

Introducing Modify AJAX Response Rule

Query Params Rule Documentation

Replace Rule Documentation

Requestly Release Process

Self Host Mozilla Add-on

Share rules and collaborate with team mates!

UserAgent Modification Rule

Get to know Requestly