DEV Community

Muhammad Fahmi Rasyid
Muhammad Fahmi Rasyid

Posted on

Test Frontend Changes with Browser (Using Chromium Overrides)

#webdev #productivity #javascript #programming

I used to spend way too much time waiting for the backend team.
If I needed to test what happens when an API returns something different - or worse, an error - I had two options:

  1. Ask the backend team to change their response.
  2. Spin up a mock server and wire everything myself.

Both were slow.

Then I discovered something hidden in DevTools: Network Overrides.
It felt like flipping a secret switch. Suddenly I could control API responses without touching the backend. Here's how it went down.

Step 1: Opening the Toolbox

I right clicked on the page → Inspect.
Instead of going to the Console, I switched over to the Sources panel.

Sources Panel with Overrides

On the left, there was a tab called Overrides just sitting there quietly.

Step 2: Creating My Sandbox

Clicking Overrides, DevTools asked me to choose a folder.
This folder is where my fake responses would live.

I picked an empty folder, allowed Chrome to use it, and suddenly had my little override sandbox ready.

Step 3: Grabbing a Response

Next, I went to the Network tab, refreshed the page, and spotted the request I wanted: /api/config.

Right-click → Save for overrides.
DevTools copied the real response into my local folder.

Step 4: Editing the Rules

I opened the file under Sources > Overrides and changed a few values.
Something like turning "featureEnabled": false into "featureEnabled": true.

Step 5: Refresh & Smile

I refreshed the page.
The app now behaved as if the backend really returned my modified response.

In the Network tab, a small icon appeared beside the request, showing it was overridden.

Step 6: Turning It Off

When I was finished, I just unchecked Enable Local Overrides in the Overrides panel.
Everything went back to normal server responses.

Pro Tips: Mocking Errors & Timeouts

Once I got comfortable, I started pushing things further:

  • Mock an error response: Edit the override file and replace its body with an error JSON, e.g. 
  { "error": "Internal Server Error" }
Enter fullscreen mode Exit fullscreen mode

Then in the headers, change 200 OK to 500 Internal Server Error.

  • Simulate a timeout: In the Network tab, right-click the request and select Block request URL. Now your app behaves as if the server never responded. Great for testing loaders and retries.

Closing Thoughts

Network Overrides turned my browser into a mini-mock server.
No more waiting for backend changes, no more begging teammates for test data.
Just fast, local experiments right inside DevTools.

Next time you're stuck waiting on an API change, give Overrides a try - it might save you hours.

Top comments (0)