Developers and testers often need to switch between staging and production environments or update specific URL parts for testing. Doing this manually in the browser or hardcoding changes into the app is repetitive and error-prone. It wastes time and breaks the flow during development.
This article explains how to replace only the necessary part of a URL while keeping the rest intact, using Requestly, a browser extension built for controlled request and URL manipulation.
Why Modify Part of a URL?
Changing part of a URL is useful during development or testing when different environments, configurations, or system changes occur. Instead of editing source code, you can intercept and adjust URLs as needed.
Here are common reasons to modify only part of a URL:
- Switching between environments: When testing across staging and production, you may need to load the same path on different domains.
Read More: Test Environment: A Beginner’s Guide
- Simulating different runtime conditions: When verifying behavior across feature flags, A/B tests, or environment toggles controlled via query parameters.
- Handling backend updates: During a version rollout, you might need to reroute requests from deprecated API paths to newer ones without changing code.
- Testing against fallback URLs: When original links are broken or outdated, but you still need to verify functionality using alternative endpoints.
Why Use Requestly to Replace Part of a URL?
Requestly’s Replace String rule lets you update specific parts of a URL in the browser without changing the source code. This is useful for environment switching, simulating user states, or rerouting traffic during testing.
The key benefits of using Requestly for URL replacements include:
- Switching Domains: Replace staging or test domains with production ones without changing the path or parameters.
- Change Query Parameter Values: Modify parameters such as ?env=dev to ?env=prod or change userId=123 to simulate different user sessions.
- Fix broken/updated URLs: Reroute requests from outdated paths like /v1/data to /v2/data or redirect broken URLs to working ones.
- Pattern Matching in Replace Rule: Use regex to match and replace dynamic parts of the URL, such as tokens, IDs, or variable segments.
How to Use Requestly to Change the Domain of the URL?
You can replace any part of a URL, such as domains, paths, or parameters, by setting up a Replace String rule.
In this example, we’ll replace the domain bstackdemo.com with browserstack.com so that any request to the demo site redirects to the primary site.
Here’s a step-by-step guide to changing a specific part of a URL with Requestly.
- Install Requestly: Add the Requestly Chrome extension from the Chrome Web Store.
- Create a rule: Open Requestly, click Create Rule, then select Replace String and click Create Rule again.
- Define match and replace:
- In the Replace field, enter bstackdemo.
- In the With field, enter browserstack.
- Save and activate: Name the rule (e.g., “Redirect to browserstack.com”) and click Save.
- Test the change: Visit https://bstackdemo.com, and Requestly will automatically load https://browserstack.com.
Alternate Method: Replace URL Segments with JavaScript
While Requestly offers a no-code way to modify URLs, developers can also perform URL replacements directly in JavaScript. This is useful for scripted environments, automation, or when working inside a codebase.
Here are two common approaches:
1. Basic string replace
This method treats the full URL as a plain string and replaces the target text using .replace(). It’s quick and works well when the structure is predictable.
const updatedUrl = location.href.replace('bstackdemo', 'browserstack'); location.href = updatedUrl;
This replaces any occurrence of bstackdemo in the URL with browserstack and reloads the page with the new address.
Read More: How to Run JavaScript Code in a Browser?
2. Using the URL API
For more structured control, use JavaScript’s URL object. This lets you target specific URL parts, like the domain, pathname, or query parameters, without affecting the rest.
const url = new URL(location.href); url.hostname = 'browserstack.com'; location.href = url.toString();
In this example, only the domain changes to browserstack.com. All other parts of the URL (like path and query parameters) stay the same.
When to Use Requestly vs JavaScript
Requestly offers a faster, no-code way to modify parts of a URL directly in the browser. It works well for quick testing and debugging and can be used by anyone, regardless of coding experience. JavaScript is better suited for changes that must be embedded into application logic or automated test scripts.
Here’s when each method makes more sense:
Scenario | Use Requestly When | Use JavaScript When |
---|---|---|
Environment switching | You need to test the same path across staging and production without editing the source code | URL changes are part of automated test flows or embedded logic in the frontend |
Non-developers need to modify URLs | The user modifying the URL is from QA, product, or design and prefers a no-code interface | The modification is handled by a developer writing custom scripts |
Previewing app behavior | You want a quick way to simulate different URLs, parameters, or domains for debugging or testing | The changes are tied to conditions like feature flags or dynamic config |
Temporary testing or debugging | The change is short-term and only needed during manual QA or troubleshooting | The change should persist in production or staging through code-level updates |
Reusable rules across sessions | You want to save and apply the same replacement rules multiple times or share them with teammates | You plan to reuse the logic in scripts, automation, or application code |
No access to source code | The codebase isn’t available or cannot be changed during testing | You’re actively developing or maintaining the application and can update the source |
Conclusion
When testing across environments, fixing broken links, or simulating different user scenarios, you often need to modify just a part of the URL without changing the rest.
Requestly simplifies this by letting you replace specific strings in the URL through a visual rule-based setup. It removes the need for code changes and speeds up testing, making it ideal for both technical and non-technical users.