Mocking API Through Browser DevTools

Sometimes, as a test engineer, it is time to examine new features of standard, seemingly familiar tools.

Andrey Enin
4 min readOct 9, 2024

For decades, to mock API responses for UI testing, QA engineers used special proxies and interceptors like Charles, Fiddler, Proxyman, Requestly, or HTTP Toolkit; even Postman has acquired similar functionality.

Under «mocking» API responses, I figuratively mean all kinds of overriding of different parts of HTTP requests and responses. This is a very important and useful tool by itself, which helps to test, prototype, and develop the frontend.

Today, browsers have started to provide the ability to override HTTP responses out of the box, straight from DevTools, without any third-party extensions. This is very convenient, especially if you do not have the opportunity or desire to install and deal with a new tool for a one-time occasion.

Currently, only Chrome (and other Chromium-based browsers) and Safari have such a feature, but I hope Firefox will implement it someday, too. Chrome has started to support overrides since the 117 version, which was released in September 2023 — more than a year ago, but I was surprised when a vast number of colleagues around did not know about this feature. And Safari (WebKit) has been supporting overriding since around 2020!

I will give an example of overriding HTTP response bodies in both cases: Chrome DevTools and Safari Web Inspector. I took the OpenWeather website and its API as a sample because their client-server interaction is very clear.

Chrome

Open DevTools and go to the Network tab. Choose a resource you want to override, right-click it, and select [Override content].

Chrome 01. [Override content]
Chrome 01. [Override content]

Chrome will first ask you to select a directory to store override files.

Chrome 02. Select folder
Chrome 02. Select folder

After you grant access to it, Chrome will redirect you to the Sources tab.

Chrome 03. DevTools Sources tab
Chrome 03. DevTools Sources tab

Here, you can edit the JSON body just in the DevTools!

After the page refresh, the response body of the resource will be overwritten by the new data.

Chrome 04. Enable Local Overrides
Chrome 04. Enable Local Overrides

In the screenshot above, you can see the implausible weather values that turned out to be overwritten by the new data. This data is saved in a file in the selected folder.

Chrome DevTools documentation: Override web content and HTTP response headers locally.

Safari

Open Web Inspector and go to the Sources tab. Click [+] and select [Local Override…].

Chrome 01. [Override content]
Safari 01. [Local Override…]

In the Local Overrides section, you can fill the popover’s inputs with the corresponding values to override the required HTTP resource. In the Type field, choose Resonse > [File] to override the response’s body.

Safari 02. Local Overrides
Safari 02. Local Overrides

In my experience, filling all the fields correctly from scratch is quite tricky, and the difficulty varies from site to site. The easiest way to make an override rule for response is to find a required HTTP resource and choose [Create Response Local Override].

Safari 03. [Create Response Local Override]
Safari 03. [Create Response Local Override]

It creates a fully prefilled popover to override the response. In the last step, you need to select a file where you saved the new response body in advance.

Safari 04. Response local override popover
Safari 04. Response local override popover

After the page refresh, the response body of the resource will be overwritten by the chosen file’s contents.

Safari 05. This resource came from a local override

In the screenshot above, you can see the implausible weather values that turned out to be overwritten from the file.

WebKit documentation: Local Overrides.

--

--

Andrey Enin
Andrey Enin

Written by Andrey Enin

Quality assurance engineer: I’m testing web applications, APIs and do automation testing.