像大多数Web开发人员一样,我偶尔也喜欢查看网站的来源,以了解其标记的构建方式。Firebug和Chrome开发者工具之类的工具使检查代码变得容易,但是如果我要复制一个孤立的部分并在本地使用它,则复制所有单个元素及其关联的CSS会很痛苦。保存整个源代码并剪切不相关的代码可能需要做很多工作。
如果可以在Firebug中右键单击一个节点并具有“为此节点保存HTML + CSS”选项,那就太好了。是否存在这样的工具?可以扩展Firebug或Chrome开发者工具来添加此功能吗?
像大多数Web开发人员一样,我偶尔也喜欢查看网站的来源,以了解其标记的构建方式。Firebug和Chrome开发者工具之类的工具使检查代码变得容易,但是如果我要复制一个孤立的部分并在本地使用它,则复制所有单个元素及其关联的CSS会很痛苦。保存整个源代码并剪切不相关的代码可能需要做很多工作。
如果可以在Firebug中右键单击一个节点并具有“为此节点保存HTML + CSS”选项,那就太好了。是否存在这样的工具?可以扩展Firebug或Chrome开发者工具来添加此功能吗?
我浏览了这里提到的所有工具。但是它们会给您反复,肮脏的HTML CSS以及您凝视的美丽面孔。他们不给你JS。
我做的事:
只需从网页上复制所需的部分,然后将其粘贴到所见即所得的编辑器中即可。通过单击编辑器工具栏上的“源”按钮来检查html源。
当我在Drupal网站上工作时,我发现了这种最简单的方法。我使用所见即所得的CKeditor。
http://clipboardjs.com做到了这一点,并且效果很好。尽管您对复制版本的期望与原始版本完全相同,因此您可以玩耍和学习,但可能并不现实。
最近,我创建了一个镀铬扩展名“ eXtract Snippet”,用于复制页面中被检查的元素,html和仅相关的CSS和媒体查询。请注意,这将为您提供实际的相关CSS
https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=zh-CN
我不知道只有一个解决方案的工具,但是您可以同时使用Firebug和Web Developer扩展。
使用Firebug复制所需的html部分(检查元素),然后使用Web Developer查看与元素相关联的css(将Web Developer称为“查看样式信息”,它的工作方式类似于Firebug的“ Inspect Element”,但不显示html)标记,则显示具有该标记的关联CSS。
这不正是你想要的(一切点击),但它是相当接近,并且至少直观。
我还在Firebug上需要此功能!在此之前,另一种方法是使用此在线服务删除类并将CSS转换为内联样式。
无需插件。只需单击一下,就可以使用Internet Explorer 11本机开发人员工具非常简单地完成它,非常干净。刚好在元素上并检查该元素,然后右键单击某个块并选择“使用样式复制元素”。您可以在下图中看到它。
它提供了非常干净的CSS代码,例如
.menu {
margin: 0;
}
.menu li {
list-style: none;
}
divclip是Florentin Sardan的 htmlclipper的更新版本
具有现代增强功能:ES5,HTML5,范围内的CSS ...
您可以通过以下方式以编程方式提取样式化div:
var html = require("divclip").bySel(".article-body");
console.log(html);
请享用。
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属性可供使用,但至少应该让您开始。
几年前,我出于相同的目的创建了此工具:http :
//www.betterprogramming.com/htmlclipper.html
欢迎您使用和改进它。
我最初问这个问题是在寻找Chrome(或FireFox)解决方案,但我在Internet Explorer开发人员工具中偶然发现了此功能。我在寻找什么(JavaScript除外)
我已将票数最高的答案改编为Dragabble小书签。
只需访问此页面并将“运行jQuery代码”按钮拖动到书签栏即可。