像大多数web开发人员一样,我偶尔喜欢查看网站的源代码,看看它们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码,但是如果我想复制一个特定的部分并在本地使用它,复制所有单独的元素和它们相关的CSS将是一件痛苦的事情。保存整个源代码并删除不相关的代码可能需要做同样多的工作。

这将是伟大的,如果我可以在Firebug中右键单击一个元素,并有一个“保存HTML+CSS+JS为这个元素”选项。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?


当前回答

有一个firefox插件可以保存整个页面的HTML, CSS等。但我还没见过能部分保存的。

我记得IE 5.5有你想要的东西;)

其他回答

有一个firefox插件可以保存整个页面的HTML, CSS等。但我还没见过能部分保存的。

我记得IE 5.5有你想要的东西;)

我最初问这个问题是为了寻找Chrome(或FireFox)的解决方案,但我无意中在ie开发工具中发现了这个功能。几乎就是我要找的(除了javascript)

结果:

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

欢迎您使用并改进它。

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

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

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

使用Firebug复制你需要的html部分(Inspect Element)和Web Developer查看哪个css与某个元素相关联(调用Web Developer“查看样式信息”-它的工作方式类似于Firebug的“Inspect Element”,但它显示的不是html标记而是与该标记相关联的css)。

这并不是你想要的(点击所有内容),但它非常接近,至少是直观的。