Skip to content

01-active-page-tab.mdx

Latest commit

 

History

History
91 lines (58 loc) · 3.73 KB

01-active-page-tab.mdx

File metadata and controls

91 lines (58 loc) · 3.73 KB
title Active Page Tab
summary The Active Page tab in dev tools shows route boundaries, active loaders, loader data, route params, server info, handles, and a timeline of navigation events. It also supports revalidation, live metrics, and quick links to open loader files in VS Code.
description Detailed overview of all features on the 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.

This feature is only available in the development mode because it used react dev tools to find the `` component.

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.

The loader type is determined by the routing convention. - `purple` - represents the root.tsx file - `blue` - represents a pathless layout file - `green` - represents a normal route file, whether index or not

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.

When keys are deferred on the server, the data will hot swap when the key is resolved on the client.

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.

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 30 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
This only happens for events that change the state of the app, if there is a client-side navigation to a new location that has no loaders nothing will happen because the state has remained idle.

Clearing the timeline

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