從現有站點有選擇地複製HTML + CSS + JS的工具[關閉]

像大多數Web開發人員同樣，我偶爾會查看網站的來源，看看他們的標記是如何構建的。 像Firebug和Chrome開發者工具這樣的工具能夠很容易地檢查代碼，但若是我想複製一個孤立的部分並在本地使用它，那麼複製全部單個元素及其相關的css將是一件痛苦的事。 而且可能一樣須要保存整個源並刪除不相關的代碼。

若是我能夠右鍵單擊Firebug中的節點而且「爲此節點保存HTML + CSS」選項，那就太棒了。 這樣的工具存在嗎？ 是否能夠擴展Firebug或Chrome開發者工具來添加此功能？

---

#1樓

http://clipboard.com作得很好。 雖然您對複製版本的指望與原版徹底一致，所以您可使用它進行遊戲和學習，但這可能並不現實。

---

#2樓

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

結果：

---

#3樓

多年前我爲了一樣的目的建立了這個工具：
http://www.betterprogramming.com/htmlclipper.html

歡迎您使用和改進它。

---

#4樓

只需從網頁上覆制您想要的部分，而後將其粘貼到wysiwyg編輯器中便可。 單擊編輯器工具欄上的「源」按鈕檢查html源代碼。

當我在Drupal網站上工做時，我發現了這種最簡單的方法。 我用的是wysiwyg CKeditor。

---

#5樓

SnappySnippet

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

其餘特性

• 清理HTML（刪除沒必要要的屬性，修復縮進）
• 優化CSS使其可讀
• 徹底可配置（可關閉全部過濾器）
• 使用::before和::after僞元素
• 因爲Bootstrap和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屬性和值。 其中一些是空的，一些有瀏覽器默認值。 要刪除默認值，我必須先從瀏覽器中獲取它們（而且每一個標記都有不一樣的默認值）。 解決方案是未來自網站的元素的樣式與插入到空<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庫正是這樣作的。 事實證實我是對的（jquery-clean） 。 更重要的是，我有額外的沒必要要的屬性刪除（ style ， data-ng-repeat等）。

問題7 - 過濾器破解CSS

因爲在某些狀況下，上面提到的過濾器可能會破壞代碼段中的CSS，所以我將全部過濾器都設爲可選。 您能夠從「 設置」菜單中禁用它們。