像大多数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属性和值。其中一些为空，一些具有 浏览器默认值。要删除默认值，我必须先从 浏览器中获取它们（每个标签具有不同的默认值）。解决方案是 将来自网站的元素的样式与 插入到空白元素中的相同元素进行比较。这里的逻辑是，<br /> 在empty 中没有样式表<iframe>，因此我在其中附加的每个元素<br /> 只有默认的浏览器样式。这样，我就可以摆脱大多数<br /> 无关紧要的属性。</p> <p>问题3-仅保留速记属性<br /> 我发现的下一件事情是，<br /> 不必要地打印了具有速记等效项的属性（例如，先有border: solid black 1px然后<br /> border-color: black;是border-width: 1pxitd）。<br /> 为了解决这个问题，我只创建了一个具有速记<br /> 等效项的属性列表，并将其从结果中过滤掉。</p> <p>问题4-删除前缀属性<br /> 在每个规则属性的数量后，显著降低<br /> 之前的操作，但我发现，我窗台有很多的-webkit-<br /> 前缀属性，我从来没有听到（-webkit-app-region？-webkit- text-emphasis-position？）。<br /> 我想知道我是否应该保留这些特性，因为他们中的一些<br /> 似乎是有用的（-webkit-transform-origin，-webkit-perspective-origin等等）。<br /> 不过，我还没有弄清楚如何验证这一点，并且由于我知道大多数<br /> 时候这些属性只是垃圾，所以我决定将它们全部删除。</p> <p>问题5-合并相同的CSS规则<br /> 我发现的下一个问题是重复重复相同的CSS规则<br /> （例如，对于每个<li>样式完全相同的样式<br /> ，在CSS输出中创建的规则相同）。<br /> 这只是将规则相互比较并将<br /> 具有完全相同的一组属性和值的规则组合在一起的问题。作为结果，而不是<br /> 的#LI_1{…}, #LI_2{…}我#LI_1, #LI_2 {…}。</p> <p>问题6-清理和修复HTML缩进<br /> 由于对结果感到满意，因此我转向了HTML。它看起来像一团糟，主要是因为该outerHTML属性将其格式设置与从服务器返回的格式完全相同。唯一<br /> 需要的HTML代码outerHTML是简单的代码重新格式化。它在每个IDE中都可用，因此我确定有一个JavaScript库可以做到这一点。结果证明我是对的（jquery-<br /> clean）。而且，我还有一些多余的属性删除（style，等等data-ng-repeat）。</p> <p>问题7-过滤器破坏CSS<br /> 由于在某些情况下上述过滤器可能会破坏代码段中的CSS，因此我将所有过滤器都设为可选。您可以从“ 设置”菜单禁用它们。</p> <div style="font-size:12px"> <span>2020-05-16 </span> </div> </div> </div> </div> </div> </div> </div> <footer class="es-footer"> <div class="copyright"> <div class="container"> Powered by <a href="http://www.codingdict.com/" target="_blank">CodingDict</a> ©2014-2020 <a class="mlm" href="http://www.codingdict.com/" target="_blank">编程字典</a> <a class="mlm" href="http://www.codingdict.com/courses">课程存档</a> <div class="mts"> 课程内容版权均归 <a href="http://www.codingdict.com/"> CodingDict </a> 所有 <a class="mlm" href="https://beian.miit.gov.cn/" target="_blank"> 京ICP备18030172号 </a> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?30b336128641baa43b1404dd15891277"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JpzbFo2d3IEdIRuU",ck: "JpzbFo2d3IEdIRuU"})</script> </footer> <script type="text/javascript" src="/static/plugins/js/jquery.min.js"></script> <script type="text/javascript" src="/static/assets/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/plugins/js/ace.js"></script> <script type="text/javascript" src="/static/plugins/js/resizable.min.js"></script> <script type="text/javascript" src="/static/plugins/js/semantic.min.js"></script> <script type="text/javascript" src="/static/plugins/js/emojis.min.js"></script> <script type="text/javascript" src="/static/plugins/js/highlight.min.js"></script> <script type="text/javascript" src="/static/martor/js/martor.min.js"></script> </div> </body> </html>
