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

Question

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

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

Answer 1

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.).
为了解决这个问题,我简单地创建了一个具有简写等价物的属性列表,并将其从结果中过滤掉.

问题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,因此我将所有过滤器都设为可选.您可以从" 设置"菜单中禁用它们.

Answer 2

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属性需要通过,但至少应该让你开始.

Answer 3

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

结果:

Answer 4

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

欢迎您使用和改进它.

Answer 5

这可以通过称为剪贴簿的Firebug插件来完成

您可以在设置中查看Javascript选项

编辑:

这也有帮助

Firequark是Firebug的扩展,用于帮助HTML屏幕抓取过程.Firequark使用Firebug(Firefox的Web开发插件)从网页自动提取单个或多个html节点的css选择器.生成的css选择器可以作为Scrapi等html屏幕抓取工具的输入来提取信息.Firequark旨在释放css选择器的强大功能,以便使用html屏幕抓取功能.

Answer 6

divclip是Florentin Sardan的 htmlclipper的更新版本

具有现代增强功能:ES5,HTML5,范围CSS ......

您可以通过以下方式以编程方式提取风格化的div:

var html = require("divclip").bySel(".article-body");
console.log(html);

请享用.

Answer 7

没有插件需要.只需单击一下,就可以非常简单地使用Internet Explorer 11本机开发人员工具完成它,非常干净.恰好在元素上并检查该元素,右键单击某个块并选择"使用样式复制元素".您可以在下图中看到它.

它提供的css代码非常干净,就像

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Answer 8

最近我创建了一个chrome扩展名"eXtract Snippet",用于复制被检查的元素,html以及页面中相关的css和媒体查询.请注意,这将为您提供实际相关的CSS

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en