像大多数web开发人员一样，我偶尔喜欢查看网站的源代码，看看它们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但是如果我想复制一个特定的部分并在本地使用它，复制所有单独的元素和它们相关的CSS将是一件痛苦的事情。保存整个源代码并删除不相关的代码可能需要做同样多的工作。
这将是伟大的，如果我可以在Firebug中右键单击一个元素，并有一个“保存HTML+CSS+JS为这个元素”选项。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?
当前回答
这可以通过Firebug插件剪贴簿来完成
您可以在设置中检查Javascript选项
编辑:
这也有帮助
fireark是Firebug的扩展 以帮助HTML屏幕的过程 刮。Firequark自动 提取单个或的CSS选择器 一个网页中的多个HTML节点 使用Firebug(一个web开发 Firefox插件)。css选择器 生成的可以作为输入给 html屏幕抓取像Scrapi to 提取信息。Firequark是 为释放CSS的力量而构建 选择器使用HTML屏幕 刮。
其他回答
我最初问这个问题是为了寻找Chrome(或FireFox)的解决方案，但我无意中在ie开发工具中发现了这个功能。几乎就是我要找的(除了javascript)
结果:
我已经用过了所有的工具。但是，它们提供了重复的、肮脏的HTML CSS，而你正盯着它看呢。他们不会给你JS。
工作内容:
首先，我过滤页面上不需要的广告 然后，保存完整的网页连同链接资源。 删除不必要的HTML, CSS和JS 小心地逐个解除资源链接。
http://clipboardjs.com在这方面做得很好。尽管你期望复制的版本和原版完全一样，这样你就可以用它来玩和学习，但这可能不现实。
这可以通过Firebug插件剪贴簿来完成
您可以在设置中检查Javascript选项
编辑:
这也有帮助
fireark是Firebug的扩展 以帮助HTML屏幕的过程 刮。Firequark自动 提取单个或的CSS选择器 一个网页中的多个HTML节点 使用Firebug(一个web开发 Firefox插件)。css选择器 生成的可以作为输入给 html屏幕抓取像Scrapi to 提取信息。Firequark是 为释放CSS的力量而构建 选择器使用HTML屏幕 刮。
Divclip是一个更新 Florentin Sardan的版本 htmlclipper
与现代增强:ES5, HTML5，范围CSS…
你可以用下面的方法提取一个程式化的div:
var html = require("divclip").bySel(".article-body");
console.log(html);
享受。
