Goodbye Replay XHR: Chrome DevTools Introduces Resend

From Replay XHR to Resend: A Significant Update to Developer Tools

Chrome DevTools' Network panel has undergone a seemingly minor yet far-reaching change. According to the latest episode of "What's New in DevTools" on the Chrome for Developers official YouTube channel, the "Replay XHR" feature that has accompanied developers for nearly a decade has officially retired, replaced by a brand-new feature called "Resend."

For front-end engineers who have long used Chrome DevTools, Replay XHR is nothing new. This button allows developers to resend already-captured XHR requests directly from the Network panel. However, as the Fetch API has gradually become the mainstream way to build web applications over the past decade, Replay XHR's limitations have become increasingly apparent—it was fundamentally a tool designed for the XHR era, and it struggles when faced with modern Fetch requests.

XHR (XMLHttpRequest) is an early browser-provided JavaScript API for making asynchronous HTTP requests, and it was once the foundation of AJAX technology. It creates instances via new XMLHttpRequest(), initiates requests using methods like open() and send(), and handles responses through onreadystatechange or onload callbacks. XHR's API design is relatively cumbersome, requiring manual handling of status codes, event listeners, and error catching, and it offers poor support for modern async patterns like Promises and async/await.

Fetch API is a next-generation network request interface standardized around 2015 alongside Service Worker. Designed around Promises, its syntax is more concise and intuitive, with a call form of fetch(url, options). It unifies the abstraction of requests and responses (Request/Response objects), natively supports streaming reads, has clear CORS semantics, and works seamlessly with async/await—making it the preferred request method for modern front-end frameworks and libraries. Precisely because of this, Replay XHR, designed for the XHR era, cannot correctly reproduce Fetch requests, which is the fundamental reason it has been replaced by Resend.

What Changes Does Resend Bring

The traditional API debugging workflow is quite tedious: developers need to find the target request in the Network panel, right-click, select "Copy as Fetch," then switch to the Console panel to paste the code, and only then can they execute the request test. Throughout this process, any manual operation can introduce errors, especially when dealing with complex request headers or authentication information.

Resend completely simplifies this workflow. Now, developers simply select any request in the Network panel and click the "Resend" button to instantly resend it. More crucially, this feature perfectly preserves all of the original request's headers, cookies, and payload information, ensuring consistency between the resent request and the original. This is especially valuable for debugging API endpoints that require authentication—developers no longer need to manually handle tokens or session information.

Copy as Fetch is a long-standing right-click menu feature in the Chrome DevTools Network panel that automatically converts a selected network request into an equivalent piece of JavaScript fetch() code and copies it to the clipboard. Developers then need to switch to the Console panel, paste, and press Enter to complete a request resend. While flexible, this approach has clear pain points: manually switching panels adds operational overhead; the pasted code may require additional adjustments due to context (such as variable scope or relative URLs); and for requests containing complex headers, cookies, or auth tokens, errors are easy to introduce during copying or modification. Resend compresses the four steps of "copy—switch—paste—execute" into a single click, and its value lies precisely in directly optimizing this kind of high-frequency debugging scenario.

Edit and Resend: A More Flexible Debugging Approach

In addition to direct resending, Resend also offers an "Edit and Resend as Fetch" option. When developers need to adjust request parameters before sending, they can use this entry point to convert the request into Fetch code, modify it in the Console panel, and then execute.

This design accommodates two common scenarios: quickly resending to verify API stability, and needing to fine-tune parameters for deeper debugging. Compared to the previous single "Copy as Fetch" approach, Resend provides a more intuitive operational path.

Impact on the Development Workflow

The introduction of Resend reflects the Chrome DevTools team's response to modern web development practices. The Fetch API has become the de facto standard, and updating the toolchain is an acknowledgment of this reality. For front-end developers who need to debug APIs frequently in their daily work, this seemingly simple feature improvement can actually save a significant amount of time—the reduced operational steps and improved request fidelity will accumulate into considerable efficiency gains over long-term use.

Developers need to ensure their Chrome browser is kept up to date to get the Resend feature and other enhancements to the Network panel. The Chrome for Developers channel provides the complete episode content, and interested developers can go watch the detailed demonstration.

One-line Summary

Chrome DevTools replaces the nearly decade-old Replay XHR with Resend, simplifying the API debugging workflow.

Paragraph Summary

Chrome DevTools' Network panel has officially retired the nearly decade-old Replay XHR feature, replacing it with the brand-new Resend. Behind this change is the fact that the Fetch API has become mainstream in modern web development, while Replay XHR was fundamentally a tool designed for the XHR era and cannot adapt to Fetch requests. Resend supports one-click resending of any request in the Network panel while fully preserving the original headers, cookies, and payload, making it especially suitable for debugging endpoints that require authentication information. It also offers an Edit and Resend as Fetch option, which converts the request into Fetch code so parameters can be modified in the Console before execution. Compared to the cumbersome traditional workflow of "Copy as Fetch → switch to Console → paste and execute," Resend significantly reduces operational overhead and improves request fidelity. Developers only need to keep Chrome up to date to use it.