demo · v140

Route Debugger

The chromestatus motivation: developers using the SW Static Routing API need timing visibility — which route matched, which source actually served the bytes, how long the match itself took. PerformanceResourceTiming gains matchedRoute, finalRouteSourceType, and routerMatchTime. Enter a URL and the debugger shows the same fields the new API returns.

routes (declared in SW)

resource timing — new fields

enter a URL and click match.

// service worker — declare routes
addEventListener("install", (event) => {
  event.addRoutes([
    { condition: { urlPattern: "/api/*"     }, source: "fetch-event" },
    { condition: { urlPattern: "/static/*"  }, source: { cacheName: "v1" } },
    { condition: { urlPattern: "/*.html"    }, source: "race-network-and-fetch-handler" },
  ]);
});

// page — read the new timing fields (Chrome 140+)
const entry = performance.getEntriesByType("resource").pop();
console.log({
  matchedRoute: entry.matchedCondition,          // { urlPattern: "/api/*" }
  finalSource:  entry.finalRouteSourceType,      // "fetch-event"
  routerMatch:  entry.workerRouterEvaluationStart,
});

see also