问题描述

像大多数网络开发者一样，我偶尔也想看看网站的来源，看看他们的标记是如何构建的。像 Firebug 和 Chrome Developer Tools 这样的工具可以方便地检查代码，但是如果我要复制一个孤立的部分并在本地玩弄，那么复制所有的单个元素及其关联的 css 将是一件很痛苦的事情。而且可能只需要节省整个源代码并删除不相关的代码。

如果我可以将 right-click 设置为 Firebug 中的一个节点，并且具有 “为此节点保存 HTML + CSS” 选项，那将是巨大的。这样的工具是否存在？是否可以扩展 Firebug 或 Chrome 开发工具来添加此功能？

最佳解决方案

SnappySnippet

我终于找到了一些时间来创建这个工具。您可以从 Chrome 网上应用店安装 SnappySnippet 。它允许从指定的 (最后检查的)DOM 节点轻松进行 HTML + CSS 提取。此外，您可以将代码直接发送到 CodePen 或 JSFiddle 。请享用！

其他特性

  • 清理 HTML(删除不必要的属性，修复缩进)

  • 优化 CSS 使其可读

  • 完全可配置 (所有过滤器都可以关闭)

  • 与::before 和::after pseudo-elements 配合使用

  • 感谢 Bootstrap& Flat-UI 项目

Code

SnappySnippet 是开源的，您可以找到 code on GitHub 。

Implementation

由于我在学习相当多的时候，我已经决定分享一些我遇到的问题和我的解决方案，也许有人会觉得有趣。

第一次尝试– 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 库完全正确。事实证明，I was right (jquery-clean)。此外，我有不必要的属性删除额外 (style，data-ng-repeat 等) 。

问题 7 – 过滤器打破 CSS

既然有机会在某些情况下上述的过滤器可能会破解该片段中的 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);

}

这是一个完整的黑客，你会有很多”junk” css 属性来通过，但至少应该让你的开始。

第三种解决方案

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

结果：

第四种方案

几年前我已经创建了这个工具，用于相同的目的：http://www.betterprogramming.com/htmlclipper.html

欢迎您的使用和改进。

第五种方案

这可以通过名为 scrapbook 的 Firebug Plugin 完成

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

编辑：

This 也可以帮忙

Firequark is an extension to Firebug to aid the process of HTML Screen Scraping. Firequark automatically extracts css selector for a single or multiple html node(s) from a web page using Firebug (a web development plugin for Firefox). The css selector generated can be given as an input to html screen scrapers like Scrapi to extract information. Firequark is built to unleash the power of css selector for use of html screen scraping.

第六种方案

divclip 是 Florentin Sardan 的 htmlclipper 的更新版本

具有现代增强功能：ES5，HTML5，范围 CSS …

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

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

请享用。

第七种方案

最近我创建了一个镀 chrome 扩展”eXtract Snippet” 来复制被检查的元素，html 和只有相关的 CSS 和媒体查询从页面。请注意，这将给您实际的相关 CSS

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

第八种方案

一个具有单一解决方案的工具我不知道，但您可以同时使用 Firebug 和 Web Developer extension 。

使用 Firebug 来复制您需要的 html 部分 (Inspect Element) 和 Web Developer 来查看哪个 css 与元素相关联 (调用 Web Developer“查看样式信息” – 它的工作原理就像 Firebug 的”Inspect Element”，而不是显示 html 标记相关联的 CSS 与该标记) 。

这不是你想要的 (一键点击所有)，但它是非常接近，至少直观。

第九种方案

http://clipboard.com 这样做很好。虽然您对复制版本的期望与原始版本完全一样，因此您可以玩它并学习，但可能不现实。

第十种方案

我也需要这个功能在 Firebug！在此之前，另一种方法是使用 this 在线服务来删除类并将 CSS 转换为内联样式。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。