和大多数网络开发人员一样，我偶尔也想看看网站的来源，看看他们的标记是如何构建的。 像Firebug和Chrome Developer Tools等工具可以轻松检查代码，但如果我想复制一个独立的部分并在本地进行操作，复制所有单个元素及其关联的CSS将是一件痛苦的事情。 而且可能还有很多工作来保存整个源代码并删除不相关的代码。

如果我可以在Firebug中右键单击某个节点并选择“为此节点保存HTML + CSS”，那将会很棒。 这样的工具是否存在？ 是否可以扩展Firebug或Chrome开发者工具来添加此功能？

---

SnappySnippet

我终于找到了一些时间来创建这个工具。 您可以从Chrome网上应用店安装SnappySnippet。 它允许从指定的（上次检查的）DOM节点中轻松提取HTML + CSS。 另外，您可以直接将代码发送到CodePen或JSFiddle。 请享用！

其他特性

清理HTML（删除不必要的属性，修复缩进）

优化CSS以使其可读

完全可配置（所有过滤器都可以关闭）

适用于::before和::after伪元素

良好的用户界面感谢Bootstrap和Flat-UI项目

码

SnappySnippet是开源的，你可以在GitHub上找到代码。

履行

由于我在学习过程中学到了很多东西，所以我决定分享我遇到的一些问题以及我的解决方案，也许有人会觉得它很有趣。

第一次尝试 - getMatchedCSSRules（）

起初我试过检索原始CSS规则（来自网站上的CSS文件）。 非常令人惊讶的是，这很简单，这要归功于window.getMatchedCSSRules() ，但是它并不能很好地工作。 问题在于，我们仅仅采用了在整个文档的上下文中匹配的HTML和CSS选择器的一部分，这些选择器在HTML片段的上下文中不再匹配。 由于解析和修改选择器似乎不是一个好主意，我放弃了这个尝试。

第二次尝试 - getComputedStyle（）

然后，我从@CollectiveCognition建议的东西开始 - getComputedStyle() 。 但是，我真的想分开CSS表单HTML而不是内联所有样式。

问题1 - 从HTML分离CSS

这里的解决方案不是很漂亮，但很直接。 我已将ID分配给选定子树中的所有节点，并使用该ID创建适当的CSS规则。

问题2 - 使用默认值删除属性

为节点分配ID很好，但是我发现每个CSS规则都有300个属性，导致整个CSS无法读取。
结果getComputedStyle()返回为给定元素计算的所有可能的CSS属性和值。 其中一些是空的，一些是浏览器默认值。 要删除默认值，我必须先从浏览器中获取默认值（每个标签都有不同的默认值）。 解决方案是比较来自网站的元素的样式和插入到空<iframe>的相同元素。 这里的逻辑是空的<iframe>中没有样式表，所以我附加的每个元素都只有默认的浏览器样式。 这样我就能够摆脱大部分无足轻重的属性。

问题3 - 只保留速记属性

我发现的下一件事是，具有速记等效性的属性被不必要地打印出来（例如有border: solid black 1px ， border-color: black; border-width: 1px itd）。
为了解决这个问题，我简单地创建了一个具有速记等值的属性列表，并从结果中过滤掉它们。

问题4 - 删除前缀属性

在上一次操作之后，每条规则中的属性数量显着减少，但是我发现我有很多-webkit-前缀的属性，这是我从未听说过的（ -webkit-app-region ？ -webkit-text-emphasis-position ？）。
我想知道是否应该保留任何这些属性，因为它们中的一些看起来很有用（ -webkit-transform-origin ， -webkit-perspective-origin等）。 不过，我还没有弄清楚如何验证这一点，而且由于我知道大多数时候这些属性只是垃圾，我决定将它们全部删除。

问题5 - 组合相同的CSS规则

我发现的下一个问题是相同的CSS规则反复重复（例如，每个<li>具有完全相同的样式，在创建的CSS输出中有相同的规则）。
这只是一个将规则相互比较的问题，并将这些规则组合在一起，具有完全相同的属性和值。 因此，我没有#LI_1{...}, #LI_2{...} #LI_1, #LI_2 {...} 。

问题6 - 清理并修复HTML的缩进

由于我对结果感到满意，因此我转向了HTML。 它看起来像一团糟，主要是因为outerHTML属性保持其格式与从服务器返回的格式完全一样。
从outerHTML HTML获取的HTML代码唯一需要的是简单的代码重新格式化。 由于它是每个IDE中可用的东西，我确信有一个JavaScript库可以完全实现这一点。 事实证明我是对的（jquery-clean）。 更重要的是，我有不必要的属性删除额外（ style ， data-ng-repeat等）。

问题7 - 过滤CSS

由于在某些情况下，上面提到的过滤器可能会在代码段中打破CSS，所以我已经将它们全部设为可选项。 您可以从“设置”菜单中禁用它们。

---

Webkit浏览器（不知道FireBug）允许您轻松地复制元素的HTML，因此这是该过程的一部分。

在复制元素的HTML之前运行此操作（在JavaScript控制台中）会将给定的父元素以及所有子元素的所有计算样式移动到内联样式属性中，该样式将作为HTML的一部分提供。

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

这是一个彻头彻尾的攻击，你会有很多“垃圾”CSS属性来通过，但至少应该开始。

---

我原本问这个问题，我正在寻找一个Chrome（或FireFox）解决方案，但我偶然发现了Internet Explorer开发人员工具中的这个功能。 几乎我在找什么（除了javascript）

结果：

链接地址: http://www.djcxy.com/p/87431.html

上一篇: Tools to selectively copy HTML+CSS+JS from existing sites

下一篇: Managing CSS Explosion