html - 从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具

Question

像大多数 Web 开发人员一样，我偶尔喜欢查看网站的源代码，以了解它们的标记是如何构建的。Firebug 和 Chrome 开发者工具等工具可以轻松检查代码，但如果我想复制特定部分并在本地使用它，复制所有单个元素及其关联的 CSS 会很痛苦。保存整个源代码并删除不相关的代码可能也需要做同样多的工作。

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

score 608 · Accepted Answer

SnappySnippet

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

SnappySnippet Chrome 扩展

其他特性

清理 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属性保持它的格式与从服务器返回的完全相同。
唯一outerHTML需要的 HTML 代码是简单的代码重新格式化。因为它在每个 IDE 中都可用，所以我确信有一个 JavaScript 库可以做到这一点。事实证明我是对的 (jquery-clean)。更重要的是，我有多余的属性删除（style等data-ng-repeat）。

问题 7 - 过滤器破坏 CSS

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

score 57 · Accepted Answer

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

带样式的元素源

结果：

带有样式结果的元素源

score 53 · Accepted Answer

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 属性可以通过，但至少应该让你开始。

score 32 · Accepted Answer

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

欢迎您使用和改进它。

score 26 · Accepted Answer

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

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

在此处输入图像描述

编辑：

这也可以帮助

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

score 14 · Accepted Answer

divclip是 Florentin Sardan 的 htmlclipper的更新版本

具有现代增强功能：ES5、HTML5、作用域 CSS...

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

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

享受。

score 12 · Accepted Answer

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

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

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

score 6 · Accepted Answer

最近我创建了一个 chrome 扩展“eXtract Snippet”，用于从页面复制检查的元素、html 以及相关的 css 和媒体查询。请注意，这将为您提供实际相关的 CSS

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

score 3 · Accepted Answer

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

使用 Firebug 复制您需要的 html 部分（检查元素）和 Web 开发人员查看哪个 css 与元素相关联（调用 Web 开发人员“查看样式信息” - 它的工作方式类似于 Firebug 的“检查元素”，但不是显示 html标记它显示与该标记关联的 CSS）。

这并不完全是您想要的（单击即可获得所有内容），但它非常接近，并且至少直观。

Web Developer Extension 的“查看样式信息”结果

score 3 · Accepted Answer

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

score 3 · Accepted Answer

http://clipboardjs.com做得很好。尽管您希望复制的版本与原版完全相同，以便您可以玩和学习，但这可能并不现实。

score 2 · Accepted Answer

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

当我在 Drupal 站点上工作时，我发现了这种最简单的方法。我使用所见即所得的CKeditor。

score 2 · Accepted Answer

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

score 0 · Accepted Answer

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

我记得 IE 5.5 有你想要的东西；）

score 0 · Accepted Answer

我已将投票最多的答案改编为可拖动的书签。

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

score 0 · Accepted Answer

我浏览了这里提到的所有工具作为答案。但是他们给出了重复的、肮脏的 HTML CSS 和你盯着看的漂亮脸蛋。他们不给你JS。

我做什么：

首先，我过滤页面上不需要的广告
然后，保存完整的网页以及链接资源。
删除不必要的 HTML、CSS 和 JS
小心地逐一取消链接资源。