html - 从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具

Question

关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

5年前关闭。



Improve this question




像大多数 Web 开发人员一样，我偶尔喜欢查看网站的源代码，看看他们的标记是如何构建的。 Firebug 和 Chrome Developer Tools 等工具可以轻松检查代码，但如果我想复制特定部分并在本地使用它，复制所有单个元素及其关联的 CSS 会很痛苦。并且可能同样多的工作可以保存整个源代码并删除不相关的代码。
如果我可以在 Firebug 中右键单击一个元素并有一个“为这个元素保存 HTML+CSS+JS”选项，那就太好了。有这样的工具吗？是否可以扩展 Firebug 或 Chrome 开发人员工具来添加此功能？

Answer 1

SnappySnippet

我终于找到了一些时间来创建这个工具。您可以安装 SnappySnippet来自 Github。它允许从指定的(最后检查的)DOM 节点中轻松提取 HTML+CSS。此外，您可以将代码直接发送到 CodePen 或 JSFiddle。享受!



其它功能

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

优化 CSS 使其可读

完全可配置(可以关闭所有过滤器)

与 ::before 合作和 ::after伪元素

漂亮的用户界面感谢 Bootstrap & Flat-UI元素

代码

SnappySnippet 是开源的，你可以找到 code on 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 代码需要的是一个简单的代码重新格式化。由于它在每个 IDE 中都可用，我确信有一个 JavaScript 库可以做到这一点。事实证明，I was right (jquery-clean) .更重要的是，我已经删除了不必要的属性( style 、 data-ng-repeat 等)。

问题 7 - 过滤器破坏 CSS

由于在某些情况下上述过滤器可能会破坏代码段中的 CSS，因此我将它们全部设为可选。您可以从“设置”菜单中禁用它们。