从现有网站有选择地复制 HTML+CSS+JS 的工具

Tools to selectively copy HTML+CSS+JS from existing sites

提问by kenwarner

Like most web developers, I occasionally like to look at the source of websites to see how their markup is built. Tools like Firebug and Chrome Developer Tools make it easy to inspect the code, but if I want to copy an isolated section and play around with it locally, it would be a pain to copy all the individual elements and their associated css. And probably just as much work to save the entire source and cut out the unrelated code.

像大多数 Web 开发人员一样，我偶尔喜欢查看网站的源代码，看看他们的标记是如何构建的。Firebug 和 Chrome Developer Tools 之类的工具可以轻松检查代码，但如果我想复制一个孤立的部分并在本地使用它，复制所有单个元素及其关联的 css 会很痛苦。并且可能需要同样多的工作来保存整个源代码并删除不相关的代码。

It would be great if I could right-click a node in Firebug and have a "Save HTML+CSS for this node" option. Does such a tool exist? Is it possible to extend Firebug or Chrome Developer Tools to add this feature?

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

回答by Konrad Dzwinel

SnappySnippet

SnappySnippet

I finally found some time to create this tool. You can install SnappySnippetfrom Github. It allows easy HTML+CSS extraction from the specified (last inspected) DOM node. Additionally, you can send your code straight to CodePen or JSFiddle. Enjoy!

我终于找到了一些时间来创建这个工具。您可以从 Github安装SnappySnippet。它允许从指定的（最后检查的）DOM 节点中轻松提取 HTML+CSS。此外，您可以将代码直接发送到 CodePen 或 JSFiddle。享受！

Other features

其他特性

• cleans up HTML (removing unnecessary attributes, fixing indentation)
• optimizes CSS to make it readable
• fully configurable (all filters can be turned off)
• works with ::beforeand ::afterpseudo-elements
• nice UI thanks to Bootstrap& Flat-UIprojects

• 清理 HTML（删除不必要的属性，修复缩进）
• 优化 CSS 使其可读
• 完全可配置（可以关闭所有过滤器）
• 用作品::before和::after伪元素
• 漂亮的 UI 归功于Bootstrap和Flat-UI项目

Code

代码

SnappySnippet is open source, and you can find the code on GitHub.

SnappySnippet 是开源的，您可以在 GitHub 上找到代码。

Implementation

执行

Since I've learned quite a lot while making this, I've decided to share some of the problems I've experienced and my solutions to them, maybe someone will find it interesting.

因为我在做这个的过程中学到了很多东西，所以我决定分享一些我遇到的问题和我的解决方案，也许有人会觉得很有趣。

First attempt - getMatchedCSSRules()

第一次尝试 - getMatchedCSSRules()

At first I've tried retrieving the original CSS rules (coming from CSS files on the website). Quite amazingly, this is very simple thanks to window.getMatchedCSSRules(), however, it didn't work out well. The problem was that we were taking only a part of the HTML and CSS selectors that were matching in the context of the whole document, which were not matching anymore in the context of an HTML snippet. Since parsing and modifying selectors didn't seem like a good idea, I gave up on this attempt.

起初，我尝试检索原始 CSS 规则（来自网站上的 CSS 文件）。令人惊讶的是，这非常简单window.getMatchedCSSRules()，但效果并不好。问题是我们只采用了在整个文档的上下文中匹配的 HTML 和 CSS 选择器的一部分，而在 HTML 片段的上下文中不再匹配。由于解析和修改选择器似乎不是一个好主意，我放弃了这个尝试。

Second attempt - getComputedStyle()

第二次尝试 - getComputedStyle()

Then, I've started from something that @CollectiveCognition suggested - getComputedStyle(). However, I really wanted to separate CSS form HTML instead of inlining all styles.

然后，我从@CollectiveCognition 建议的东西开始 - getComputedStyle()。但是，我真的很想将 CSS 表单 HTML 分开，而不是内联所有样式。

Problem 1 - separating CSS from HTML

问题 1 - 从 HTML 中分离 CSS

The solution here wasn't very beautiful but quite straightforward. I've assigned IDs to all nodes in the selected subtree and used that ID to create appropriate CSS rules.

这里的解决方案不是很漂亮，但很简单。我已将 ID 分配给所选子树中的所有节点，并使用该 ID 创建适当的 CSS 规则。

Problem 2 - removing properties with default values

问题 2 - 删除具有默认值的属性

Assigning IDs to the nodes worked out nicely, however I found out that each of my CSS rules has ~300 properties making the whole CSS unreadable.
Turns out that getComputedStyle()returns all possible CSS properties and values calculated for the given element. Some of them where empty, some had browser default values. To remove default values I had to get them from the browser first (and each tag has different default values). The solution was to compare the styles of the element coming from the website with the same element inserted into an empty <iframe>. The logic here was that there are no style sheets in an empty <iframe>, so each element I've appended there had only default browser styles. This way I was able to get rid of most of the properties that were insignificant.

为节点分配 ID 效果很好，但是我发现我的每个 CSS 规则都有大约 300 个属性，使整个 CSS 不可读。
结果是getComputedStyle()返回为给定元素计算的所有可能的 CSS 属性和值。其中一些为空，一些具有浏览器默认值。要删除默认值，我必须首先从浏览器中获取它们（每个标签都有不同的默认值）。解决方案是将来自网站的元素的样式与插入到空的<iframe>. 这里的逻辑是在一个空的 中没有样式表<iframe>，所以我在那里附加的每个元素只有默认的浏览器样式。通过这种方式，我能够摆脱大多数无关紧要的属性。

Problem 3 - keeping only shorthand properties

问题 3 - 只保留速记属性

Next thing I have spotted was that properties having shorthand equivalent were unnecessarily printed out (e.g. there was border: solid black 1pxand then border-color: black;, border-width: 1pxitd.).
To solve this I've simply created a list of properties that have shorthand equivalents and filtered them out from the results.

我发现的下一件事是，不必要地打印出具有速记等效项的属性（例如，有border: solid black 1px然后border-color: black;，它border-width: 1px。）。
为了解决这个问题，我简单地创建了一个具有速记等效项的属性列表，并将它们从结果中过滤掉。

Problem 4 - removing prefixed properties

问题 4 - 删除前缀属性

The number of properties in each rule was significantly lower after the previous operation, but I've found that I sill had a lot of -webkit-prefixed properties that I've never hear of (-webkit-app-region? -webkit-text-emphasis-position?).
I was wondering if I should keep any of these properties because some of them seemed useful (-webkit-transform-origin, -webkit-perspective-originetc.). I haven't figured out how to verify this, though, and since I knew that most of the time these properties are just garbage, I decided to remove them all.

在每个规则属性的数量先前的操作后，显著回落，但我发现，我窗台有很多的-webkit-前缀属性，我从来没有听到（-webkit-app-region？-webkit-text-emphasis-position？）。
我想知道我是否应该保留这些特性，因为他们中的一些似乎是有益（-webkit-transform-origin，-webkit-perspective-origin等等）。不过，我还没有想出如何验证这一点，因为我知道大多数时候这些属性只是垃圾，所以我决定将它们全部删除。

Problem 5 - combining same CSS rules

问题 5 - 组合相同的 CSS 规则

The next problem I have spotted was that the same CSS rules are repeated over and over (e.g. for each <li>with the exact same styles there was the same rule in the CSS output created).
This was just a matter of comparing rules with each other and combining these that had exactly the same set of properties and values. As a result, instead of #LI_1{...}, #LI_2{...}I got #LI_1, #LI_2 {...}.

我发现的下一个问题是相同的 CSS 规则一遍又一遍地重复（例如，对于每个<li>具有完全相同的样式，在创建的 CSS 输出中都有相同的规则）。
这只是相互比较规则并将具有完全相同属性和值集的规则组合起来的问题。结果，而不是#LI_1{...}, #LI_2{...}我得到了#LI_1, #LI_2 {...}.

Problem 6 - cleaning up and fixing indentation of HTML

问题 6 - 清理和修复 HTML 的缩进

Since I was happy with the result, I moved to HTML. It looked like a mess, mostly because the outerHTMLproperty keeps it formatted exactly as it was returned from the server.
The only thing HTML code taken from outerHTMLneeded was a simple code reformatting. Since it's something available in every IDE, I was sure that there is a JavaScript library that does exactly that. And it turns out that I was right (jquery-clean). What's more, I've got unnecessary attributes removal extra (style, data-ng-repeatetc.).

因为我对结果很满意，所以我转向了 HTML。它看起来一团糟，主要是因为该outerHTML属性使其格式与从服务器返回的完全相同。
唯一outerHTML需要提取的 HTML 代码是简单的代码重新格式化。由于它在每个 IDE 中都可用，我确信有一个 JavaScript 库可以做到这一点。事实证明我是对的 (jquery-clean)。更重要的是，我已经得到了不必要的属性去除多余的（style，data-ng-repeat等等）。

Problem 7 - filters breaking CSS

问题 7 - 过滤器破坏 CSS

Since there is a chance that in some circumstances filters mentioned above may break CSS in the snippet, I've made all of them optional. You can disable them from the Settingsmenu.

由于在某些情况下上述过滤器可能会破坏代码段中的 CSS，因此我将它们全部设为可选。您可以从“设置”菜单中禁用它们。

回答by kenwarner

I originally asked this question I was looking for a Chrome (or FireFox) solution, but I stumbled across this feature in Internet Explorer developer tools. Pretty much what I'm looking for (except for the javascript)

我最初问这个问题时我正在寻找 Chrome（或 FireFox）解决方案，但我在 Internet Explorer 开发人员工具中偶然发现了这个功能。几乎是我正在寻找的（javascript 除外）

Result:

结果：

回答by Collective Cognition

Webkit browsers (not sure about FireBug) allow you to copy the HTML of an element easily, so that's one part of the process out of the way.

Webkit 浏览器（不确定 FireBug）允许您轻松复制元素的 HTML，因此这是该过程的一部分。

Running this (in the javascript console) prior to copying the HTML for an element will move all the computed styles for the parent element given, as well as all child elements, into the inline style attribute which will then be available as part of the 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);

}

It's a total hack and you'll have alot of "junk" css attributes to wade through, but should at least get your started.

这是一个彻头彻尾的黑客，你将有很多“垃圾”css 属性需要通过，但至少应该让你开始。

回答by Florentin

I've created this tool years ago for the same purpose:
http://www.betterprogramming.com/htmlclipper.html

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

You're welcome to use and improve upon it.

欢迎您使用和改进它。

回答by Jitendra Vyas

This can be done by Firebug Plugin called scrapbook

这可以通过称为剪贴簿的 Firebug 插件完成

You can check Javascript option in setting

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

Edit:

编辑：

Thiscan also help

这也可以帮助

Firequark is an extension to Firebug to aid the process of HTML Screen Scraping. Firequark automatically extracts css selector for a single or multiple html node(s) from a web page using Firebug (a web development plugin for Firefox). The css selector generated can be given as an input to html screen scrapers like Scrapi to extract information. Firequark is built to unleash the power of css selector for use of html screen scraping.

Firequark 是 Firebug 的扩展，用于辅助 HTML 屏幕抓取过程。Firequark 使用 Firebug（Firefox 的 Web 开发插件）从网页中自动提取单个或多个 html 节点的 css 选择器。生成的 css 选择器可以作为输入给像 Scrapi 这样的 html 屏幕抓取工具来提取信息。Firequark 旨在释放 css 选择器的强大功能，以使用 html 屏幕抓取。

回答by ato3787045

divclipis an updated version of Florentin Sardan's htmlclipper

divclip是 Florentin Sardan 的htmlclipper的更新版本

with modern enhancements: ES5, HTML5, scoped CSS...

具有现代增强功能：ES5、HTML5、作用域 CSS...

you can programmatically extract a stylized div with:

您可以通过以下方式以编程方式提取风格化的 div：

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

Enjoy.

享受。

回答by GarryOne

There is no plugins needed. It can be done very simply with Internet Explorer 11 native Developer Tools with just one click, very clean. Just right on an element and inspect that element, and right click on some block and choose "Copy element with styles". You can see it in the below image.

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

It provides the css code very clean, like

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

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

回答by melwyn pawar

Lately I created a chrome extension "eXtract Snippet" for copying the inspected element, html and only the relevant css and media queries from a page. Note that this would give you the actual relevant CSS

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

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

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

回答by Moin Zaman

http://clipboardjs.comdoes this and quite well. Although your expectation of the copied version being exactly as in the original so you can play and learn with it, may not be realistic.

http://clipboardjs.com可以很好地做到这一点。尽管您对复制版本的期望与原版完全相同，以便您可以玩和学习，但可能并不现实。

回答by GmonC

A tool with a single solution for this I'm unaware of, but you can use Firebug and Web Developer extensionat the same time.

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

Use Firebug to copy the html section you need (Inspect Element) and Web Developer to see which css is associated with an element (Calling Web Developer "View Style Information" - it works like Firebug's "Inspect Element", but instead of showing the html markup it shows the associated CSS with that markup).

使用 Firebug 复制您需要的 html 部分（Inspect Element）和 Web Developer 以查看哪个 css 与元素相关联（调用 Web Developer“查看样式信息”-它的工作方式类似于 Firebug 的“检查元素”，但不显示 html标记显示与该标记相关联的 CSS）。

It's not exactlywhat you want (one click for everything), but it's pretty close, and at least intuitive.

这并不完全是您想要的（单击所有内容），但它非常接近，并且至少是直观的。