Network Tab

The Network tab traces all the network requests that are happening in your application.

It shows you all the requests in real-time, with the ability to see if they are aborted, if they are cached, and if they are successful or not.

Clicking on a request will show you detailed information about that request. Additionally, you can shuffle through the requests with your keyboard. To shuffle through the requests, press the ← and → keys.

Request types

There are six types of data handling exports in react-router-devtools:

• client-loader - A client-loader is a request that is initiated by the client and is used to load data for a route.
• client-action - A client-action is a request that is initiated by the client and is used to submit data to a route.
• loader - A loader is a request that is initiated by the server and is used to load data for a route.
• action - An action is a request that is initiated by the server and is used to submit data to a route.
• middleware - A middleware is run before and after all your loaders on the server
• client-middleware - A client-middleware is run before and after all your client-loaders on the client

Filtering

You can filter the requests by their type by clicking on the filter buttons at the top of the network tab. You can also filter by route as well

Request info

Clicking on any request name will show you detailed information about that request. This includes the request's name, the request's method, the request's status, the request's start time, the request's end time, the request's type, the request's data, the request's headers, and if the request's cached.

Aborted requests

If a request is aborted, it will be shown in red. This means that the request was aborted by the user.