v149 · Performance · demo

Route Source Visualizer

Side-by-side view of workerMatchedRouterSourceList and workerFinalRouterSourceList — the matched rule's intended source versus what actually served the response. Mismatches (cache miss → network fallback) are highlighted.

Checking support…
cache network fetch-event source mismatch
// workerMatchedRouterSourceList — what the rule said to use
// workerFinalRouterSourceList   — what was actually used
//
// They differ when:
//   • A 'cache' rule misses → browser falls back to 'network'
//   • A 'race-network-and-fetch-handler' resolves via one winner

for (const entry of performance.getEntriesByType('resource')) {
  const matched = entry.workerMatchedRouterSourceList ?? [];
  const final   = entry.workerFinalRouterSourceList   ?? [];
  const mismatch = JSON.stringify(matched) !== JSON.stringify(final);

  if (mismatch) {
    console.warn('Cache miss or fallback:', entry.name,
      '→ matched:', matched, 'final:', final);
  }
}

see also