如何将 CSS 复制到 Chrome 中的另一个选项卡？答案

【问题标题】：How to copy the CSS to another tab in Chrome?如何将 CSS 复制到 Chrome 中的另一个选项卡？
【发布时间】：2012-09-24 17:24:54
【问题描述】：

在 Chrome 中，我可以使用 开发者工具 窗口通过查询escape(document.documentElement.innerHTML) 将实时网页的 HTML 从一个标签复制到另一个标签，然后将结果复制粘贴到 另一个选项卡的开发者工具窗口，在那里创建一个新元素，并设置其.innerHTML。但是，这不会复制 CSS 或事件处理程序。我不关心 JavaScript 和事件处理程序，但我想复制 HTML 和 CSS。什么是最简单但最忠实的方法？我对 Google Chrome 最感兴趣，但我会考虑在 Firefox 中也可以使用的解决方案。

我知道我可以遍历 <link ...> 和 <style ...> 标记并复制它们，但这有点间接。我想复制页面实际 CSS 的连接的最终版本。

【问题讨论】：

标签： html css google-chrome copy google-chrome-devtools

【解决方案1】：

您可以选择原始页面中的元素，然后在“样式”窗格中拖动选择并复制其所有 CSS，然后将其粘贴到目标页面的样式表中。到目前为止，没有更好的方法。

如果您对它如何以其他方式工作有任何想法，请在http://new.crbug.com 提交功能请求（以“DevTools：”开头的摘要以获得更快的问题分类）。

【讨论】：

我想复制所有的 CSS，而不仅仅是单个元素的 CSS。页面上有数千个元素，我无法手动复制所有元素的 CSS。
抱歉，我以为您要复制与单个元素有关的所有数据。好吧，您可能想尝试转储document.styleSheets[i].cssRules[j].cssText。请记住，实际的样式表资源文本在解析后永远不会存储在浏览器中（并且您可以拥有动态添加的规则但没有相应的资源），因此此方法是一种尽力而为的方法。跨度>