🚀 Requestly is now SOC 2 Compliant! Ensuring top-notch security and privacy for your data.
Product
Solutions
Pricing
Resources
Docs
Download
Insights
Product Updates
Use Cases
Announcements
Case Studies

How to Add, Modify, or Remove Query Param in Charles Proxy

Kanishk Rawat
September 27, 2024
6MIN READ
Learn how to easily add, modify, or remove query param in Charles Proxy to streamline debugging and testing of HTTP requests

Introduction

During local development modifying query parameters during api call can be a troublesome task. 

“Modify Query Param“ comes handy in such cases where you can map a local file to your network calls without making any changes to your codebase.

Map Local can also be used to

  • Using a local file to serve API calls

  • Test your local JS / CSS files on production or staging for debugging.

Setting up Map Local in Charles Proxy is little complex. You can follow the steps below to configure Map Local with ease.

A Browser Extension, that just needs you to fill 2 fields and doesn’t have VPN issues, is also explained later in this post. You can also use that in place of Charles Proxy.

How to Configure Charles Proxy’s Rewrite Tool to Modify Query Param

  1. Open Charles Proxy and make sure the proxy is turned on and capturing traffic.
  2. Go to the top menu and click on Tools.
  3. In the dropdown, choose Rewrite.
charles proxy response status
  1. This will open the rewrite settings window Here check Enable rewrite box and click Add.
query param
  1. Rename the rule to your liking and add a location to which the rule should be applied to
  • Protocol: Here you can select your site’s protocol http or https.
  • Host: Here you can enter the host/domain that you want to apply the rule to.
  • Port: You can specify the port on which your site is running.
  • Path: Define the path if you want the rule to apply only to specific paths on the host.
  • Query: Here you can define the query parameters that should be targeted.
query param

Now, save the location and click on Add in the Actions section.

There are three key actions you can perform: Add query param, Modify query param, and Remove query param.

  • Add query param

query param
  • Modify query param
query param
  • Remove query param
query param
  • Type: The type tells Charles what to modify. Here we have to select the type of modification we want to do in our case Body .
  • Where : Decide whether to apply the change on the request the response, or both. Since we want to allow CORS we will modify only the response.
  •  Match: You need to tell Charles when to apply the rule. This is done by matching specific text in the request URL or we can select Match whole Rule.
  • Replace: Once a match is found, Charles replaces the text you’ve specified. For example, in this case, we want to replace the Response Body with Modified response body with Charles Proxy.

After saving, you should be able to see the modifications in the Charles Proxy interface, confirming that the query parameters have been updated.

query param

Charles Proxy’s Rewrite URL tool can be complicated and time-consuming to set up. You have to go through multiple steps, including navigating the Rewrite Settings, defining conditions, and carefully entering the replacement values to avoid mistakes. Since Charles is a desktop application,  constantly switching between your testing environment and Charles can be frustrating.

With Requestly, this process is much simpler and smoother, saving you time and effort by making it easier to manage everything in one place.

To replicate this in Requestly, you can use the Modify Query Param Rule.

Modify Query param in Requestly

Say goodbye to the complicated setups and streamline your debugging process with Requestly’s Modify Query Param rule.

Modify Query Param Rule lets you modify query parameters in API requests based on specific conditions. You can easily add, remove, or update query parameters to test different scenarios without changing the backend. This feature is perfect for testing, debugging, and simulating different request behaviors. Rules can be applied based on URL patterns, making it simple and flexible

” No more switching between different tools – Requestly brings it all together in one place. “

query param
Overview of Configuration Options
  1. Source Condition: This condition allows you to filter or modify requests based on their source. In this case, the source is set to a URL containing www.amazon.com/s .
  2. Options: You can add, remove, or modify a query parameter in a network request. The dropdown lets you pick whether you want to add a new parameter, modify an existing one,  remove one, or remove all.
  3. Filter out Condition: This condition further refines your filtering by excluding certain requests based on specific rules, ensuring that only targeted requests are modified

Steps to Configure Requestly’s Modify Query Param Rule

  • Install Requestly Extension: Download and install Requestly’s browser extension.
  • Open Requestly Dashboard: Visit app.requestly.io and log in.
  • Click on the Rules tab and then select New Rule.
  • Choose Modify Query Param as the rule type.
  • Enter the URL or URL pattern in the Source Condition field.
  • Specify the query parameters you want to modify, add, or remove.
  • Name your rule and click Save
After saving the rule, you can test it on your desired API. If you’d rather not set it up manually, we’ve created a shared rule for Modify Query param. You can import it by clicking the button below.
Try This Rule

Or create your own Rule by following the guide below

The app requires the Requestly Chrome extension to function properly. If you don't have it installed, you'll be prompted to install the extension

Interactive Guide

Check out this interactive and easy explanation of how to create this rule

Other Use Cases

Here are some use cases for the Modify Query Param rule in Requestly:

  1. Remove Tracking Parameters
    Eliminate unnecessary UTM parameters from URLs for a cleaner testing environment. This helps avoid inflating analytics with test data, especially when tracking performance during internal testing.

  2. Burst Cache for Fresh Content
    Modify query parameters to add a unique identifier (e.g., ?version=2) to API calls or asset URLs, bypassing the cache and ensuring the latest versions of resources are always loaded.

  3. Simulate User Roles or Features
    Append query parameters like ?role=admin or ?feature=beta to simulate different user roles or feature access, testing how various user experiences are handled without requiring a login or special configuration

Migrate from Charles proxy

If you already have a Charles Proxy setup and want to give Requestly a try, You can import these tool settings in Requestly in just few clicks

Requestly currently supports following tools that you can import from Charles Proxy:

  • Rewrite
  • Map Local
  • Map Remote
  • No Caching
  • Block lists
  • Block Cookies

Steps to import

  1. In Charles Proxy, go to the top menu bar and select Tools > Import/Export Settings.

Charles proxy menu Import Export settings

  1. In the popup window that appears, switch to the Export tab. Under the Tools section, select the tools you want to export and click the Export button at the bottom right.

Import Export Setting popup
  1. Open the Requestly dashboard. If you don’t have any existing rules, you’ll see an Import settings from Charles Proxy .

  1. Upload or drag your exported Charles .xml file into Requestly.

Import charles proxy settings poip up
  1. Once the import is successful, your Charles Proxy settings will be converted into Requestly rules.

Conclusion

I hope you have got a clear understanding of both the Rewrite Query Param  in Charles Proxy and how Requestly can achieve the same results with greater ease. While Charles Proxy effectively handles the task, Requestly offers a modern, simple and efficient experience.

Since Requestly operates directly from your browser and leverages built-in browser APIs, there’s no need for complex SSL configurations, eliminating the VPN issues often encountered with Charles Proxy. Plus, you don’t need to switch between different tools — everything you need is right in your browser.

Love for Requestly is reflected in its 4.4 ⭐ rating from over 1,200 users on the Chrome Web Store. Requestly is being used by 200K+ developers across the world.

Happy Debugging!!!

Explore More

Kanishk Rawat
Kanishk Rawat, a tech enthusiast since childhood, has mastered programming through dedication. Whether solo or in a team, he thrives on challenges, crafting innovative solutions .

Contents​

Subscribe for latest updates​

Share this article

Related posts

Our journey to finding Product-Market Fit
Sachin Jain
December 5, 2024
How Blockthrough uses Requestly to seamlessly test their JS on publisher websites
Sagar Soni
December 4, 2024
The Best Open Source API Mocking Tool for developers (With examples)
Anmol Baranwal
December 2, 2024