如何批量获取页面CSS类与对应源样式表的映射关系？

直接利用Chrome DevTools原生能力（无需手动逐个检查） #

Chrome其实提供了更高效的方式，不用自己写复杂脚本遍历document.styleSheets：

1. 用Coverage工具定位已使用的CSS规则

   • 打开Chrome DevTools（F12），切换到Coverage面板（找不到的话按Ctrl+Shift+P/Cmd+Shift+P搜索"Coverage"）
   • 点击录制按钮（圆形红点），刷新页面后停止录制，就能看到所有加载的CSS文件，以及其中已使用/未使用的规则
   • 点击任意CSS文件，右侧会高亮已使用的规则，每个规则对应的类名和源文件一目了然

2. 通过Console执行脚本快速生成结构化映射
   如果需要直接导出类与样式表的映射列表，可以在Console里运行以下脚本，它会自动收集页面已使用的类并关联对应源文件：

   // 收集页面所有已使用的类名
   const usedClasses = new Set();
   document.querySelectorAll('*').forEach(el => {
     el.classList.forEach(cls => usedClasses.add(cls));
   });
   
   // 遍历样式表，匹配类名并生成映射
   const classToSheetMap = {};
   [...document.styleSheets].forEach(sheet => {
     try {
       [...sheet.cssRules].forEach(rule => {
         if (rule.type === CSSRule.STYLE_RULE) {
           // 提取规则中的所有类选择器
           const classSelectors = rule.selectorText.match(/\.[a-zA-Z0-9_-]+/g) || [];
           classSelectors.forEach(sel => {
             const className = sel.slice(1);
             if (usedClasses.has(className)) {
               if (!classToSheetMap[className]) {
                 classToSheetMap[className] = [];
               }
               // 避免重复添加同一个样式表
               if (!classToSheetMap[className].includes(sheet.href || 'inline stylesheet')) {
                 classToSheetMap[className].push(sheet.href || 'inline stylesheet');
               }
             }
           });
         }
       });
     } catch (e) {
       // 跨域样式表受同源策略限制，直接跳过
       console.log('无法访问跨域样式表:', sheet.href);
     }
   });
   
   // 输出最终映射结果
   console.log('已使用CSS类与源样式表映射:', classToSheetMap);
   

   注：脚本会跳过跨域样式表，但本地和同域的样式表都能正常获取关联信息。

关于Chrome是否有直接API的说明 #

Chrome DevTools内部确实维护着类与样式表的关联信息，但并没有对外提供直接调用的API，上面的脚本是最接近"直接获取"的方式——它模拟了DevTools内部的规则匹配逻辑，同时只聚焦页面实际使用的类。

内容的提问来源于stack exchange，提问作者koriander