Dev Tips

Chrome DevTools: Modernize your JavaScript codebase

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.

If you have any troubles viewing this animated gif, check out: umaar.com/dev-tips/167-copy-as-fetch

Sponsor
Project management is better when it's visual: monday.com is the next generation of visual tools, built specifically for developers. See what everyone on your team is working on in a single glance.