像大多数Web开发人员一样，我偶尔也喜欢查看网站的来源，以了解其标记的构建方式。Firebug和Chrome开发者工具之类的工具使检查代码变得容易，但是如果我要复制一个孤立的部分并在本地使用它，则复制所有单个元素及其关联的CSS会很痛苦。保存整个源代码并剪切不相关的代码可能需要做很多工作。

如果可以在Firebug中右键单击一个节点并具有“为该节点保存HTML + CSS”选项，那就太好了。是否存在这样的工具？是否可以扩展Firebug或Chrome开发者工具来添加此功能？

SnappySnippet

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

其它功能

• 清理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属性和值。其中一些为空，一些具有浏览器默认值。要删除默认值，我必须先从浏览器中获取它们（每个标签具有不同的默认值）。解决方案是将来自网站的元素的样式与插入到空白元素中的相同元素进行比较<iframe>。这里的逻辑是，在empty中没有样式表<iframe>，因此我在其中附加的每个元素都只有默认的浏览器样式。这样，我就可以摆脱大多数无关紧要的属性。

问题3-仅保留速记属性

我发现的下一件事情是，不必要地打印了具有速记等效项的属性（例如，先有border: solid black 1px然后border-color: black;是border-width: 1pxitd）。
为了解决这个问题，我只创建了一个具有速记等效项的属性列表，并将它们从结果中过滤掉。

问题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属性将其格式设置与从服务器返回的格式完全相同。
唯一需要的HTML代码outerHTML是简单的代码重新格式化。由于它在每个IDE中都可用，因此我确定有一个JavaScript库可以做到这一点。结果证明我是对的（jquery-clean）。而且，我还有一些多余的属性去除（style，data-ng-repeat等等）。

问题7-过滤器破坏CSS

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

我最初问这个问题是在寻找Chrome（或FireFox）解决方案，但我在Internet Explorer开发人员工具中偶然发现了此功能。我在寻找什么（JavaScript除外）

结果：

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属性可供使用，但至少应该让您开始。

几年前，我出于相同的目的创建了此工具：http :
//www.betterprogramming.com/htmlclipper.html

欢迎您使用和改进它。

这可以通过名为scrapbook的Firebug插件来完成

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

编辑：

这也可以帮助

Firequark是Firebug的扩展，可帮助HTML屏幕抓取过程。Firequark使用Firebug（Firefox的网络开发插件）自动从网页中提取单个或多个html节点的css选择器。可以将生成的css选择器作为html屏幕抓取工具（例如Scrapi）的输入，以提取信息。Firequark旨在释放CSS选择器的功能，以使用html屏幕抓取功能。

divclip是Florentin Sardan的 htmlclipper的更新版本

具有现代增强功能：ES5，HTML5，范围内的CSS ...

您可以通过以下方式以编程方式提取样式化div：

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

请享用。

无需插件。只需单击一下即可使用Internet Explorer 11本机开发人员工具非常简单地完成它，非常干净。就在元素上并检查该元素，然后右键单击某个块，然后选择“使用样式复制元素”。您可以在下图中看到它。

它提供了非常干净的CSS代码，例如

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

最近，我创建了一个镀铬扩展名“ eXtract Snippet”，用于复制页面中被检查的元素，html和仅相关的CSS和媒体查询。请注意，这将为您提供实际的相关CSS

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

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

使用Firebug复制所需的html部分（检查元素），然后使用Web Developer查看与元素相关联的css（将Web Developer称为“查看样式信息”，它的工作方式类似于Firebug的“ Inspect Element”，但不显示html）标记，它显示具有该标记的关联CSS。

这不正是你想要的（一切点击），但它是相当接近，并且至少直观。

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

http://clipboardjs.com可以做到这一点，而且效果很好。尽管您对复制版本的期望与原始版本完全相同，因此您可以玩耍和学习，但可能并不现实。

只需从网页上复制所需的部分，然后将其粘贴到所见即所得的编辑器中即可。通过单击编辑器工具栏上的“源”按钮来检查html源。

当我在Drupal网站上工作时，我发现了这种最简单的方法。我使用所见即所得的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()

我已将票数最高的答案改编为Dragabble小书签。

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

有一个Firefox插件可以保存整个页面的HTML，CSS等。但是我还没有看到一个可以部分保存的。

我记得IE 5.5满足了您的需求;）

我浏览了这里提到的所有工具作为答案。但是它们给您反复，肮脏的HTML CSS以及您凝视的美丽面孔。他们不给你JS。

我做的事：

1. 首先，我过滤了页面上不需要的广告
2. 然后，保存完整的网页以及链接资源。
3. 删除不必要的HTML，CSS和JS
4. 保持小心地一对一地断开资源链接。