Use Cases

# Debugging Next.js Application in Production

<a href="https://nextjs.org">Next.js</a> is an open-source development framework built on top of node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route prefetching, and more. No config is needed. – From nextjs.org
Debugging a bug in production can be a nightmare especially if the bug is reproducible only in the production environment. This could happen for several reasons like not having all the data on a local/stage environment or setting up a backend server can seem complex & time-consuming if you are a frontend developer.
So In this article, we will see how we can debug a Next.js application in production without even setting up a local server or trying to reproduce the bug on local or any other environment.

## Bug(s) in production NextJS app

We’ll take a simple Todo NextJS App available here - https://github.com/requestly/sample-nextjs-app

which is also live at: https://sample-nextjs-app-flax.vercel.app/

![To Do App](/assets/blog-images/2021/12/28/to-do-app.png)

So for our case, there is a Next.JS basic to-do app that adds and fetches a list of tasks from the backend and when the user clicks on complete, the task gets deleted from the server.
In our application setup, we have a server and a frontend application built using Next.Js

Also in Next.Js, when we build our application:
If we see our production build so our index page component is compiled as static/chunks/pages/index-b1a6b3cf2be8bc12f539.js
Let’s take a look at our \_buildManifest.js

```
"/": ["static/chunks/pages/index-b1a6b3cf2be8bc12f539.js"],
```

Our about.html has the following scripts imported:

```
<script src="_next/static/chunks/pages/index-b1a6b3cf2be8bc12f539.js" defer=""></script>
```

#### So there is a hash generated along with the filename, the hash will change whenever we rebuild your application.

Now, we have a hypothetical situation where clicking on submit while adding a task I am getting an error in production, only the total tasks count gets updated but the task is not created.

## Debugging Backend APIs

If I have to debug this on a local setup, I need to set up the frontend and backend server locally too because my UI code by default hits the server on `/create` and `/delete` and it is too cumbersome to set server along with frontend and debug for a quick find.
So let’s talk about an approach using the Requestly browser extension using which you can debug your app without setting up your server on local machine.

### About Requestly

Requestly is a Chrome extension that lets you modify network requests like Modify Request & Response Headers, Redirect URLs, Switch Hosts, Mock API Response, Delay Network requests, Insert Custom Scripts, and much more. This is widely used by developers on daily basis because of the features it provides and it makes things simpler.

### Solution

Using the Requestly Redirect feature, we can redirect our script(s) from Production to localhost. In layman terms, when the browser loads the app then instead of loading the JS from production, requestly picks the JS from localhost. Now, we can add some more logic that can help us debug the issue. And once, we find the issue we can fix in our local script, test it on the production site and then deploy it with confidence.

![Redirect Prod to local using Requestly](/assets/blog-images/2021/12/28/redirectRule.png)

## Setting up Requestly Redirect Rule (Step by Step Guide)

### Step1 — Install Requestly Extension

Go to <a href="https://requestly.io">https://requestly.io</a> and set up the extension for the browser of your choice.

### Step2 — Setup Redirect Rule

We will create a redirect rule through which we will use our production server capability on our local machine for debugging.

- Redirect Rule Set Up for Create Route

![Redirect Rule Setup](/assets/blog-images/2021/12/28/redirect-rule-for-create.png)

Through this, we have successfully redirected our local server routes to the production server.
And when I debugged I found an issue with my UI code itself, that in the request all the required fields were not getting passed as the params. So it was a quick solution and setting up rules saved a lot of time.

## Debugging JS Code on Production

Just like in the previous example, we have set up redirects for routing an API endpoint from the production server to the local server, we will use a similar technique to redirect the JS hosted on production to my local JS. However, there is a slight complexity when it comes to JS mentioned earlier, every resource in the next.js project gets a unique file hash when the application is built. For example, In the following script resource

```
https://sample-nextjs-app-flax.vercel.app/_next/static/chunks/pages/index-b1a6b3cf2be8bc12f539.js

```

`index-b1a6b3cf2be8bc12f539.js` is the unique file hash. This is variable and Requestly provides very good support to handle variables in the URL.
Handling file hashes in the URL

We can use Requestly WildCard or Regex Match Operator to handle the file hash So our Rule will simply become

Request URL “WildCard Matches” `https://sample-nextjs-app-flax.vercel.app/_next/static/chunks/pages/index-*.js`

Destination - `https://localhost:3000/_next/static/chunks/pages/index.js`

### Requestly Redirect Rule (Redirect Production JS to localhost JS)

![Redirect Production JS to localhost JS](/assets/blog-images/2021/12/28/js-redirect-rule.png)

So, We just saw how you can configure Requestly to gain complete control over your network traffic. This is a very powerful technique and saves a lot of time. Whether you are a backend developer or frontend developer, Requestly is now in every developer’s toolkit.

Happy Debugging! By <a href="https://linkedin.com/in/govindgoel">@govindgoel</a>

#### For Reference:

More about Next.js: <a href="https://nextjs.org/">https://nextjs.org/</a>

Application: <a href="https://github.com/requestly/sample-nextjs-app">https://github.com/requestly/sample-nextjs-app</a>

Deployed Application: <a href="https://sample-nextjs-app-flax.vercel.app/">https://sample-nextjs-app-flax.vercel.app/</a>

Rules: <a href="https://app.requestly.io/rules/#sharedList/1639923388678-Next.Js-Debugging">https://app.requestly.io/rules/#sharedList/1639923388678-Next.Js-Debugging</a>

# Current Setup & the limitations

In my previous organisation [grofers](https://grofers.com), where I worked as a backend engineer, during development of any feature or even a small bug fix, we used to first develop & test the changes on the locally setup MicroService. After that, we deploy the changes on the Kubernetes stage cluster in an isolated namespace, which has all the other services deployed too. The deployment pipeline usually took around 5-10mins to completely deploy all the services. After the stage is setup, we change the API gateway in our debug app to point to the stage environment so we can test the changes end-to-end on the app.

This often requires multiple cycles and sometimes unstable stage environment makes the entire development & testing very frustrating. We often found ourselves fixing the configuration on stage environment and then testing the changes. This is how the process looked like before:

![grofers current testing process](/assets/blog-images/2021/12/12/grofers-current-testing-process.png)

## Limitations

- It was very time consuming.
- Multiple deployments required after every change/commit.
- Debugging using breakpoints in IDE was not possible.
- Maintaing a stage environment is very hard. Our Staging environment lacked a lot of data, stability issues so everytime testing on stage was pain.

Almost every developer was using this tedious process to test out the changes. As this process is time consuming, sometimes we missed certain edge cases, which then multiple times had also led to downtimes 😢  and bugs in production.

We tried telepresence too for local testing, but no one ended up using it due to the tedious process in setting it up.

# Introducing Requestly 💪

Requestly is a cross-platform developer tool to intercept all local network traffic and gives request level granular control to modify individual pieces of an API request. Requestly can be leveraged here to reduce the development & testing time and also testing different corner cases.

![Requestly Hero Image](/assets/blog-images/2021/12/12/requestly-feature-set-annotated.png)

## How Requestly can help?

Using [Requestly desktop app](http://requestly.io/desktop), you can interecept all traffic from your Android & IOS debug apps. Then you can create a traffic modification rule (simply rule) to redirect a particular endpoint/service to your local machine and not to production endpoint (A No-Code solution for the Coders) This lets users instantly test out any changes directly against production envrionment **without depending on the staging environment**.

On top of this, you can instantly test out how the app reacts when the response of an API changes, without making any changes to the code. You can mock API responses using Requestly. You can also test for 4xx, 5xx scenarios, add artificial latency to your APIs and test your app.

So this is how the process looks like now:

![Local API testing process with Requestly](/assets/blog-images/2021/12/12/local-api-testing-process-with-requestly.png)

## Example - Use Search APIs from local in debug app

For example, If you are working on Search service and want to test Type To Search experience, this setup can be really life savior. For this you can configure a Replace Rule in Requestly like this

```
Replace: https://api2.grofers.com/v5/search
With: http://localhost:5000/v5/search
```

Here's how the flow of data look like

![Android & IOS App debugging with Requestly](/assets/blog-images/2021/12/12/requestly_android_IOS_Debugging.png)

## Benefits

- Changes instantly reflected on app
- No multiple deployments cycle required.
- Test different edge cases which only exist on production. **Deploy on production with confidence.**
- Debugging with breakpoints in your favourite IDE is now possible
- Minimize dependency on Stage environment

## Configuring Requestly (Step by Step guide)

Now you know the benefits of using Requestly in your local API develoment & testing. It's time to set up Requestly. Here's step by step guide.

### Step1 - Download Requestly Desktop app

Go to [https://requestly.io/desktop](https://requestly.io/desktop) and download the desktop app for your OS - Mac, Linux & Windows.

### Step2 - Install Certificate & Configure Proxy in Android/IOS Debug App

![Requestly Desktop App Setup Steps](/assets/blog-images/2021/12/12/requestly-desktop-app-setup-steps.png)

At this point, you should be able to see the traffic from your debug app in the Network Traffic table.

### Step3: Setup Redirection Rule in Requestly

Redirecting `v5/search` endpoint from Production to local server

![Redirect API from Prod to local using Requestly](/assets/blog-images/2021/12/12/requestly-redirect-prod-to-local.png)

### Step4: Add Preset headers (If required)

Click on `Create New Rule` and then `Select Modify Headers` to add additional headers to the request which Kong adds in the production environment So that your [localhost](http://localhost) end point also receive the same headers.

![Add Preset Headers using Requestly Headers Rule](/assets/blog-images/2021/12/12/requestly-headers-rule.png)

That's it! You should be able to test features like TypeToSearch directly in debug app against the production K8s cluster utilising the production data on ElasticSearch and other production configurations.

Please note we don't intend to discourage testing in the stage environment. We just want to emphazise that you can avoid multiple cycles of deployment on stage during the development. Ofcourse, the ideal practive should to test end to end on local, then doing testing on stage and then deployment on production.

Happy testing! By [Sahil Gupta](https://www.linkedin.com/in/sahil865gupta/)


This article will take you through how to use [Requestly](https://requestly.io) to simulate different API status codes and test your app.

# Using Browser Extension

[Requestly Browser Extension](https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa) can simulate different status codes on an API by redirecting the actual API to a mock API.

The mock API simulating the desired status code is hit instead of the actual API. It is done using the redirect rule of requestly.

![Mock Server](/assets/blog-images/2021/12/29/mock-server.png)

## Create a mock API using Requestly

Requestly has a Mock Server capability to create a Mock API response.

- Create a new mock API here- [https://app.requestly.io/mock-server/viewer/create](https://app.requestly.io/mock-server/viewer/create)
- Set the status code you want to simulate.
  ![Mock API sending 500 status code](/assets/blog-images/2021/12/29/mock-500-status.png)
  Mock API sending 500 status code
- A mock Simulating 500 status code- [https://app.requestly.io/mock/7gmdFoaQdhKfe28uLfa9](https://app.requestly.io/mock/7gmdFoaQdhKfe28uLfa9)

_Requestly mock server handles the [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers automatically so that the browser does not block the cross-origin requests._

## Redirecting the actual API endpoint to the Mock Server endpoint.

- Setup a [redirect rule](https://requestly.io/feature/redirect-url) to redirect the actual API to the requestly mock API.

![Redirect Blinkit Search API to a mock API simulating 404 status code](/assets/blog-images/2021/12/29/blinkit-404.png)

Redirect Blinkit Search API to a mock API simulating 404 status code

## Removing Content-Security-Policy Headers

Sometimes redirection to mock API won’t work due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)- [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directive, which restricts the URLs loaded using script interfaces.

You can use the [Requestly marketplace](https://app.requestly.io/marketplace) rule to bypass this, which is a prebuilt rule to remove the `content-security-policy` header.

![Requestly Marketplace](/assets/blog-images/2021/12/29/marketplace.png)

I hope this empowers you to do robust testing of your frontend by simulating different API behaviours.

Further Resources:

- [Simulating 500 when Tweeting](https://requestly.io/blog/2021/12/29/simulating-500-status-code-in-create-tweet-api-on-twitter)
- [Simulating 404 on Blinkit Search](https://requestly.io/blog/2021/12/29/simulating-404-status-code-in-blinkit-search-api)

This feature will soon be available on the desktop app. Stay Tuned.

Happy Debugging!

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)



Nobody wants to see errors in their API. But they appear at times when least expected. The possible scenarios when an error pops up could be something is wrong with the request or some problem with the API. Whatever may be the cause, one thing is sure traffic would stop.

API crashes shouldn’t disrupt the user experience. Errors should be handled at the client-side so that the user knows that something is wrong and can move on from there.

In the development phase, the consumers of API won’t wait till the API is entirely built to start their development. In this scenario, they can mock server responses and begin their development. Testing the application for error responses is vital so that user traffic is not blocked.

A QA tester or Product manager would want to mock various error responses to check how the application handles the errors.

## How to Simulate API error responses using Requestly

[Requestly](https://requestly.io) is a tool that intercepts all the network requests and allows users to modify them. It enables users to Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts. It is available as a desktop app and browser extension on all major browsers.

[Requestly](https://app.requestly.io) app can simulate status code responses by using the redirect rule to redirect to a mock API that overrides the status code. In simple words, you are hitting the mock API instead of the actual API.

![Mock Server](/assets/blog-images/2021/12/29/mock-server.png)

I used it to simulate status code responses on certain prominent websites.

I tried this with the following sites to see how the site handles the simulation of 500- Internal Server Error status code.

## Simulating 404 status code on blinkit search.

I created a mock using requestly setting 404 status code.

![Mock for simulating 404 response code on blinkit search](/assets/blog-images/2021/12/29/mock-404-status.png)
_Mock for simulating 404 response code on blinkit search_

After some observation, I found that blinkit search API follows the pattern `[https://blinkit.in/v5/search/*](https://blinkit.in/v5/search/*)`

![Rule redirecting blinkit search to mock API response](/assets/blog-images/2021/12/29/blinkit-404.png)
_Rule redirecting blinkit search to mock API response_

The blinkit website went into infinite loading on searching as a 404 response status code was simulated in the search API. The error is not handled here instead. If some message were to the user, the experience would have been better.

![Searching on Blinkit](/assets/blog-images/2021/12/29/blinkit-search.png)
_Searching on Blinkit_

Get the rule here: [https://app.requestly.io/rules/#sharedList/1640614559005-blinkit-search-404](https://app.requestly.io/rules/#sharedList/1640614559005-blinkit-search-404)

This is how I used Requestly to simulate 404 in the blinkit search. I hope this article has helped you and empowers you to simulate different status codes.

Happy Debugging!

Further Resources:

- [Simulate different API status code using Requestly](https://requestly.io/blog/2021/12/29/simulate-different-api-status-code-using-requestly/)
- [Simulating 500 when Tweeting](https://requestly.io/blog/2021/12/29/simulating-500-status-code-in-create-tweet-api-on-twitter)

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)



Nobody wants to see errors in their API. But they appear at times when least expected. The possible scenarios when an error pops up could be something is wrong with the request or some problem with the API. Whatever may be the cause, one thing is sure traffic would stop.

API crashes shouldn’t disrupt the user experience. Errors should be handled at the client-side so that the user knows that something is wrong and can move on from there.

In the development phase, API consumers won’t wait until the API is entirely built to start their development. In this scenario, they can mock server responses and begin their development. Testing the application for error responses is crucial so that user traffic is not blocked.

A QA tester or Product manager would want to mock various error responses to check how the application handles the errors.

## How to Simulate API error responses using Requestly

[Requestly](https://requestly.io) is a tool that intercepts all the network requests and allows users to modify them. It enables users to Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts. It is available as a desktop app and browser extension on all major browsers.

[Requestly](https://app.requestly.io) app can simulate status code responses by using the redirect rule to redirect to a mock API that overrides the status code. In simple words, you are hitting the mock API instead of the actual API.

![Mock Server](/assets/blog-images/2021/12/29/mock-server.png)

I used it to simulate status code responses on Twitter

I tried this with the following sites to see how the site handles the simulation of 500- Internal Server Error status code.

## Simulating 500 status code when Tweeting

I created a mock API using requestly setting Status Code as 500.

![Mock for simulating 500 error response on Twitter](/assets/blog-images/2021/12/29/mock-500-status.png)
_Mock for simulating 500 error response on Twitter_

After some reverse engineering, I noticed that when the tweet button is clicked, a POST request is sent to a Twitter API ending with `CreateTweet`.

So I created the Requestly rule to be applied only when the URL matches `*/CreateTweet`using wildcard match.

![Redirect Rule redirecting to mock API](/assets/blog-images/2021/12/29/createTweet-API.png)
_Redirect Rule redirecting to mock API_

The redirection to mock API won’t work due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)- [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directive, which restricts the URLs loaded using script interfaces.

You can use the [Requestly marketplace](https://app.requestly.io/marketplace) rule to bypass this, which is a prebuilt rule to remove the `content-security-policy` header.

![Requestly Marketplace](/assets/blog-images/2021/12/29/marketplace.png)

When I tried tweeting something, 500 status code was simulated and handled as following.

![500 error response simulated when tweeting](/assets/blog-images/2021/12/29/twitter-screenshot.png)
_500 error response simulated when tweeting_

Get the rule here- [https://app.requestly.io/rules/#sharedList/1640613384657-twitter-500-simulate](https://app.requestly.io/rules/#sharedList/1640613384657-twitter-500-simulate)

This is how I used Requestly to simulate 500 when tweeting. I hope this article has helped you and empowers you to simulate different status codes.

Happy Debugging!

Further Resources:

- [Simulate different API status code using Requestly](https://requestly.io/blog/2021/12/29/simulate-different-api-status-code-using-requestly)
- [Simulating 404 on Blinkit Search](https://requestly.io/blog/2021/12/28/simulate-404-API-status-code-in-blinkit-search-API)

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)


Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate a changelog into your website and are confused among some excellent options available for use. You can easily insert installation scripts from different changelog providers in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out changelog by Beamer on Stackoverflow.

1. Create a new rule.
 ![New Rule](/assets/blog-images/2022/01/24/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/2022/01/24/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/2022/01/24/trying_beamer_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Stackoverflow.com in our case.
 ![Test Beamer on Stackoverflow](/assets/blog-images/2022/01/24/beamer_on_stackoverflow.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Wisepops, Drift and HotJar** to name a few.
 Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate a sticky bar to announce annual offer on your website and are confused among some excellent options available for use. You can easily insert installation scripts for different tools in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out inserting a sticky bar using Convertflow on Netflix.

1. Create a new rule.
 ![New Rule](/assets/blog-images/2022/01/24/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/2022/01/24/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/2022/01/24/trying_convertflow_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Netflix.com in our case.
 ![Test Convertflow on netflix](/assets/blog-images/2022/01/24/convertflow_on_netflix.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Drift and HotJar** to name a few.
 Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate a chatbot into your website and are confused among some excellent options available for use. You can easily insert installation scripts for different chatbots in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out Crisp chat on Amazon.


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

1. Create a new rule.
 ![New Rule](/assets/blog-images/2022/01/21/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/2022/01/21/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/2022/01/21/rule_snippet.png)

 You can use this istallation code for testing purposes:

```
 window.$crisp=[];
 window.CRISP_WEBSITE_ID="1c7370cc-6ff1-446f-89fa-9769ac56b756";
 (function(){
 d=document;
 s=d.createElement("script");
 s.src="https://client.crisp.chat/l.js";
 s.async=1;
 d.getElementsByTagName("head")[0].appendChild(s);
 })();
```

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Amazon.com in our case.
 ![Test Crisp on Amazon](/assets/blog-images/2022/01/21/test_crisp.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Wisepops, Drift and HotJar** to name a few.
 Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate popups into your website and are confused among some excellent options available for use. You can easily insert installation scripts for different popup providers in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out Popupsmart on Stackoverflow.

1. Create a new rule.
 ![New Rule](/assets/blog-images/2022/01/24/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/2022/01/24/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the code source.
 ![Rule Details](/assets/blog-images/2022/01/24/trying_popupsmart_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Stackoverflow.com in our case.
 ![Test Popupsmart on stackoverflow](/assets/blog-images/2022/01/24/popupsmart_on_stackoverflow.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Drift and HotJar** to name a few.
 
Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate popups into your website and are confused among some excellent options available for use. You can easily insert installation scripts for different popup providers in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out Wisepops on eBay.

1. Create a new rule.
 ![New Rule](/assets/blog-images/2022/01/24/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/2022/01/24/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/2022/01/24/trying_wisepops_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. eBay.com in our case.
 ![Test Wisepops on eBay](/assets/blog-images/2022/01/24/wisepops_on_ebay.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Drift and HotJar** to name a few.
 
Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Use Cases

Debugging Next.js App in Production

How backend devs can save an hour a day in local development & testing

Simulate Different API status code using Requestly

Simulating 404 HTTP status code in Blinkit Search API

Simulating 500 HTTP status code in Create Tweet API on Twitter

Try out Beamer on Stackoverflow in less than 30 seconds!

Try out Convertflow on Netflix in less than 30 seconds!

Try out SaaS Apps in less than 30 seconds!

Try out Popupsmart on Stackoverflow in less than 30 seconds!

Try out Wisepops on eBay in less than 30 seconds!

Get to know Requestly