从现有站点选择性复制HTML + CSS + JS的工具
像大多数Web开发人员一样，我偶尔也喜欢查看网站的来源，以了解其标记的构建方式。Firebug和Chrome开发者工具之类的工具使检查代码变得容易，但是如果我要复制一个孤立的部分并在本地使用它，则复制所有单个元素及其关联的CSS 会很痛苦。
保存整个源代码并剪切不相关的代码可能需要做很多工作。
如果我可以在Firebug中右键单击一个节点并具有“为该节点保存HTML + CSS”选项，那就太好了。是否存在这样的工具？可以
扩展Firebug或Chrome开发者工具来添加此功能吗？
回答：
SnappySnippet
我终于找到了一些时间来创建此工具。您可以从Github上
安装SnappySnippet。它允许从指定的（最后检查）的DOM节点轻松提取HTML
+ CSS。另外，您可以将代码直接发送到CodePen或的jsfiddle。请优越！
SnappySnippet Chrome扩展
其他功能
清理HTML（删除常规的属性，修复缩进）
优化CSS以改善
完全可配置（可以关闭所有过滤器）
用作品::before和::after伪元素
出色的UI，要归功于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属性和值。其中一些为空，一些具有
浏览器默认值。要删除默认值，我必须先从
浏览器中获取它们（每个标签具有不同的默认值）。解决方案是
将来自网站的元素的样式与
插入到空白元素中的相同元素进行比较