Debugging Preloaded Resources

Provide examples of tools and techniques for debugging issues with preloaded resources, such as inspecting network requests in browser developer tools and leveraging TanStack Router's logging features.

console.log('Preloaded resources:', window.performance.getEntriesByType('resource'));

This line of JavaScript uses the Performance Web API to log all preloaded resources. It retrieves and displays details about each resource that was fetched over the network, including those that were preloaded.

if(window.performance) {
  window.addEventListener('load', function() {
    var resources = window.performance.getEntriesByType('resource');
    resources.forEach(function(resource) {
      if(resource.initiatorType === 'link' && resource.name.includes('preload')) {
        console.log('Preloaded resource:', resource.name);
      }
    });
  });
}

This snippet listens for the window's load event and then iterates over all network requests, filtering for resources that were initiated by a link element with a 'preload' relation. It logs the names of these preloaded resources.

// To use with TanStack Router for debugging routes
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  // Define your routes here
], {
  // Enable logging feature
  enableLogger: true
});

function App() {
  return <RouterProvider router={router} />;
}

This code snippet demonstrates how to enable logging in TanStack Router (previously React Router). It creates a router instance with the 'enableLogger' option set to true for debugging route navigation and preloaded resources.