像大多数web开发人员一样，我偶尔喜欢查看网站的源代码，看看它们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但是如果我想复制一个特定的部分并在本地使用它，复制所有单独的元素和它们相关的CSS将是一件痛苦的事情。保存整个源代码并删除不相关的代码可能需要做同样多的工作。
这将是伟大的，如果我可以在Firebug中右键单击一个元素，并有一个“保存HTML+CSS+JS为这个元素”选项。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?
当前回答
不需要插件。这可以用ie 11本地开发工具非常简单地完成，只需点击一下，非常干净。选中一个元素，检查该元素，右键单击某个块，选择“Copy element with styles”。你可以在下面的图片中看到它。
它提供了非常干净的css代码，比如
.menu {
margin: 0;
}
.menu li {
list-style: none;
}
其他回答
我不知道这是一个具有单一解决方案的工具，但您可以同时使用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屏幕 刮。
最近，我创建了一个chrome扩展“eXtract Snippet”用于复制检查的元素，html和相关的css和媒体查询从一个页面。注意，这将为您提供实际的相关CSS
https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en
不需要插件。这可以用ie 11本地开发工具非常简单地完成，只需点击一下，非常干净。选中一个元素，检查该元素，右键单击某个块，选择“Copy element with styles”。你可以在下面的图片中看到它。
它提供了非常干净的css代码，比如
.menu {
margin: 0;
}
.menu li {
list-style: none;
}
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属性，但至少应该让你开始。
