Active Page Tab

The Active Page tab is the first tab that appears when you open up the dev tools panel. It contains an overview of all active loaders on the current page and detailed information about each loader.

​

Route boundaries

The first feature we will go over is the route boundaries. This feature shows you the current route boundaries on the actual page. This is useful for debugging and testing purposes. It finds the <Outlet /> component in the route and highlights it with a gradient background that can be set in the settings.

​

Loader list

The loader list is a list of all active loaders on the current page. It shows the url segment of the loader, the loader type and the loader file.

​

Open in VS code

Each segment has an open in VS code button that opens the loader file in VS code. This is useful for quick navigation to the loader file.

​

Loader data

Each segment has a loader data JSON object that contains all the information returned by the loader of that segment.

If you open the dev tools on this page and look at the /docs/main segment you will see the loader data object which contains metadata, tag, serverData, deferredServerData and key properties.

This part will contain everything returned from the server and it will be hot swapped if the data changes.

​

Route params

The route params section contains all the route params for the current segment.

This will contain all the wildcard params currently available on this route.

If you open up the dev tools, you will be able to see that tag and slug are both in the route params.

​

Server info

The server info section contains all the server information for the current segment, including:

• loaderTriggerCount - the number of times the loader has been triggered (updates in real-time)
• actionTriggerCount - the number of times the action has been triggered (updates in real-time)
• lowestExecutionTime - the lowest execution time of the loader (updates in real-time)
• highestExecutionTime - the highest execution time of the loader (updates in real-time)
• averageExecutionTime - the average execution time of the loader (updates in real-time)
• lastLoaderInfo - the last loader info object (updates in real-time), includes execution time, request headers and response headers.
• lastActionInfo - the last action info object (updates in real-time), includes execution time, request headers and response headers.
• loaderCalls - an array of loaderInfo objects ordered from most recent to least recent (updates in real-time)
• actionCalls - an array of actionInfo objects ordered from most recent to least recent (updates in real-time)

​

handles

The handles section contains all the handles for the current segment.

This will contain all the handles currently available on this route.

React Router allows you to export a custom handle export which can be anything, it will be shown here if it is exported.

​

Revalidation

There is a Revalidate button that allows you to revalidate all the loaders on the page.

​

Timeline

The timeline section on the right contains useful information on navigation and submission events in your application.

Every time there is a navigation or submission event, a new entry will be added to the timeline on the top.

It is limited to 50 entries and will remove the oldest entry when the limit is reached.

The timeline will contain the following information for each event:

• type - the type of event (navigation or submission, fetcher or normal)
• method - the method of the event (GET, POST, PUT, DELETE)
• url - the url of the event
• data sent - the data sent in the event
• response - the response of the event

​

Clearing the timeline

You can clear the timeline by clicking the clear button at the top right of the timeline.