DEV Community: Requestly

Introducing Open Source API Client

Requestly — Wed, 22 Jan 2025 06:34:37 +0000

APIs are the backbone of modern applications, enabling seamless communication between systems. Requestly simplifies API testing, debugging, and development. With the new Requestly API Client, the product expands into comprehensive API management and testing.

What is Requestly?

Requestly simplifies network request modifications with features like routing, blocking, and rewriting. It’s a favourite for debugging and testing web applications and is now evolving into a unified solution for API development, testing, and maintenance.

The Requestly API Client integrates with its suite of tools, enabling users to design, test, debug, and monitor APIs without juggling multiple platforms. By incorporating an API Client, Requestly addresses:

Unified Workflows: Manage the entire API lifecycle in one place.
Extended Capabilities: Combine debugging features with an API Client for a more robust ecosystem.
Enhanced Collaboration: Use API Collections and variable management to simplify teamwork.

Features of the Requestly API Client

1. API Design and Testing

Define and test API requests, Specify HTTP methods, headers, query parameters, and request bodies. Validate responses with detailed status codes, headers, and payloads.

2. API Collections

Organize API requests into collections for better structure and manageability. Share collections with your team and seamlessly switch between development, staging, and production environments.

3. Scripting Capabilities

Automate workflows with pre-request and post-response scripts. Use JavaScript to dynamically modify requests, validate responses, or manipulate variables.

4. Authorization Support

Handle various authorization mechanisms like API keys, OAuth 2.0, Bearer Tokens, and Basic Auth directly in your API requests or collections.

5. History and Replay

Revisit and replay previous API requests with the built-in History feature, perfect for debugging and regression testing.

6. Variables Management

Simplify testing and configuration by using global, environment, and collection-level variables. Manage dynamic values like API keys or base URLs efficiently.

How Does Requestly API Client Differ?

While several popular API clients exist, Requestly’s API Client complements its robust debugging and request-modification capabilities. Here’s how it compares to leading tools:

Postman

A market leader in API testing, Postman offers extensive features but can feel bulky for users seeking simplicity. Requestly provides a lightweight alternative with integrated debugging tools. Learn more.

Insomnia

Known for minimalistic design and speed, Insomnia is great for developers. Requestly matches this ease of use while adding features like request interception and rewriting. Compare Insomnia & Requestly.

Hoppscotch

Hoppscotch excels at quick and straightforward API testing. Requestly extends these capabilities with robust variable management and scripting options for complex workflows. Detailed Comparison.

We have been using Requestly for HTTP Rules and Network Inspector capabilities, which works great. We recently migrated from Postman to the API Client capability of Requestly:

Seamless migration for our 100+ Postman collections/environments in a single click.

Great support and diligence from the team in building required features and incorporating feedback.

By Harry S, Principal Engineer at Tapistro

Why Choose Requestly API Client?

Requestly enables developers to streamline their workflows like never before. Whether you’re designing APIs, debugging network requests, or managing authorization flows, Requestly equips you with all the tools you need in one place.

If you’re tired of switching between tools for API testing, debugging, and development, give Requestly API Client a try. Experience a unified platform designed to simplify your work and supercharge your API workflows.

What’s your take on unified tools for API development? Let us know how you see the future of API management evolving!

How to Load Non-Minified Google Publisher Tag (GPT) Scripts on Production Using Requestly

Requestly — Thu, 29 Aug 2024 12:33:55 +0000

Introduction

When troubleshooting or optimizing your ad setup, having access to a non-minified version of the Google Publisher Tag (GPT) scripts can be invaluable. Non-minified scripts are easier to read and debug, allowing you to understand how the code operates in your production environment. Requestly makes it simple to load non-minified GPT scripts on production without altering your site’s core code.

In this post, I’ll show you how to configure Requestly to replace the minified GPT scripts with their non-minified versions on production.

Why Use Requestly?

Requestly is a versatile tool that enables you to modify, redirect, and insert scripts into HTTP requests and responses. It’s especially useful for testing, debugging, and ensuring consistency across different environments. By using Requestly to load non-minified GPT scripts on your production site, you can easily debug issues and optimize performance without disrupting your live environment.

Setting Up Non-Minified GPT Script Loading with Requestly

1. Install Requestly

Begin by installing the Requestly extension from the Chrome Web Store or Requestly’s official website. After installation, the Requestly icon will appear in your browser.

2. Set Up a Redirect Rule

The Redirect Rule in Requestly allows you to redirect requests for minified scripts to their non-minified counterparts. This is particularly useful for loading readable, non-minified GPT scripts in your production environment for debugging and optimization.

Here’s how to set up a redirect rule for GPT scripts:

Open Requestly: Click on the Requestly icon in your browser.
Create a New Rule: Click on 'New Rule' and select 'Redirect Rule.'
Enter the Minified Production URL Pattern: Add the URL pattern for the minified GPT scripts used in your production environment. This tells Requestly which requests to redirect.
Specify the Non-Minified URL: Enter the URL for the non-minified version of the GPT scripts. This URL will be the target of the redirect.
- Example Minified URL: https://example.com/gpt.min.js
- Example Non-Minified URL: https://example.com/gpt.js
Save the Rule: Click ‘Save’ to create the rule and ensure the rule is activated by toggling the switch to the 'On' position.

Conclusion

Using Requestly to load non-minified GPT scripts on production is a great way to gain insights into your ad code and troubleshoot issues more effectively. This approach allows you to work with readable, debuggable code in a live environment, making it easier to identify and resolve problems.

Explore More:

How to Load Google Publisher Tag (GPT) Scripts from Staging to Production

Requestly — Thu, 29 Aug 2024 12:24:40 +0000

Introduction

When managing ads on your website, it's crucial to ensure that your Google Publisher Tag (GPT) scripts work flawlessly. However, testing in a staging environment can sometimes produce different results than in production. To bridge this gap, you can load GPT scripts directly from staging in a production environment using Requestly. This allows you to test staging configurations in a live setting without altering your production code.

In this post, I’ll guide you through the process of configuring Requestly to load GPT scripts from staging to production.

Why Use Requestly?

Requestly is a powerful browser extension that lets you modify, redirect, and insert scripts into HTTP requests and responses. It’s a valuable tool for testing, debugging, and ensuring consistency across different environments. By using Requestly to load GPT scripts from staging on your production site, you can test configurations in real time, ensuring they perform as expected before full deployment.

Setting Up GPT Script Loading from Staging to Production with Requestly

1. Install Requestly

Start by installing the Requestly extension from the Chrome Web Store or Requestly’s official website. After installation, the Requestly icon will appear in your browser.

2. Set Up a Redirect Rule

The Redirect Rule in Requestly allows you to direct requests from production URLs to their staging counterparts. This feature is particularly useful for loading GPT scripts from staging in a production environment to verify functionality before making them live.

Here’s how to set up a redirect rule for GPT scripts:

Open Requestly: Click on the Requestly icon in your browser.
Create a New Rule: Click on 'New Rule' and choose 'Redirect Rule.'
Enter the Production URL Pattern: Add the URL pattern for the GPT scripts used in your production environment. This pattern will be used to identify the requests that need to be redirected.
Specify the Staging URL: Enter the staging URL where your GPT scripts are hosted. This URL will be used as the redirect destination.
- Example Production URL: https://example.com/gpt.js
- Example Staging URL: https://staging.example.com/gpt.js
Save the Rule: Click ‘Save’ to create the rule. Ensure the rule is activated by toggling the switch to the 'On' position.

Conclusion

Using Requestly to load GPT scripts from staging to production is a smart way to test your ad configurations in a live environment without impacting your production setup. This method allows you to ensure everything works as expected before fully deploying the scripts, reducing the risk of errors and ensuring a seamless user experience.

Explore More:

Observing an adslot with MutationObserver API.

Requestly — Thu, 29 Aug 2024 12:17:51 +0000

Introduction

In the world of ad tech, ensuring that ad slots function correctly is essential for a smooth user experience and accurate analytics. Observing changes in ad slots can provide valuable insights into how they behave under different conditions. The MutationObserver API is a powerful tool for detecting changes in the DOM, and when combined with Requestly’s insert script feature, you can efficiently monitor ad slots in real time without altering your production code.

In this post, I’ll show you how to use Requestly to insert a script that leverages the MutationObserver API to observe ad slots for any mutations.

Why Use Requestly?

Requestly is a versatile tool that allows you to modify, redirect, or insert scripts into HTTP requests and responses. This makes it an excellent choice for testing and debugging web applications. By using Requestly to insert custom JavaScript, you can monitor dynamic elements on your web pages, such as ad slots, to ensure they perform as expected.

Setting Up Mutation Observations for Ad Slots with Requestly

1. Install Requestly

First, install the Requestly extension from the Chrome Web Store or Requestly’s official website. After installation, you’ll see the Requestly icon in your browser.

2. Set Up an Insert Script Rule

The Insert Script Rule in Requestly allows you to inject custom JavaScript into web pages, making it ideal for running scripts like the MutationObserver. This feature helps you monitor changes to ad slots and other dynamic elements without modifying the live codebase.

Here’s how you can insert a script to observe ad slots:

Open Requestly: Open Requestly app .
Create a New Rule: Click on New Rule and choose Insert Script
Enter the URL Pattern: Add the URL pattern for the pages where you want to monitor ad slots. This specifies where the script will be injected.

Add the Script: Paste your JavaScript code that uses MutationObserver to detect changes in ad slots. Here’s an example script:


// Select the node that will be observed for mutations
var targetNode = document.getElementById('<ad_ID>');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function (mutationsList) {
    for (var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            // Console log to show when child nodes are added or removed
            //console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            // Log attribute changes to the console
            console.info('ADTECH: MutationObserver - mutationsList ->', mutationsList);
            //console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
//observer.disconnect();

Save the Rule: Click ‘Save’ to apply the rule. Ensure it is activated by toggling the switch to the 'On' position.

Conclusion

Observing ad slots for mutations using the MutationObserver API with Requestly’s insert script feature is a straightforward and effective way to monitor changes in real time. Whether you’re debugging ad slot behavior or ensuring content accuracy, Requestly provides the tools you need to gain valuable insights without disrupting your production environment.

Explore More:

Test Staging Consent Management Platforms (CMP) Scripts on Production

Requestly — Thu, 29 Aug 2024 12:04:45 +0000

Introduction

Testing Consent Management Platforms (CMPs) scripts on production environments can be challenging. Staging environments are designed to test new scripts and configurations, but sometimes you need to ensure that everything works perfectly in the live environment before full deployment. This is where Requestly’s redirect rule feature comes into play. With Requestly, you can easily test staging CMP scripts in your production environment without disrupting the live experience for users.

Why Test CMP Scripts in Production?

Testing CMP scripts in the production environment is crucial for:

Verifying Real-World Behavior: Staging environments may not always replicate the production setup accurately. Testing in production ensures that the CMP scripts work under real-world conditions.
Ensuring Accuracy: CMP scripts handle user consent and privacy preferences. Errors or inconsistencies in these scripts can impact compliance and user experience.
Minimizing Risk: Testing in a controlled manner in production helps identify potential issues without affecting the entire user base.

Use Requestly Redirect Rule for CMP Testing

1. Install Requestly

First, install the Requestly extension from the Chrome Web Store or Requestly’s official website. Once installed, you'll see the Requestly icon in your browser.

2. Set Up a Redirect Rule

The Redirect Rule in Requestly allows you to redirect HTTP requests from one URL to another, which is useful for testing purposes. This feature helps you route production requests to staging versions of CMP scripts to ensure everything works correctly before full deployment.

Here’s how you can set up a redirect rule for CMP testing:

Open Requestly: Open Requestly app.
Create a New Rule: Click on New Rule and select Redirect Rule.
Enter the URL Pattern: Add the URL pattern for the CMP scripts in production. This pattern will match the requests you want to redirect.
Specify Redirect URL: Provide the URL of the staging CMP script where the production requests will be redirected.
Save the Rule: Click Save to create the rule.

Conclusion

Using Requestly’s redirect rule feature to test staging CMP scripts on production provides a flexible and controlled approach to ensure that your consent management solution functions correctly in a live environment. By following the steps outlined above, you can confidently validate your CMP scripts and ensure compliance with privacy regulations while minimizing the risk to your production setup.

Explore More:

Insert Smoke Test Script on Production to Run Smoke Test on New Builds

Requestly — Thu, 29 Aug 2024 11:53:49 +0000

Introduction

When deploying new builds to production, ensuring they are stable and error-free is crucial. One effective way to achieve this is by running smoke tests. These quick tests check the most critical functionalities of an application. However, running smoke tests directly in the production environment without disrupting users can be challenging. This is where Requestly comes in handy.

In this blog, we'll explore how to use Requestly to insert a smoke test script into the production environment, ensuring your new builds are reliable before fully rolling them out.

Why Smoke Testing is Important on Production

Quick Validation: Smoke tests provide a fast and efficient way to validate the core functionalities of your application.
Catch Critical Issues Early: Detect any critical issues in the new build before they impact end users.
Minimize Downtime: Ensures that the application remains stable and minimizes the risk of downtime.

Using Requestly to Insert Smoke Test Scripts

1. Install Requestly

First, install the Requestly extension from the Chrome Web Store or Requestly’s official website. Once installed, you'll see the Requestly icon in your browser.

2. Set Up an Insert Script Rule

The Insert Script Rule in Requestly allows you to inject custom JavaScript into web pages, enabling you to run scripts like smoke tests in a production environment. This feature helps you test new builds or configurations without altering the live codebase.

Here’s how you can insert a smoke test script using Requestly:

Open Requestly: Open Requestly app.
Create a New Rule: Click on New Rule and choose Insert Script.
Enter the URL Pattern: Add the URL pattern for the pages where you want to insert the smoke test script. This specifies where the script will be injected.
Add the Script: Paste your smoke test JavaScript code into the provided field. This script will run on the specified pages, performing the necessary checks.
Save the Rule: Click Save to apply the rule.

Best Practices for Smoke Testing on Production

Limit Scope: Focus only on critical functionalities to minimize risks.
Monitor Performance: Keep an eye on application performance to ensure that the smoke test doesn’t introduce latency or other issues.
Use Version Control: Version your smoke test scripts to ensure traceability and easier rollbacks if necessary.

Conclusion

Smoke testing on production is a vital step in ensuring the reliability of new builds. With Requestly, you can seamlessly insert and manage smoke test scripts in your production environment without disturbing your end users. By following the steps outlined in this blog, you can automate and streamline your smoke testing process, leading to more robust and stable deployments.

Explore More:

Configure Amazon Ad Exchange Bids using header modifications

Requestly — Thu, 29 Aug 2024 11:44:06 +0000

Introduction

When working with ad tech, testing different bidding scenarios is crucial. The AAX (Amazon Ad Exchange) Bid Simulation technique allows you to mimic bid requests and responses, helping you optimize your strategies. One of the easiest ways to adjust these simulations is by modifying the headers in your HTTP requests. With Requestly, you can achieve this quickly and without writing any code.

In this post, we'll explore how to configure the AAX Bid Simulator using header modifications in Requestly.

Why Use Requestly?

Requestly is a handy tool that allows you to modify, redirect, or block HTTP requests and responses. This is particularly useful when testing how different header values affect your ad tech setups.

Setting Up AAX Bid Simulator with Requestly

1. Install Requestly

First, install the Requestly extension from the Chrome Web Store or Requestly’s official website. Once installed, you'll see the Requestly icon in your browser.

2. Set Up a Modify Headers Rule

The Modify Headers Rule in Requestly lets you change HTTP headers of requests and responses. You can add, edit, or remove headers to test different scenarios, such as adjusting user-agent strings or troubleshooting CORS issues. This feature helps you understand how your application interacts with different server configurations and APIs.

Here’s how you can modify headers to work with the AAX Bid Simulator:

Open Requestly: Open Requestly app .
Create a New Rule: Click on New Rule and choose Modify Headers.
Enter the URL Pattern: Add the URL pattern for the AAX Bid Simulator’s request endpoint. This tells Requestly when to apply the rule.
Modify Headers: Add or edit headers, like X-AAX-PricePoint or X-AAX-Video-Dimensions, based on what you want to test.
Save the Rule: Once done, save the rule.

Conclusion

Configuring the AAX Bid Simulator using header modifications with Requestly is straightforward and can greatly enhance your testing capabilities. Whether you're a developer testing different bid scenarios or a QA simulating errors, Requestly provides the flexibility and control you need.

Explore More:

How to redirect prebid API calls to staging server for testing?

Requestly — Thu, 22 Aug 2024 11:51:40 +0000

When working with the Prebid API, ensuring everything functions correctly before going live is crucial. A smart strategy is to redirect Prebid API calls to a staging server, allowing you to test, debug, and refine your setup without risking any disruptions in your live environment. This approach ensures a smooth transition from testing to production.

Why Redirect API Calls?

Redirecting API calls to a staging server helps you:

Test New Features: Make sure everything works before launching it live.
Fix Bugs: Safely troubleshoot and solve issues.
Optimize Performance: Fine-tune things to ensure a smooth user experience

What is Requestly?

Requestly is a handy browser extension that lets you modify network requests. Whether you need to redirect URLs, change headers, or mock responses, Requestly makes it easy to manage these tasks without much hassle

Setting Up Requestly

First, you need to install Requestly in your browser. Here’s how:

Install Requestly: Go to the Requestly website, download the extension for your browser, and install it.
Basic Configuration: Go to Requestly app and sign in or create an account. Get familiar with the interface, especially the Rules section where you’ll set up your redirects.

Creating a Redirect Rule in Requestly

Now, let’s set up a rule to redirect your Prebid API calls to a staging server.

Create a New Rule:
- In the Requestly app, click on Http Rule and click New Rule.
- Select Redirect Request .
- Give your rule a name, like Prebid API to Staging.
Set Up the Redirect:
- In the URL Contains field, enter the URL pattern for your production API calls.
- In the Redirect to field, put the URL of your staging server.
- Save your rule .
Apply the Rule:
- Make sure the rule is turned on.
- Now, any matching API calls will be redirected to your staging server.

Testing Your Redirect

After setting up the redirect, it’s important to test it to ensure it works properly.

Test URL Condition

Leverage the Test URL condition feature to confirm that the URLs you're targeting match the conditions set in your rule.

To access the Test URL Condition popup:

Navigate to the rule
Click on the Test URL Condition button.

This will open a popup where you can input a URL to see if it meets the conditions defined in your rule.

Test the Rule

Use the Test this rule feature to ensure your redirect rule functions as intended before deployment.

To use this feature:

Select the rule you want to test.
Click on the Test button.

Enter the Url you want to test
Click Test Rule

This will help you verify that your rule behaves correctly with live data and make necessary adjustments before going live.

Advanced Features of Requestly

Requestly offers some cool advanced features that can make your testing even better:

Modifying Query Parameters

Adjust query parameters in your API calls to simulate different scenarios.

Mocking API Responses

Test how your front-end handles different data by modifying API responses.

Delaying Network Requests

Simulate slow network conditions to test how your application performs.

Conclusion

Redirecting API calls to a staging server using Requestly is a smart way to test and debug your application without risking your live environment. By following these steps, you can make sure your testing is safe, thorough, and effective.

List of DevTools for Prebid.js

Requestly — Wed, 21 Aug 2024 11:43:47 +0000

Introduction

Prebid.js is an open-source header bidding wrapper that enables publishers to maximize their ad revenue by connecting multiple demand partners. To effectively work with Prebid.js, developers often rely on various DevTools that help in debugging, testing, and optimizing their setup. Below is a list of essential DevTools for Prebid.js.

1. Requestly

Requestly is a browser extension that allows you to intercept, modify, and block network requests. It’s an excellent tool for testing and debugging Prebid.js by modifying bid requests or responses on the fly, simulating different bidding scenarios, or ensuring that specific bidders are included in the auction.

Features:

Modify request headers, URL parameters, or body.
Block specific requests to see how Prebid.js handles missing bids.
Simulate various ad server responses.

2. Google Chrome DevTools

Chrome DevTools is a built-in tool in the Google Chrome browser that allows developers to inspect network requests, debug JavaScript, and monitor the performance of Prebid.js in real-time. It’s invaluable for tracking bid requests and responses, analyzing network latency, and understanding how different bidders perform.

Features:

Network tab to view bid requests and responses.
JavaScript console for logging and debugging.
Performance tab to analyze load times and identify bottlenecks.

3. Charles Proxy

Charles Proxy is a web debugging proxy application that enables developers to view all HTTP and HTTPS traffic between their machine and the internet. It’s particularly useful for intercepting and analyzing bid requests, verifying that Prebid.js is functioning correctly, and ensuring that all bid responses are accurate.

Features:

SSL proxying to inspect HTTPS requests.
Bandwidth throttling to simulate different network conditions.
Ability to rewrite requests and responses on the fly.

4. Postman

Postman is a popular API development tool that allows you to manually trigger and test HTTP requests. For Prebid.js, it’s handy for testing bid endpoints, validating bid responses, and ensuring the integration between your ad server and bidders is working smoothly.

Features:

Send and test HTTP requests.
Create collections for different bidders and endpoints.
Automated testing and scripting for complex scenarios.

5. Prebid.js Debug Module

The Prebid.js Debug Module is an internal tool within Prebid.js that provides detailed logging and insights directly within the browser console. It helps developers trace the flow of bid requests, view bidder performance, and understand the decision-making process of the wrapper.

Features:

Real-time logging of bid requests, responses, and timeouts.
Detailed error messages for troubleshooting.
Insights into the auction process and bidder participation

6. Fiddler

Fiddler is a web debugging proxy that, like Charles Proxy, allows developers to capture and inspect HTTP/HTTPS traffic. It’s particularly useful for debugging Prebid.js on different devices or testing environments where you might not have direct access to browser DevTools.

Features:

Capture traffic from any device on the network.
Decrypt HTTPS traffic to view bid responses.
Extensive filtering and search options to zero in on specific requests.

7. Wireshark

Wireshark is a network protocol analyzer that allows you to capture and inspect data packets being transmitted over a network. For Prebid.js, it’s a more advanced tool used for deep analysis of network traffic, useful when troubleshooting complex issues that go beyond simple HTTP requests and responses.

Features:

Detailed packet analysis for in-depth debugging.
Filtering to isolate specific traffic related to Prebid.js.
Visualization tools for understanding network performance.

Conclusion

By leveraging these tools, developers can effectively manage and optimize their Prebid.js implementations, ensuring better ad performance and higher revenue. Whether you’re debugging an issue, testing new configurations, or simply monitoring the auction process, these DevTools provide the insights and capabilities needed to work efficiently with Prebid.js.

What is Prebid.js & how to debug it using Requestly!

Requestly — Wed, 14 Aug 2024 12:39:34 +0000

In digital advertising, programmatic ads have changed the game by automating how ads are bought and sold. A key part of this is header bidding, which lets publishers offer their ad space to multiple ad exchanges at the same time, boosting competition and revenue. Prebid.js is a popular tool that helps make header bidding easier, allowing publishers to get the most out of their ad inventory. In this blog, we’ll cover what Prebid.js is, how it works, and how you can troubleshoot it using the Requestly extension.

What is Prebid.js?

Overview

Prebid.js is an open-source header bidding wrapper that enables publishers to conduct auctions for their ad inventory across multiple demand sources. It integrates seamlessly with ad servers like Google Ad Manager, allowing publishers to increase competition and, consequently, ad revenue.

How Prebid.js Works

Prebid.js operates by auctioning ad inventory in the user’s browser before the ad server is called. Here’s a simplified workflow:

Integration: Publishers add the Prebid.js library to their website and configure it with various bidder adapters.
Auction: Prebid.js sends bid requests to configured demand partners when a user visits the page.
Bids: Demand partners return their bids, and Prebid.js selects the highest bid.
Ad Server Call: The highest bid is then sent to the ad server (e.g., Google Ad Manager) to compete with other ad sources.
Ad Display: The ad server selects the final winning bid and displays the ad to the user.

Advantages of Using Prebid.js

Increased Revenue: By increasing competition, publishers can secure higher bids for their ad inventory.
Improved Load Times: As the auction happens asynchronously in the browser, it can lead to faster ad loading times.
Transparency: Publishers have full visibility and control over the auction process.

Components of Prebid.js

Core Library: The main Prebid.js library.
Adapters: Integrations with various demand partners (bidders).
Modules: Additional functionalities like analytics and GDPR compliance.
Prebid Server: An optional server-side component for running auctions.

Debugging Prebid.js with Requestly

When debugging Prebid.js with Requestly, you can insert debugging scripts to get a better understanding of what’s happening with your Prebid setup. Here’s how you can approach this:

Use Case 1: Inserting Debugging Scripts

1. Install Requestly

Ensure you have the Requestly extension installed in your browser (Chrome, Firefox, etc.).

2. Create a New Rule in Requestly

Open Requestly App: Open Requestly web app .
Create a New Rule: Click on Create Rule and select Insert Script, depending on what you need.

3. Insert Debugging Scripts

To insert debugging scripts, follow these steps:

URL Pattern: Specify the URL pattern where you want to inject the script.
Script Content: Write or paste your debugging script.

4. Apply and Test

Save and Apply: Save your rule and ensure it’s active.
Reload Page: Refresh the page where Prebid.js is loaded and check the console logs or modified requests.

Use Case 2: Replacing or Redirecting Scripts

1. Specify the Production Script

URL Pattern: Set the URL pattern to match the production script you want to redirect or replace.

2. Redirect/Replace URL

Provide New URL: Enter the new URL for the script you want to use instead of the production script.

3. Apply and Test

Save and Apply: Save your rule and make sure it’s active.
Reload Page: Refresh the page to see the updated script in action.

Conclusion

Prebid.js is a powerful tool for maximizing ad revenue through header bidding. However, like any technology, it can encounter issues that need debugging. Requestly provides a versatile and user-friendly solution for intercepting and modifying HTTP requests, making it an invaluable tool for debugging Prebid.js. By following the steps outlined in this blog, you can ensure your Prebid.js setup runs smoothly and efficiently.

Understanding Angular Interceptors : Beyond HTTP

Requestly — Mon, 12 Aug 2024 11:31:53 +0000

Angular interceptors are very powerful tools that developers can use to manage how their applications handle HTTP requests and responses. They play a crucial role in implementing features like logging, authentication, error handling, and more, which leads to clearer and easier-to-maintain code.

Angular Interceptors act like a middleware between your Angular application and the server. They intercept requests before they are sent to the server and responses before they reach our application components. This allows developers to modify requests by adding headers, modifing request/response bodies, and changing status codes.

Setting Up Your Angular Project

First, make sure you have Angular CLI installed. If not, you can install it with npm:

npm install -g @angular/cli

Now, create a new Angular project:

ng new Project_Name
cd Project_Name

Now, Generate a new HTTP Interceptor with Angular CLI:

ng generate interceptor interceptors/interceptorName

This will create two files: interceptorName.interceptor.ts and interceptorName.interceptor.spec.ts in the src/app/interceptors directory.

Now , Open interceptorName.interceptor.ts and add the logic for your interceptor. Here’s an example that logs a message.

import { HttpInterceptorFn } from '@angular/common/http';

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

Now, To use the interceptor, open app.config.ts and add it to the providers array:

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Advanced Use cases of Angular Interceptors

Custom Transformation of Requests and Responses

Interceptors can tailor data transformation for requests and responses, such as modifying request bodies, headers, or response data formats before they are processed by the application.

import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

Mocking for Testing Scenarios

Developers can simulate different server situations without depending on live backend services by using interceptors to mock HTTP responses during testing. This method makes it possible to properly evaluate various scenarios.

import { HttpInterceptorFn } from '@angular/common/http';
import { of } from 'rxjs';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

Error Handling and Retry Mechanisms

Angular Interceptors enhance applications by implementing error-handling strategies, like automatically retrying failed requests and transforming error responses to improve user experience.

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

Here, the interceptor retries the failed request up to three times before handling the error, ensuring multiple attempts to successfully complete the request.

Chaining Interceptors and Controlling Execution Order

In Angular, developers can link multiple interceptors, each managing different aspects of request processing like authentication, logging, or error handling. They run in the order they are registered, allowing precise modification of requests and responses, ensuring flexible management of workflows for enhanced application functionality.

import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};
// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};
// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};
// Registering Interceptors in Angular Module
export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

Event Handling and DOM Interaction

Angular interceptors have the capability to intercept DOM events and interactions before Angular processes them. This functionality enables tasks like logging user interactions, enforcing application-wide event handling policies, or conducting additional validations prior to event propagation within the application.

import { HttpInterceptorFn } from '@angular/common/http';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

Interception using External Tool

External HTTP interception tools can be incredibly useful in various scenarios, especially when you need more control over your HTTP requests and responses beyond what is available in built-in interceptors. They are particularly beneficial for testing and debugging APIs, simulating different server conditions, and ensuring your application handles various edge cases effectively.

Requestly is one such powerful tool that enhances your development workflow. For example, suppose you’re developing an application and need to test how it handles a slow network response.

Installation and Configuration: Easily install Requestly as a browser extension and set up rules to intercept and modify HTTP requests and responses.
Rule Management: Define and manage rulesets based on URLs, headers, or query parameters to intercept requests according to specific criteria.
Request Modification: Modify requests by adding headers, rewriting URLs, or redirecting requests based on predefined rules, facilitating dynamic testing and debugging scenarios.
Advanced Use Cases: Utilize Requestly to simulate different server responses, mock endpoints for testing purposes, or enforce specific network conditions during development.

Conclusion

Angular interceptors are indispensable tools for managing HTTP communication and enhancing the robustness of Angular applications. By mastering the methods and exploring external solutions like Requestly, developers can streamline API integrations, improve security practices, and optimize performance effectively. Embrace interceptors to elevate the reliability and scalability of your Angular applications in handling diverse backend interactions with confidence and efficiency.

Requestly Update – May, 2024

Requestly — Fri, 14 Jun 2024 18:30:00 +0000

Hey Requestlians 👋,

Here is some progress we made in May and a quick sneak peek of what we’re up to.

🚀 Introducing a new pricing option – Lite Plan

For a limited time, We’re offering a Lite Plan that offers the following

Access to all HTTP Modification Types
GraphQL Modifications
Overriding & Stubbing API Responses
Injecting Scripts
Unlimited Header Modifications
Upto 5 API Mocks

Check out the Lite Plan here → https://requestly.io/pricing

🪴 Manifest V3 Rollout (Huge Thanks)

Last month, we shared the beta version with you with MV3 changes. We asked for feedback on our beta track and we really appreciate the support, feedback, and bug reports. We have rolled out the MV3 version in a controlled manner and as I type this post, all the new users of Requestly and 10% of our userbase are already on MV3. We plan to do the complete rollout by the end of this month.

Refer this GitHub Issue for more details – https://github.com/requestly/requestly/issues/1690

🤖 Introducing RequestBot – AI Assistant in Requestly

We’ve introduced RequestBot aka “Ask AI” feature. You can ask RequestBot anything about Requestly and It can help you quickly understand what Requestly can help with. Here are some helpful prompts that you can try

How to Override API Responses?
How to record HTTP Session?
How to solve CORS Issue?
How to record HTTP status code

Checkout the blog post here – https://requestly.com/blog/introducing-requestbot-ai-assistant-in-requestly/

👩‍💻 Best ModHeader Alternative

Lately, A lot of Modheader users are moving to Requestly. Modheader is in the news for injecting Ads and their recent release made the product very unstable. If you are looking for an alternative, Requestly can be a great option and with the Lite Plan, you get unlimited HTTP header modifications.

Checkout this → https://requestly.com/alternatives/a-better-and-well-documented-alternate-to-modheader/

We also support Requestly to be used in automation So if you need to use Requestly for modifying API Responses or modifying HTTP headers, contact us.

💫 The FrontendBytes Podcast – A Deep Dive into Software Testing & Challenges in Testing Ads

We had the pleasure of speaking with Kenton DeAngeli, a seasoned veteran in the AdTech industry with over 20 years of experience. He took us through his journey into software testing, shedding light on his work’s challenges and the software testing Industry.

Here are some of the things we covered

How did Kenton get into Testing, & What challenges did you face in your early career?
What is the most challenging part of the Software Testing role?
Developers and QA Relationship
When developers can’t reproduce bugs?
Resources to Become a Good Software Tester
How do you hire a good software tester
Good Interview Questions & Red Flags in Interview
Rapid-Fire Questions

Check out the podcast here → https://frontendbytes.substack.com/p/deep-dive-into-software-testing-role

❤️ Community Love

Check out this great post by Robert Hostak who used Requestly to switch Supabase environments in his WeWeb project and shared a great post in the WeWeb community.

Here is the post link – https://community.weweb.io/t/supabase-switch-between-production-and-staging-in-one-click/8972

⭐️ Checkout our Awesome Resources

🎁 Get $25 in credits & Get featured in our next newsletter

We love interacting with our customers and getting feedback is a critical part in how we build this amazing product.

Give a shoutout on X (Twitter) and get $25 in credits in Requestly
Rate us on Chrome Store and We will feature the best review in the next newsletter Please send an email to sachin [at] requestly.io with the tweet link / Chrome Store Review screenshot.

That’s all for this month. Happy developing!

DEV Community: Requestly

Introducing Open Source API Client

What is Requestly?

Features of the Requestly API Client

1. API Design and Testing

2. API Collections

3. Scripting Capabilities

4. Authorization Support

5. History and Replay

6. Variables Management

How Does Requestly API Client Differ?

Postman

Insomnia

Hoppscotch

Why Choose Requestly API Client?

How to Load Non-Minified Google Publisher Tag (GPT) Scripts on Production Using Requestly

Why Use Requestly?

Setting Up Non-Minified GPT Script Loading with Requestly

1. Install Requestly

2. Set Up a Redirect Rule

Conclusion

How to Load Google Publisher Tag (GPT) Scripts from Staging to Production

Why Use Requestly?

Setting Up GPT Script Loading from Staging to Production with Requestly

1. Install Requestly

2. Set Up a Redirect Rule

Conclusion

Observing an adslot with MutationObserver API.

Why Use Requestly?

Setting Up Mutation Observations for Ad Slots with Requestly

1. Install Requestly

2. Set Up an Insert Script Rule

Conclusion

Test Staging Consent Management Platforms (CMP) Scripts on Production

Introduction

Why Test CMP Scripts in Production?

Use Requestly Redirect Rule for CMP Testing

1. Install Requestly

2. Set Up a Redirect Rule

Conclusion

Insert Smoke Test Script on Production to Run Smoke Test on New Builds

Introduction

Why Smoke Testing is Important on Production

Using Requestly to Insert Smoke Test Scripts

1. Install Requestly

2. Set Up an Insert Script Rule

Best Practices for Smoke Testing on Production

Conclusion

Configure Amazon Ad Exchange Bids using header modifications

Why Use Requestly?

Setting Up AAX Bid Simulator with Requestly

1. Install Requestly

2. Set Up a Modify Headers Rule

Conclusion

How to redirect prebid API calls to staging server for testing?

Why Redirect API Calls?

What is Requestly?

Setting Up Requestly

Creating a Redirect Rule in Requestly

Testing Your Redirect​

Test URL Condition

Test the Rule

Advanced Features of Requestly​

Modifying Query Parameters

Mocking API Responses

Delaying Network Requests

Conclusion​

List of DevTools for Prebid.js

Introduction

1. Requestly

2. Google Chrome DevTools

3. Charles Proxy

4. Postman

5. Prebid.js Debug Module

6. Fiddler

7. Wireshark

Conclusion

What is Prebid.js & how to debug it using Requestly!

What is Prebid.js?

Overview

Testing Your Redirect

Advanced Features of Requestly

Conclusion

Use Case 2: Replacing or Redirecting Scripts

1. Specify the Production Script

Conclusion