DevTools Tips

Categories: Supported by:

Edit and resend faulty network requests to debug them

When you're investigating a bug where the backend you connect to doesn't respond with the right things it's useful to tweak the requests and try again quickly. You can do this by changing your frontend code, and reloading the page, but DevTools can help you be faster by editing and resending those requests without making any frontend code changes. Here's how!

Using cURL

You can copy any request from the Network panel as a cURL command, then paste it in your terminal, edit it to your liking, and execute it!

This works in Firefox, Edge, and Chrome.

Screenshot of Chrome's copy as cURL feature and the corresponding command in the terminal

A similar approach is to use the Copy as Fetch option, and then use the copied code from the Console panel.

Using Firefox's Edit and Resend feature

Firefox has a built-in Edit and Resend feature that's very convenient because it doesn't require to switch to the terminal.

Screenshot of the Firefox's edit and resend feature

Using Edge's Network Console experiment

Edge has a built-in feature very similar to Firefox's Edit and Resend, but that goes further in that it allows you to create any number of requests to test over time, like Postman.

The feature is called Network Console and is an experiment for the time being, so use with caution.

Screenshot of the Edge's Network Console feature