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);

}

这是一个完全的hack，你会有很多“垃圾”css属性，但至少应该让你开始。

活泼片段

我终于找到时间来创建这个工具。你可以从Github安装SnappySnippet。它允许从指定的(最后检查的)DOM节点轻松提取HTML+CSS。此外，您可以将代码直接发送到CodePen或JSFiddle。享受吧!

其他功能

清理HTML(删除不必要的属性，修复缩进) 优化CSS使其可读 完全可配置(所有过滤器都可以关闭) 使用::before和::after伪元素 多亏了Bootstrap和Flat-UI项目

Code

SnappySnippet是开源的，你可以在GitHub上找到它的代码。

实现

因为我在做这个的时候学到了很多东西，所以我决定分享一些我经历过的问题和我的解决方法，也许有人会觉得很有趣。

第一次尝试- getMatchedCSSRules()

首先，我尝试检索原始的CSS规则(来自网站上的CSS文件)。令人惊讶的是，多亏了window.getMatchedCSSRules()，这非常简单，然而，它并没有很好地工作。问题在于，我们只选取了在整个文档上下文中匹配的HTML和CSS选择器的一部分，而在HTML片段上下文中不再匹配。由于解析和修改选择器似乎不是一个好主意，我放弃了这个尝试。

第二次尝试- getComputedStyle()

然后，我从@CollectiveCognition建议的东西开始- getComputedStyle()。然而，我真的想把CSS和HTML分开，而不是内联所有的样式。

问题1 -从HTML中分离CSS

这里的解决方案不是很漂亮，但很直接。我已经为所选子树中的所有节点分配了ID，并使用该ID创建适当的CSS规则。

问题2 -删除具有默认值的属性

Assigning IDs to the nodes worked out nicely, however I found out that each of my CSS rules has ~300 properties making the whole CSS unreadable. Turns out that getComputedStyle() returns all possible CSS properties and values calculated for the given element. Some of them where empty, some had browser default values. To remove default values I had to get them from the browser first (and each tag has different default values). The solution was to compare the styles of the element coming from the website with the same element inserted into an empty <iframe>. The logic here was that there are no style sheets in an empty <iframe>, so each element I've appended there had only default browser styles. This way I was able to get rid of most of the properties that were insignificant.

问题3 -只保留简写属性

我发现的下一件事是不必要地打印出具有速记等效的属性(例如，有border: solid black 1px，然后border-color: black;， border-width: 1px itd.)。 为了解决这个问题，我简单地创建了一个属性列表，这些属性具有简写等价物，并从结果中过滤掉它们。

问题4 -删除前缀属性

The number of properties in each rule was significantly lower after the previous operation, but I've found that I sill had a lot of -webkit- prefixed properties that I've never hear of (-webkit-app-region? -webkit-text-emphasis-position?). I was wondering if I should keep any of these properties because some of them seemed useful (-webkit-transform-origin, -webkit-perspective-origin etc.). I haven't figured out how to verify this, though, and since I knew that most of the time these properties are just garbage, I decided to remove them all.

问题5 -组合相同的CSS规则

我发现的下一个问题是相同的CSS规则一遍又一遍地重复(例如，对于每个具有完全相同样式的<li>，在创建的CSS输出中都有相同的规则)。 这只是相互比较规则，并将具有完全相同属性和值的规则组合在一起的问题。因此，#LI_1{…} # LI_2{…我得到了#LI_1， #LI_2{…}。

问题6 -清理和修复HTML的缩进

Since I was happy with the result, I moved to HTML. It looked like a mess, mostly because the outerHTML property keeps it formatted exactly as it was returned from the server. The only thing HTML code taken from outerHTML needed was a simple code reformatting. Since it's something available in every IDE, I was sure that there is a JavaScript library that does exactly that. And it turns out that I was right (jquery-clean). What's more, I've got unnecessary attributes removal extra (style, data-ng-repeat etc.).

问题7 -过滤器破坏CSS

因为在某些情况下，上面提到的过滤器可能会破坏代码片段中的CSS，所以我将它们都设置为可选的。您可以从“设置”菜单中禁用它们。

Divclip是一个更新 Florentin Sardan的版本 htmlclipper

与现代增强:ES5, HTML5，范围CSS…

你可以用下面的方法提取一个程式化的div:

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

享受。

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

使用Firebug复制你需要的html部分(Inspect Element)和Web Developer查看哪个css与某个元素相关联(调用Web Developer“查看样式信息”-它的工作方式类似于Firebug的“Inspect Element”，但它显示的不是html标记而是与该标记相关联的css)。

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

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

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

编辑:

这也有帮助

fireark是Firebug的扩展 以帮助HTML屏幕的过程 刮。Firequark自动 提取单个或的CSS选择器 一个网页中的多个HTML节点 使用Firebug(一个web开发 Firefox插件)。css选择器 生成的可以作为输入给 html屏幕抓取像Scrapi to 提取信息。Firequark是 为释放CSS的力量而构建 选择器使用HTML屏幕 刮。

我已经改编了投票最多的答案作为一个可拖动的书签。

只需访问此页面并拖动“运行jQuery代码”按钮到书签栏。