DevTools: Convert network requests to code, or even to a terminal command

Introduction

DevTools can help convert requests that are happening over the network, into JavaScript fetch() code!

To try this out

1. Go to https://dinoipsum.com/ and click 'Give me dinos'.
2. Go to the Network Panel in DevTools, and make sure the panel is recording.
3. In the web page, click 'Give me dinos' again, notice how the resource appears in the Network panel.
4. Right click on that resource and select Copy as fetch.
5. You can now paste from your clipboard, into your JavaScript code. For example, the code might look like this:

Note: Extra HTTP request headers have been removed in the following snippet. Normally, DevTools preserves the original HTTP request headers in the fetch() code.

const response = await fetch(
    "https://dinoipsum.com/api?paragraphs=2&words=3&format=text"
);
const text = await response.text();
document.querySelector("p").innerText = text;

Pro tip

You can also copy as cURL, where you get a terminal command in your clipboard:

curl 'https://dinoipsum.com/api?paragraphs=2&words=3&format=text'

To use this, follow the previous steps but select Copy as cURL when you right click on the network resource.

This can be especially helpful when submitting bug reports.

Browser Support

This feature is supported in Firefox, Edge, Chrome and Safari.