从现有站点选择性复制HTML + CSS + JS的工具\[关闭\]

html CSS

ASamJim

2020-03-19

像大多数Web开发人员一样,我偶尔也喜欢查看网站的来源,以了解其标记的构建方式。Firebug和Chrome开发者工具之类的工具使检查代码变得容易,但是如果我要复制一个孤立的部分并在本地使用它,则复制所有单个元素及其关联的CSS会很痛苦。保存整个源代码并剪切不相关的代码可能需要做很多工作。

如果可以在Firebug中右键单击一个节点并具有“为此节点保存HTML + CSS”选项,那就太好了。是否存在这样的工具?可以扩展Firebug或Chrome开发者工具来添加此功能吗?

第2349篇《从现有站点选择性复制HTML + CSS + JS的工具\[关闭\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
樱西门 2020.03.19

我已将票数最高的答案改编为Dragabble小书签。

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

LEYItachi 2020.03.19

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

我记得IE 5.5确实具有您所需要的;)

Itachi泡芙Pro 2020.03.19

我浏览了这里提到的所有工具。但是它们会给您反复,肮脏的HTML CSS以及您凝视的美丽面孔。他们不给你JS。

我做的事:

  1. 首先,我过滤了页面上不需要的广告
  2. 然后,保存完整的网页以及链接资源。
  3. 删除不必要的HTML,CSS和JS
  4. 保持小心地一对一地断开资源链接。
路易Itachi小小 2020.03.19

只需从网页上复制所需的部分,然后将其粘贴到所见即所得的编辑器中即可。通过单击编辑器工具栏上的“源”按钮来检查html源。

当我在Drupal网站上工作时,我发现了这种最简单的方法。我使用所见即所得的CKeditor。

GilItachi 2020.03.19

http://clipboardjs.com做到了这一点,并且效果很好。尽管您对复制版本的期望与原始版本完全相同,因此您可以玩耍和学习,但可能并不现实。

逆天斯丁前端 2020.03.19

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

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

泡芙神无伽罗 2020.03.19

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

使用Firebug复制所需的html部分(检查元素),然后使用Web Developer查看与元素相关联的css(将Web Developer称为“查看样式信息”,它的工作方式类似于Firebug的“ Inspect Element”,但不显示html)标记,则显示具有该标记的关联CSS。

这不正是你想要的(一切点击),但它是相当接近,并且至少直观。

Web开发人员扩展的“查看样式信息”结果

Mandy神奇 2020.03.19

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

古一 2020.03.19

这可以通过名为scrapbook的Firebug插件来完成

您可以在设置中检查Javascript选项

在此处输入图片说明

编辑:

也可以帮助

Firequark是Firebug的扩展,可帮助HTML屏幕抓取过程。Firequark使用Firebug(Firefox的网络开发插件)自动从网页中提取单个或多个html节点的css选择器。可以将生成的css选择器作为html屏幕抓取工具(如Scrapi)的输入,以提取信息。Firequark旨在释放CSS选择器的功能,以使用html屏幕抓取功能。

小宇宙米亚猿 2020.03.19

无需插件。只需单击一下,就可以使用Internet Explorer 11本机开发人员工具非常简单地完成它,非常干净。刚好在元素上并检查该元素,然后右键单击某个块并选择“使用样式复制元素”。您可以在下图中看到它。

它提供了非常干净的CSS代码,例如

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

divclip是Florentin Sardan的 htmlclipper的更新版本

具有现代增强功能:ES5,HTML5,范围内的CSS ...

您可以通过以下方式以编程方式提取样式化div:

var html = require("divclip").bySel(".article-body");
console.log(html);

请享用。

小宇宙神奇 2020.03.19

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属性可供使用,但至少应该让您开始。

神无ProHarry 2020.03.19

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

欢迎您使用和改进它。

ASamJim 2020.03.19

我最初问这个问题是在寻找Chrome(或FireFox)解决方案,但我在Internet Explorer开发人员工具中偶然发现了此功能。我在寻找什么(JavaScript除外)

具有样式的元素源

结果:

具有样式结果的元素源

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android