/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(166) Protocol Monitor Instant Console (168)

Chrome DevTools: Modernise your JavaScript codebase with DevTools

22nd March 2018
Modernise your JavaScript codebase with DevTools

The new 'Copy as Fetch' feature extends the Network Panel context menu. You can for example, right click on a network resource, and copy as cURL:

curl 'https://umaar.com/' -H 'authority: umaar.com'...

However, that command belongs in your terminal, rather than your codebase. Copy as Fetch provides Fetch API compatible syntax in JavaScript like the following:

fetch("https://umaar.com/", {
    "credentials": "include",
    "headers": {},
    "referrerPolicy": "no-referrer-when-downgrade",
    "body": null,
    "method": "GET",
    "mode": "cors"
});

This enables you to replace existing Ajax calls in your codebase with the Fetch API. If you'd like to validate the Fetch API call from your clipboard, you can paste it in the console panel and prefix it with a top-level await.

This feature is in Canary.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.