The missing piece in Chrome DevTools

Web development has come a long way since its inception, and one tool that has made a significant impact is Chrome DevTools. It has revolutionized how web developers, QAs, and backend developers develop, test & debug web apps. Today, you can’t imagine building web apps without access to Chrome Devtools. It provides complete visibility into what’s happening inside your web application, from the HTML DOM at any given point to the network requests your app fired.

Chrome DevTools also provides latency information for every API/network request, performance insights, step-by-step debugging for your source code, and an interactive console. If you are new to Chrome DevTools, here’s a beginner’s guide to Chrome DevTools features If you’re looking to learn advanced techniques, there’s a great video-based course ModernDevTools by Umar Hansa that you can buy.

However, it’s important to note that while Chrome DevTools offers everything you need to get visibility in your web app, it misses out on a lot of things like testing your code when an API gives 500, chrome doesn’t provide any way to override status code or even API responses.

Why do HTTP(s) modifications matter?

Having the ability to modify HTTP(s) requests/responses, frontend developers can reduce their dependency on the complex environment for testing their code or dependency on backend developers for API responses. Here are some of the things front-end developers can benefit from modifying HTTP(s) requests.

👉 Loading local JS/CSS bundles directly on production sites
By loading locally running JS/CSS code, web developers don’t need to set up the entire site on their machine. Sometimes it isn’t even possible especially when your code is deployed on your customers’ sites.

👉 Modifying Request & Response Headers
The ability to modify HTTP request & response headers unlocks numerous use cases like adding auth headers, testing content-security policy, debugging CORS issues, toggling feature flags, etc.

👉 Stress Testing of web apps
Stress Testing of web apps requires your code to be tested against all API scenarios like bad/invalid responses, empty responses, big API responses, API failures, API latencies, etc. Having the ability to simulate artificial delays or make APIs & third-party scripts fail can help you in testing a lot of negative scenarios. Here’s a good Reddit thread about different methods to simulate artificial delays.

There are many more use cases like returning a fixed response for an API, writing frontend code when API is not ready, sending some debug query parameters, overriding script content, and testing different version of an API but the conclusion is Chrome DevTools offers very limited capability and that’s why developers have to use inefficient methods to solve these use cases.

Introducing Requestly — Open Source HTTP(s) proxy to Intercept & Modify requests

Requestly is an open-source lightweight proxy available as a browser extension & desktop app that allows developers & QAs to Intercept & Modify network requests. Requestly is used by more than 180,000+ developers across 5000+ organizations around the globe.

⚡️ Requestly brings the power of Charles Proxy & Fiddler into the browser without worrying about proxy, SSL & VPN-related issues.

Requestly offers a complete suite of HTTP request & response modifications through different rule types e.g. URL rewrites, request payload, API response body, request & response headers, and many more using different rule types in the product.

So, once you install Requestly, just go to the rules interface, click on Create New Rule button & select the correct rule type for your use case. On top of this, Requestly rules are synced across multiple browsers & devices and you can collaborate with your teammates & customers in a shared workspace. Requestly also offers a cloud-hosted Mock Server for creating dummy mock endpoints and a file server for hosting static files like scripts & JSON files.

How Requestly works?

Requestly browser extension leverages chrome webRequest API (MV2) & chrome declarativeNetRequest API (MV3) to provide support for most of the modifications. To override API request payload & response body, Requestly overrides native XHR & fetch objects’ prototype, and registers its own interceptor.

Requestly desktop app runs a local server (aka proxy) on localhost:8171 and provides options to connect installed browsers & mobile devices to the local proxy. The proxy module is a simple node-based mitm proxy available at — https://github.com/requestly/requestly-proxy. A separate rule processor module applies the modifications defined by the user.

The complete source code is available on Github — https://github.com/requestly/requestly

Conclusion

With the continuously evolving web community, web developers also need modern tools to cater to their needs and make them more productive. Unfortunately, there are a few things that are not yet available in Chrome DevTools and that’s one of the reasons browser extensions exist. Requestly fills one gap in the Chrome DevTools which is modifying network requests & responses without the hassle of dealing with VPN, Proxy, or SSL issues.

Originally published at https://sachinjain.hashnode.dev.