从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具

问题描述

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

如果我可以在 Firebug 中右键单击一个元素并有一个为这个元素保存 HTML+CSS+JS"，那就太好了.选项.有这样的工具吗?是否可以扩展 Firebug 或 Chrome 开发者工具来添加此功能?

解决方案

SnappySnippet

我终于找到了一些时间来创建这个工具.您可以从 Github 安装 &Flat-UI 项目

代码

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

实施

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

第一次尝试 - getMatchedCSSRules()

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

第二次尝试 - getComputedStyle()

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

问题 1 - 将 CSS 与 HTML 分离

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

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

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

问题 3 - 只保留速记属性

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

问题 4 - 删除前缀属性

上次操作后每个规则中的属性数量明显减少，但我发现我仍然有很多我从未听说过的-webkit-前缀属性(-webkit-app-region? -webkit-text-emphasis-position?).
我想知道我是否应该保留这些属性中的任何一个，因为其中一些看起来很有用(-webkit-transform-origin、-webkit-perspective-origin 等).不过，我还没有想出如何验证这一点，因为我知道大多数时候这些属性只是垃圾，所以我决定将它们全部删除.

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

我发现的下一个问题是相同的 CSS 规则一遍又一遍地重复(例如，对于每个具有完全相同样式的

，在创建的 CSS 输出中都有相同的规则).
这只是相互比较规则并将具有完全相同属性和值集的规则组合起来的问题.结果，我得到了 #LI_1, #LI_2 {...} 而不是 #LI_1{...}, #LI_2{...}.>

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

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

问题 7 - 过滤器破坏 CSS

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

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 a specific 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.

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

解决方案

SnappySnippet

I finally found some time to create this tool. You can install SnappySnippet from 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!

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 ::before and ::after pseudo-elements
• nice UI thanks to Bootstrap & Flat-UI projects

Code

SnappySnippet is open source, and you can find the code on 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()

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.

Second attempt - 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.

Problem 1 - separating CSS from HTML

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.

Problem 2 - removing properties with default values

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.

Problem 3 - keeping only shorthand properties

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

Problem 4 - removing prefixed properties

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-origin etc.). 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.

Problem 5 - combining same CSS rules

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 {...}.

Problem 6 - cleaning up and fixing indentation of HTML

Since I was happy with the result, I moved to HTML. It looked like a mess, mostly because the outerHTML property keeps it formatted exactly as it was returned from the server.
The only thing HTML code taken from outerHTML needed 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-repeat etc.).

Problem 7 - filters breaking 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 Settings menu.

这篇关于从 DOM 的特定元素选择性地复制 HTML+CSS+JS 的工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！