demo · v149

Timing Field Debugger

A practical debugger for workerMatchedRouterSourceList and workerFinalRouterSourceList. Select a routing scenario, see the exact PerformanceResourceTiming entry shape with the new fields highlighted, and understand what each matched/final combination means at a glance.

Routing scenarios — click to inspect

PerformanceResourceTiming entry

Interpretation

All scenarios at a glance

Scenario matched final Meaning Outcome 
// Reading the new fields via PerformanceObserver
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntriesByType('resource')) {
    const matched = entry.workerMatchedRouterSourceList; // e.g. ['cache']
    const final   = entry.workerFinalRouterSourceList;   // e.g. ['network']

    if (matched[0] === 'cache' && final[0] === 'cache') {
      console.log('Cache HIT — SW routing working');
    } else if (matched[0] === 'cache' && final[0] === 'network') {
      console.log('Cache MISS → fallback to network');
    } else if (matched[0] === 'fetch-event') {
      console.log('SW fetch handler handled this request');
    } else if (!matched.length) {
      console.log('No SW route matched — bypassed');
    }
  }
});
observer.observe({ type: 'resource', buffered: true });

see also