從現有網站選擇性複製 HTML + CSS + JS 的工具

問題描述

像大多數網絡開發者一樣，我偶爾也想看看網站的來源，看看他們的標記是如何構建的。像 Firebug 和 Chrome Developer Tools 這樣的工具可以方便地檢查代碼，但是如果我要複製一個孤立的部分並在本地玩弄，那麼複製所有的單個元素及其關聯的 css 將是一件很痛苦的事情。而且可能只需要節省整個源代碼並刪除不相關的代碼。

如果我可以將 right-click 設置為 Firebug 中的一個節點，並且具有「為此節點保存 HTML + CSS」選項，那將是巨大的。這樣的工具是否存在？是否可以擴展 Firebug 或 Chrome 開發工具來添加此功能？

最佳解決方案

SnappySnippet

我終於找到了一些時間來創建這個工具。您可以從 Chrome 網上應用店安裝 SnappySnippet 。它允許從指定的 (最後檢查的)DOM 節點輕鬆進行 HTML + CSS 提取。此外，您可以將代碼直接發送到 CodePen 或 JSFiddle 。請享用！

其他特性

清理 HTML(刪除不必要的屬性，修復縮進)
優化 CSS 使其可讀
完全可配置 (所有過濾器都可以關閉)
與::before 和::after pseudo-elements 配合使用
感謝 Bootstrap& Flat-UI 項目

Code

SnappySnippet 是開源的，您可以找到 code on GitHub 。

Implementation

由於我在學習相當多的時候，我已經決定分享一些我遇到的問題和我的解決方案，也許有人會覺得有趣。

第一次嘗試– 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 屬性和值。其中有些是空的，有些具有瀏覽器默認值。要刪除默認值，我必須首先從瀏覽器中獲取它們 (每個標籤具有不同的默認值) 。解決方案是將來自網站的元素的樣式與插入到空的<iframe> 中的相同元素進行比較。這裏的邏輯是空的<iframe> 中沒有樣式表，所以我附加的每個元素只有默認的瀏覽器樣式。這樣我就可以擺脱大部分不重要的屬性了。

問題 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 規則重複重複 (例如，對於每個具有完全相同樣式的<li>，創建的 CSS 輸出中都有相同的規則) 。這僅僅是將規則相互比較，並將這些具有完全相同的屬性和值集合組合起來。結果，而不是 #LI_1{...}, #LI_2{...}我得到了 #LI_1, #LI_2 {...}。

問題 6 – 清理和固定 HTML 的縮進

由於我對結果很滿意，我轉到了 HTML 。它看起來像一個混亂，主要是因為 outerHTML 屬性保持格式完全一樣，從服務器返回。需要使用 outerHTML 的 HTML 代碼唯一的一個簡單的代碼重新格式化。由於每個 IDE 都有可用的東西，我確信有一個 JavaScript 庫完全正確。事實證明，I was right (jquery-clean)。此外，我有不必要的屬性刪除額外 (style，data-ng-repeat 等) 。

問題 7 – 過濾器打破 CSS

既然有機會在某些情況下上述的過濾器可能會破解該片段中的 CSS，所以我已經將其全部選為可選項。您可以從「設置」菜單中禁用它們。

次佳解決方案

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);

}

這是一個完整的黑客，你會有很多”junk” css 屬性來通過，但至少應該讓你的開始。

第三種解決方案

我最初問這個問題，我在尋找一個 Chrome(或 FireFox) 解決方案，但是我在 Internet Explorer 開發人員工具中偶然發現了這一功能。幾乎我正在尋找 (除了 javascript)

結果：

第四種方案

幾年前我已經創建了這個工具，用於相同的目的：http://www.betterprogramming.com/htmlclipper.html

歡迎您的使用和改進。

第五種方案

這可以通過名為 scrapbook 的 Firebug Plugin 完成

您可以在設置中檢查 Javascript 選項

編輯：

This 也可以幫忙

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.

第六種方案

divclip 是 Florentin Sardan 的 htmlclipper 的更新版本

具有現代增強功能：ES5，HTML5，範圍 CSS …

您可以通過以下方式以編程方式提取風格化的 div：

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

請享用。

第七種方案

最近我創建了一個鍍 chrome 擴展”eXtract Snippet” 來複制被檢查的元素，html 和只有相關的 CSS 和媒體查詢從頁面。請注意，這將給您實際的相關 CSS

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

第八種方案

一個具有單一解決方案的工具我不知道，但您可以同時使用 Firebug 和 Web Developer extension 。

使用 Firebug 來複制您需要的 html 部分 (Inspect Element) 和 Web Developer 來查看哪個 css 與元素相關聯 (調用 Web Developer「查看樣式信息」 – 它的工作原理就像 Firebug 的”Inspect Element”，而不是顯示 html 標記相關聯的 CSS 與該標記) 。

這不是你想要的 (一鍵點擊所有)，但它是非常接近，至少直觀。

第九種方案

http://clipboard.com 這樣做很好。雖然您對複製版本的期望與原始版本完全一樣，因此您可以玩它並學習，但可能不現實。

第十種方案

我也需要這個功能在 Firebug！在此之前，另一種方法是使用 this 在線服務來刪除類並將 CSS 轉換為內聯樣式。

參考文獻

Tools to selectively copy HTML+CSS+JS from existing sites [closed]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

從現有網站選擇性複製 HTML + CSS + JS 的工具