v158 · cssom · inspection

Import tree inspector

Every page carries an import tree — this one imports Google Fonts from the shared design system before you add anything. The inspector walks document.styleSheets recursively and tables every CSSImportRule it finds: href, media, layerName, supportsText, and what styleSheet returned, including the cross-origin case where the sheet object exists but reading its rules throws a real SecurityError.

The nullable styleSheet ships enabled by default in Chrome 158 (runtime feature CSSImportRuleStyleSheetNullable; no flag exists on earlier builds — see the feature overview). On older Chromium the failed and never-fetched rows below read differently; the table shows whatever this browser truly returns.

Add test imports, then walk the tree

Every stylesheet and @import rule reachable from this document
sheet / rule media layerName supportsText styleSheet returned
Press “Walk document.styleSheets now”.

code path

function walk(sheet, depth, out) {
  let rules;
  try { rules = sheet.cssRules; }               // cross-origin sheets throw
  catch (e) { out.push({ depth, blocked: e.name }); return; }
  for (const rule of rules) {
    if (!(rule instanceof CSSImportRule)) continue;
    out.push({
      depth,
      href: rule.href,
      media: rule.media.mediaText,
      layerName: rule.layerName,        // null when not layered
      supportsText: rule.supportsText,  // null when no condition
      sheet: rule.styleSheet,           // CSSStyleSheet or (158+) null
    });
    if (rule.styleSheet) walk(rule.styleSheet, depth + 1, out);
  }
}
for (const sheet of document.styleSheets) walk(sheet, 0, out);

see also