Use (experimental) CSS Overview in Chrome to get an overview of CSS used on a site

Style console.log messages with CSS

Use Logpoints to log messages without cluttering up your code with console.log() statments

Run a Lighthouse audit in Chrome Devtools

Choose accessible colors for text using Chrome DevTools Color Picker contrast ratio score

Use Chrome DevTools console utilities to make debugging easier

Force a DOM element state in Chrome DevTools

Copy a network request as fetch or cURL with Chrome DevTools

Chrome DevTools tips & tricks

Sometimes you encounter a backend issue which seems to occur only on your computer, with a very specific sets of headers, cookies etc. Because of that, it's useful to have a way of easily sharing network requests sent by your browser with other members of your team.

In this quick lesson we're going to learn how to copy a network request as `fetch` (so we can test it in the Chrome DevTools console/in a node.js script) or as cURL (so we can test it in a terminal).

Tomasz Łakomy: [0:00] Suppose you're working on an app that needs to communicate with the backend. For instance, as an example, I'm going to use the source API. If I send a request, everything works fine, but what if, for instance, I have an issue that can be only reproduced on my computer?

[0:14] I would like to be able to somehow share this network requests with other developers for all of us to be able to debug the issue, because what happens sometimes in production environments is that a different combination of headers and cookies can cause some very weird issues, and we would like to be able to somehow share this request with others, but how can we do that?

[0:34] Luckily, with DevTools, we can right-click on the request and select Copy. There are multiple ways of copying a network request. We can copy as fetch, or we can copy as cURL.

[0:46] I'm going to copy as fetch and paste it over here, and we can see an entire fetch call, which was created for us by DevTools. We can see that I was sending a GET request to this endpoint with those headers, and we can also test this. I'm going to add a then, and we're going to use the response.json. Then, we are going to console.log the response.

[1:07] If I hit Enter, we're going to see that the promise was pending, and we get the data about Luke Skywalker because this is the Star Wars API after all.

[1:16] Maybe our backend engineers are not going to use the fetch call from JavaScript. Instead, we can go ahead, copy again, and copy this request as cURL. If I copy that, and go to my terminal, I can paste that over here. If I hit Enter, this request is going to be sent. We, again, get data about Luke Skywalker.

Course

Chrome DevTools tips & tricks

Copy a network request as fetch or cURL with Chrome DevTools

Share this video with your friends