如何导出一个元素的所有相关 HTML/CSS

我确信这个问题存在，但我找不到它：

有没有tool这样可以获取一个元素我的 HTML 文档并导出那个元素，其全部parents及其所有的相关CSS but 没有其他的?

EDIT:

抱歉我说得不够清楚。我并不意味着我想要 Firebug/DevTools，我的意思是一个工具[可能是某种浏览器内的功能]outputs将所选元素的所有相关 HTML/CSS 放入自给自足文件 / 到剪贴板。

EDIT2:

当我说输出所有相关的 HTML/CSS我的意思是我想要该元素及其所有 css 规则，然后每个父元素及其 css 规则一直到 .我得到的输出将是足够的 HTML/CSS，可以作为独立页面打开，并由所有相关 CSS 规则呈现和影响目标元素。

是的，有一个工具和方法可以做到这一点。

首先，使用Chrome扩展程序，您可以安装Snappy 片段来自 Chrome 网上应用店。它允许从指定的（最后检查的）DOM 节点轻松提取 HTML+CSS。此外，您可以将代码直接发送到 CodePen 或 JSFiddle。

Second, CSS Used，其他 Chrome 扩展，用于提取包含子 CSS 的 CSS。

第三，没有扩展，如果您希望 CSS 嵌入 HTML 或以上扩展不适合您，您可以使用任何基于 Webkit 的浏览器（如 Chrome 或 Firefox）在控制台中运行脚本，该脚本会将所有 css 添加到 html 元素，然后您可以轻松地复制 OuterHTML，它可以在任何地方使用。

var el = document.querySelector(“#yourId”); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);
}

因此，只需将此代码复制到控制台（右键单击页面->检查->控制台），将您的id更改为您的id或将其设置为“body”，运行它，然后右键单击您的元素并“复制outerHTML”