如何获取元素及其子元素的全部CSS（含响应式样式）

我太懂这种 frustration 了！之前用SnappSnippet、CssSteal这些工具的时候，也碰到过一模一样的问题——它们只肯给当前视口下生效的CSS，把@media响应式规则全给丢了，完全没法拿到完整的样式文件。既然你已经用cssRules解决了问题，我来补充一下更完整的实现细节，再给你推荐几个靠谱的Chrome扩展备选：

一、用JavaScript手动实现（基于cssRules的完整方案） #

浏览器的CSSStyleSheet对象自带的cssRules属性（旧IE用rules）可以直接访问样式表里的所有规则，包括嵌套的@media块。这里给个实用的代码片段，能遍历页面所有样式表，把完整的CSS（含响应式规则）提取出来：

function getFullResponsiveCSS() {
  let fullCSS = '';
  // 遍历页面所有样式表
  document.styleSheets.forEach(sheet => {
    try {
      // 跨域样式表会触发同源策略限制，需要捕获异常
      Array.from(sheet.cssRules).forEach(rule => {
        // 不管是普通规则还是@media规则，直接追加完整的cssText
        fullCSS += rule.cssText + '\n\n';
      });
    } catch (err) {
      console.warn(`跳过跨域样式表：${sheet.href}，错误信息：${err.message}`);
    }
  });
  return fullCSS;
}

// 使用方式：打开浏览器控制台（F12），粘贴执行，然后复制输出的结果
console.log(getFullResponsiveCSS());

小提示：如果页面有第三方CDN的跨域样式表，浏览器会阻止我们读取它的cssRules，这时候要么忽略这些样式，要么通过本地代理页面的方式绕开同源限制（不过大部分站内样式都能正常读取）。

二、推荐支持完整响应式CSS抓取的Chrome扩展 #

如果不想自己写代码，这几个工具亲测能完美抓取包含@media规则的全部CSS：

• CSS Peeper：不仅能导出完整的CSS，还能一键提取页面的颜色、字体、间距等设计资源，响应式规则一个都不会漏
• Stylebot：除了抓取完整样式，还支持实时修改页面样式调试，导出的CSS包含所有断点的响应式规则
• Full CSS Export：专门做CSS导出的轻量工具，界面简洁，核心功能就是把所有样式表（包括响应式部分）合并成一个完整的CSS文件导出

你已经用cssRules解决了问题，希望上面的代码能帮你优化实现，或者这些扩展能在你不想写代码的时候派上用场~

内容的提问来源于stack exchange，提问作者jack j.