askvity

How Do I Change the JSON Response in Chrome?

Published in Chrome DevTools 3 mins read

You can change a JSON response in Chrome using the built-in Developer Tools' Overrides feature. This allows you to intercept and modify network responses locally without changing server-side code.

This powerful capability is especially useful for frontend developers needing to test how their UI handles different data scenarios, error responses, or missing information without relying on backend changes or staging environments.

Steps to Override a JSON Response in Chrome

Changing a JSON response involves setting up a local overrides folder and then selecting the specific response you want to modify in the Network tab. Here's a breakdown:

1. Open Chrome Developer Tools

  • Open the website or web application you are working with in Chrome.
  • Open DevTools by right-clicking anywhere on the page and selecting Inspect, or by pressing F12 (Windows/Linux) or Option + Command + I (Mac).

2. Navigate to the Network Tab

  • Click on the Network tab within the DevTools window.
  • You might need to refresh the page (F5 or Cmd+R) to see the network requests populate in the tab.

3. Find the JSON Response

  • Observe the list of network requests as the page loads or as you interact with the application.
  • Identify the specific request that returns the JSON response you want to modify. You can filter requests by type (e.g., XHR/Fetch) or search for the URL.

4. Initiate Content Override

  • Right-click on the identified network request that contains the JSON response.
  • From the context menu, select Override content.

5. Set Up Overrides Folder (if not already done)

  • The first time you use overrides, DevTools will prompt you to select a local folder where the overridden files will be stored.
  • Click Select Folder for Overrides.
  • Choose an empty folder on your computer.
  • Chrome will ask for permission to access this folder. Click Allow.

6. Edit the JSON Content

  • Once overrides are set up and you've selected "Override content" for a request, Chrome will:
    • Save the original response body (your JSON) to the chosen local folder, mimicking the server's directory structure for that request URL.
    • Open the saved JSON file in the Sources panel within DevTools.
  • In the Sources panel, you can now edit the JSON data as you wish.

7. Save Your Changes

  • Save the changes made to the JSON file in the Sources panel. You can do this by pressing Ctrl + S (Windows/Linux) or Cmd + S (Mac).

8. Reload the Page

  • Reload the page (F5 or Cmd+R).
  • Chrome will now intercept the network request for which you created an override and serve your modified JSON file from your local overrides folder instead of fetching the original response from the server.

You will see a purple dot next to the request in the Network tab, indicating that an override is active for it.

Important Considerations:

  • Overrides remain active until you disable them or remove the overridden file from your local folder.
  • This technique only changes the response locally in your browser; it does not affect other users or the actual server data.

By following these steps, you can effectively manipulate JSON responses directly within Chrome DevTools for testing and development purposes.

Related Articles