从现有网站select性地复制HTML + CSS + JS的工具
像大多数网站开发人员一样，我偶尔也想看看网站的来源，看看他们的标记是如何构build的。 像Firebug和Chrome Developer Tools等工具可以很容易地检查代码，但如果我想复制一个孤立的部分，并在本地玩弄它，复制所有单个元素和它们相关的CSS将是一个痛苦。 而且，保存整个源代码和删除不相关的代码可能同样重要。
如果我可以在Firebug中右键单击某个节点，并select“为此节点保存HTML + CSS”，那就太好了。 这样的工具是否存在？ 是否可以扩展Firebug或Chrome开发者工具来添加此function？
SnappySnippet
我终于find了一些时间来创build这个工具。 您可以从Chrome网上应用店安装SnappySnippet 。 它允许从指定的（上次检查的）DOM节点轻松地提取HTML + CSS。 此外，您可以将您的代码直接发送到CodePen或JSFiddle。 请享用！
其他特性
- 清理HTML（删除不必要的属性，修复缩进）
- 优化CSS使其可读
- 完全可configuration（所有filter都可以closures）
- 适用于
::before和::after伪元素 - 漂亮的用户界面感谢Bootstrap和平板UI项目
码
SnappySnippet是开源的，你可以在GitHub上find代码 。
履行
由于我学到了很多东西，所以我决定分享一些我遇到的问题和我的解决scheme，也许有人会觉得它很有趣。
第一次尝试 – getMatchedCSSRules（）
起初我试着检索原始的CSS规则（来自网站上的CSS文件）。 非常令人惊讶的是，这是非常简单的感谢window.getMatchedCSSRules() ，但是，它不能很好地工作。 问题在于，我们仅仅是在整个文档的上下文中匹配的HTML和CSSselect器的一部分，这些select器在HTML片段的上下文中不再匹配。 由于parsing和修改select器似乎不是一个好主意，我放弃了这个尝试。
第二次尝试 – getComputedStyle（）
然后，我从@CollectiveCognitionbuild议的东西开始 – getComputedStyle() 。 不过，我真的想分开CSS表单HTML而不是内联所有样式。
问题1 – 从HTML分离CSS
这里的解决scheme不是很漂亮，但很直接。 我已经为所选子树中的所有节点分配了ID，并使用该ID来创build适当的CSS规则。
问题2 – 使用默认值删除属性
给节点分配ID很好，但是我发现每个CSS规则都有300个属性，使得整个CSS不可读。
原来， getComputedStyle()返回给定元素的所有可能的CSS属性和值计算。 其中一些空的，一些有浏览器的默认值。 要删除默认值，我必须先从浏览器中获取默认值（每个标签有不同的默认值）。 解决scheme是比较来自网站的元素的样式和插入到一个空的<iframe>的相同元素。 这里的逻辑是空的<iframe>中没有样式表，所以每个我附加的元素都只有默认的浏览器样式。 这样我就可以摆脱大部分无足轻重的属性。
问题3 – 只保留速记属性
接下来，我发现，具有速记等效性的属性被不必要地打印出来（例如有border: solid black 1px ， border-color: black; border-width: 1px ）。
为了解决这个问题，我简单地创build了一个具有速记等值的属性列表，并将其从结果中过滤出来。
问题4 – 删除前缀的属性
前一个操作之后，每个规则中的属性数量都大大减less，但是我发现我有很多-webkit-前缀的属性，我从来没有听说过（ -webkit-app-region ？ -webkit-text-emphasis-position ？）。
我想知道是否应该保留任何这些属性，因为它们中的一些似乎有用（ -webkit-transform-origin ， -webkit-perspective-origin等）。 但是，我还没有弄清楚如何validation这个，因为我知道大多数时候这些属性都是垃圾，所以我决定把它们全部删除。
问题5 – 组合相同的CSS规则
我发现的下一个问题是相同的CSS规则反复重复（例如，每个<li>具有完全相同的样式，在创build的CSS输出中有相同的规则）。
这只是一个相互比较的规则，把这些具有完全相同的属性和价值的规则结合起来。 因此，我没有#LI_1{...}, #LI_2{...}我得到了#LI_1, #LI_2 {...} 。
问题6 – 清理和修复HTML的缩进
因为我对结果感到满意，所以我转向了HTML。 它看起来像一团糟，主要是因为outerHTML属性保持格式，正如它从服务器返回。
唯一需要从outerHTML HTML获取的HTML代码是一个简单的代码重新格式化。 由于每个IDE都有这个function，所以我确信有一个JavaScript库可以完成这个function。 事实certificate， 我是对的（jQuery清洁） 。 更重要的是，我有不必要的属性删除额外（ style ， data-ng-repeat等）。
问题7 – 过滤CSS
由于在某些情况下，上面提到的filter可能会在代码段中破坏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属性来通过，但至less应该开始。
我最初问这个问题，我正在寻找一个Chrome（或FireFox）解决scheme，但我偶然发现了Internet Explorer开发人员工具中的这个function。 几乎我在找什么（除了JavaScript）
结果：
几年前我为了同样的目的创build了这个工具：
http://www.betterprogramming.com/htmlclipper.html
欢迎您使用和改进。
这可以通过称为剪贴簿的Firebug插件完成
您可以在设置中检查Javascript选项
编辑：
这也可以帮助
Firequark是Firebug的一个扩展，以帮助HTML Screen Scraping的过程。 Firequark使用Firebug（用于Firefox的Web开发插件）从网页自动提取单个或多个html节点的CSSselect器。 生成的CSSselect器可以作为一个input到像Scrapi这样的HTML屏幕抓取工具来提取信息。 Firequark是为了释放使用html屏幕抓取的CSSselect器的威力。
divclip是Florentin Sardan的htmlclipper的更新版本
与现代增强：ES5，HTML5，范围的CSS …
你可以编程提取一个风格化的div：
var html = require("divclip").bySel(".article-body"); console.log(html);
请享用。
没有插件需要。 只需点击一下鼠标，就可以使用Internet Explorer 11本机开发工具轻松完成。 就在一个元素上，检查这个元素，右键单击某个块，然后select“用样式复制元素”。 你可以在下面的图片中看到它。
它提供的CSS代码非常干净，就像
.menu { margin: 0; } .menu li { list-style: none; }
最近，我创build了一个Chrome扩展“eXtract Snippet”，用于复制检查的元素html，以及仅从页面复制相关的CSS和媒体查询。 请注意，这会给你实际相关的CSS
https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en
一个单一解决scheme的工具，我不知道，但你可以同时使用Firebug和Web Developer扩展 。
使用Firebug复制你需要的html部分（Inspect Element）和Web Developer来查看哪个css与一个元素相关联（调用Web Developer“查看样式信息” – 它像Firebug的“Inspect Element”一样工作，而不是显示html标记它显示与该标记关联的CSS）。
这不完全是你想要的（单击一下就可以了），但它非常接近，至less是直观的。
http://clipboard.com做到这一点，相当好。; 虽然您对复制版本的期望与原版完全相同，所以您可以玩并学习，但这可能并不现实。
我也需要Firebug上的这个function！ 在此之前，另一种方法是使用这个在线服务来删除类并将css转换为内联样式。
在网站easel.io做你在找什么。
他们有一个Chrome扩展，它允许您复制组件（与代码）并将其粘贴到您的模型
只需从网页上复制你想要的部分，然后将其粘贴到wysiwyg编辑器中即可。 点击编辑器工具栏上的“source”button来检查html源代码。
当我在Drupal网站上工作时，我发现了这个最简单的方法。 我使用wysiwyg CKeditor。
jQuery.fn.extend({ getStyles: function() { var rulesUsed = []; var sheets = document.styleSheets; for (var c = 0; c < sheets.length; c++) { var rules = sheets[c].rules || sheets[c].cssRules; for (var r = 0; r < rules.length; r++) { var selectorText = rules[r].selectorText.toLowerCase().replace(":hover",""); if (this.is(selectorText) || this.find(selectorText).length > 0) { rulesUsed.push(rules[r]); } } } var style = rulesUsed.map(function(cssRule) { return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }'; }).join("\n"); return style; } });
用法：
$("#login_wrapper").getStyles()
我已经将顶尖投票的答案作为一个可读的书签。
只要访问此页面 ，将“运行jQuery代码”button拖到您的书签栏。
有一个firefox插件可以保存整个页面的HTML，CSS等，但是我还没有看到一个做了部分保存。
我记得IE 5.5有你要找的东西;）
我在这里经历了所有提到的工具。 但是，他们给了你盯着美丽的脸的重复，肮脏的HTML CSS。 他们不给你JS。
我做的事：
- 首先，我在网页上过滤不需要的广告
- 然后，保存完整的网页以及链接资源。
- 删除不必要的HTML，CSS和JS
- 请小心谨慎地分开资源。
