How to Edit and Resend an API Request in Chrome DevTools
You want to change one parameter in an API call, but reproducing it means filling out the whole form again. What does Chrome let you do with the request it already captured?
- Use Edit and resend as fetch from a request's Network context menu.
- Edit the generated call in Console, then execute it to create a new request.
- Authentication and CORS still apply; local response overrides test a different thing.
Move the captured request into Console
To change an API input without repeating the form interaction, right-click its Network entry and choose Edit and resend as fetch. The generated call appears in Console. Edit it and press Enter to send a new request; choosing the menu item alone does not execute the call.
The October DevTools recap for Chrome 153 and 154 describes automatically focusing Console and placing the expression in its prompt. This removes the manual copy-and-paste step.
- Open Network and perform the original interaction once.
- Find the API request, right-click it, and choose the edit-and-resend command.
- Change the relevant URL, header or body field in Console, then press Enter.
- Open the new Network entry. Compare its status in Headers and its body in Response with the original.
The Network reference limits this workflow to fetchable requests. It creates another call rather than rewriting a completed transaction.
Change one input at a time
Suppose a development search endpoint returns 20 results, and you want to try a page size of 50. Keep the captured settings and change only that input. The following mapping applies the Fetch request structure to this debugging task.
| Input | Where to edit |
|---|---|
| GET search term or page number | The URL query string. |
| Page size in a JSON request | The corresponding body field; preserve valid JSON when the body is a string. |
| An application request header | The headers entry, subject to browser restrictions on forbidden headers. |
One changed input makes the response difference easier to attribute. Replaying a state-changing request can also repeat the operation, so use the intended development endpoint and data for tests such as order creation.
Copy as fetch and Local overrides serve different purposes
Copy → Copy as fetch puts request code on the clipboard. The newer editing path starts that work directly in Console.
Local overrides replace resources or response headers as seen by the browser. They are useful for testing a UI against a response the backend does not yet provide. They do not demonstrate that the server handled your edited input.
When comparing server behavior, check Sources → Overrides → Enable Local Overrides. An active override can otherwise make a local substitute look like the server's response.
Keep the execution context and authentication in view
Chrome's current documentation says the command preserves the request parameters and execution context. If you move the code manually, check the Console context selector: top means the main document, while an iframe has its own context.
Fetch includes credentials for same-origin requests by default. Changing the destination can change whether cookies are sent, and cross-origin calls remain subject to CORS. Switching to no-cors is not a way to read a blocked API response: the resulting opaque response does not expose its body to JavaScript.
Compare the edited call, the new response and the page executing it. Running the expression is only one part of reproducing the original request's conditions.