As developers, we constantly strive to improve our workflows, especially when it comes to debugging web applications. Recently, I discovered a Chrome feature that has been a real game-changer, saving me tons of hours in the debugging process. In this article, I’ll walk you through how Chrome’s network overrides feature can transform the way you handle debugging.

If you like to watch instead of reading. You can check out my youtube video about this:

The common debugging dilemma We’ve all been there: you receive an urgent call about a bug on your production environment that needs immediate fixing. The first step is to replicate the issue locally to understand what’s going wrong. However, if you have multiple environments (development, staging, production), the data differs across each, complicating the debugging process.

Connecting directly to the production database is rarely a good idea due to security concerns and the risk of inadvertently affecting live data. So, you proceed by trying to replicate the user behavior in your local environment. But what happens when you hit a roadblock and can’t reproduce the issue? It’s frustrating, and often, the bug might get ignored or marked as non-reproducible.

Enter chrome network overrides Chrome’s network overrides feature provides a solution to this problem. It allows you to capture the network requests made by the user experiencing the issue and replicate the exact same requests in your local environment. This way, you can reproduce the issue precisely as it occurs in production, making your debugging process much more efficient.

How to use chrome network overrides Here’s a step-by-step guide on how to leverage this powerful feature:

Capture the Network Request:

— Open Chrome DevTools on the problematic page. — Navigate to the Network tab. — Perform the actions that lead to the bug. — Right-click on the request you want to capture and select “Copy” > “Copy as cURL”. Reproduce Locally: — Open your local environment and the Chrome DevTools. — Go to the Network tab and click on the “Overrides” button. — Paste the cURL request into the overrides section. Simulate the Request: — The overridden request will now mimic the production request in your local environment. — Perform the debugging as you would normally, but now with the exact production data and conditions.

Benefits of using network overrides

Accuracy: Since you’re using the exact same network request from production, the chances of replicating the issue accurately are significantly higher. Efficiency: Saves time that would otherwise be spent trying to guess and reproduce the issue with different data. Safety: No need to connect to the production database directly, reducing the risk of data corruption or breaches. Practical example Let’s say a user reports an issue with a form submission that fails only in production. By capturing the network request of that submission and using network overrides, you can replay the request in your local environment. You’ll see the same data and responses, making it easier to pinpoint where the issue lies, whether it’s a backend error, a data inconsistency, or a client-side problem.

Conclusion

Chrome’s network overrides feature is a powerful tool that can save you hours of debugging time. By accurately replicating production issues in your local environment, you can address bugs more effectively and efficiently. Next time you face a stubborn issue that’s hard to reproduce, give network overrides a try — it might just be the trick you need.

Happy debugging!