像大多数Web开发人员一样，我偶尔会查看网站的来源，看看他们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但如果我想复制一个孤立的部分并在本地使用它，那么复制所有单个元素及其相关的css将是一件痛苦的事。并且可能同样需要保存整个源并删除不相关的代码。

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

#1楼

http://clipboard.com做得很好。虽然您对复制版本的期望与原版完全一致，因此您可以使用它进行游戏和学习，但这可能并不现实。

#2楼

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

结果：

#3楼

多年前我为了同样的目的创建了这个工具：
http://www.betterprogramming.com/htmlclipper.html

欢迎您使用和改进它。

#4楼

只需从网页上复制您想要的部分，然后将其粘贴到wysiwyg编辑器中即可。单击编辑器工具栏上的“源”按钮检查html源代码。

当我在Drupal网站上工作时，我发现了这种最简单的方法。我用的是wysiwyg CKeditor。

#5楼

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 - 将CSS与HTML分离

这里的解决方案不是很漂亮，但很简单。我已为所选子树中的所有节点分配了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库正是这样做的。事实证明我是对的（jquery-clean）。更重要的是，我有额外的不必要的属性删除（ style ， data-ng-repeat等）。

问题7 - 过滤器破解CSS

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

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3165206

标签

css

css优化

html代码

css样式

从现有站点有选择地复制HTML + CSS + JS的工具[关闭]

#1楼

#2楼

结果：

#3楼

#4楼

#5楼