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

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


当前回答

我已经用过了所有的工具。但是,它们提供了重复的、肮脏的HTML CSS,而你正盯着它看呢。他们不会给你JS。

工作内容:

首先,我过滤页面上不需要的广告 然后,保存完整的网页连同链接资源。 删除不必要的HTML, CSS和JS 小心地逐个解除资源链接。

其他回答

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

欢迎您使用并改进它。

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

结果:

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

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

http://clipboardjs.com在这方面做得很好。尽管你期望复制的版本和原版完全一样,这样你就可以用它来玩和学习,但这可能不现实。

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

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