v148 · Demo 1

Live Resource Inspector

Watch every sub-resource load and see its contentType in real time via PerformanceObserver.

⚠ PerformanceResourceTiming.contentType is not available in this browser. Try Chrome 148+.

✓ PerformanceResourceTiming.contentType is available in this browser.

Observing resource loads — existing entries loaded below.

contentType	resource name	duration ms	size bytes

No resources captured yet — trigger a fetch above.

how it works

// Observe all future resource loads
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.contentType);
    // e.g. "https://…/script.js"  →  "text/javascript"
    //      "https://…/data.json" →  "application/json"
    //      "https://…/font.woff2" → "font/woff2"
  }
});
observer.observe({ type: 'resource', buffered: true });

// Access existing entries
const entries = performance.getEntriesByType('resource');
for (const e of entries) {
  console.log(e.contentType); // ← new in Chrome 148
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗