像大多数web开发人员一样，我偶尔喜欢查看网站的源代码，看看它们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但是如果我想复制一个特定的部分并在本地使用它，复制所有单独的元素和它们相关的CSS将是一件痛苦的事情。保存整个源代码并删除不相关的代码可能需要做同样多的工作。
这将是伟大的，如果我可以在Firebug中右键单击一个元素，并有一个“保存HTML+CSS+JS为这个元素”选项。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?
当前回答
有一个firefox插件可以保存整个页面的HTML, CSS等。但我还没见过能部分保存的。
我记得IE 5.5有你想要的东西;)
其他回答
我已经改编了投票最多的答案作为一个可拖动的书签。
只需访问此页面并拖动“运行jQuery代码”按钮到书签栏。
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属性，但至少应该让你开始。
有一个firefox插件可以保存整个页面的HTML, CSS等。但我还没见过能部分保存的。
我记得IE 5.5有你想要的东西;)
我也需要Firebug上的这个功能!在此之前，另一种方法是使用这个在线服务删除类并将css转换为内联样式。
几年前，我出于同样的目的创建了这个工具: http://www.betterprogramming.com/htmlclipper.html
欢迎您使用并改进它。
