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

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


当前回答

我已经改编了投票最多的答案作为一个可拖动的书签。

只需访问此页面并拖动“运行jQuery代码”按钮到书签栏。

其他回答

不需要插件。这可以用ie 11本地开发工具非常简单地完成,只需点击一下,非常干净。选中一个元素,检查该元素,右键单击某个块,选择“Copy element with styles”。你可以在下面的图片中看到它。

它提供了非常干净的css代码,比如

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

只需从网页复制你想要的部分,并将其粘贴在所见即所得编辑器中。点击编辑器工具栏上的“source”按钮,检查html源代码。

当我在Drupal网站上工作时,我发现了这个最简单的方法。我使用wysiwyg CKeditor。

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

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

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

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

我也需要Firebug上的这个功能!在此之前,另一种方法是使用这个在线服务删除类并将css转换为内联样式。