SnappySnippet：Chrome擴充套件程式，可輕鬆從選定元素中提取CSS和HTML
使用SnappySnippet輕鬆從網站複製程式碼
作為網路開發人員，我們有時可能會在網站上發現一些啟發性的元素，這使您想知道他們是如何構建這種東西的。 然後，您將考慮獲取該程式碼的副本。 Chrome Devtools和Firefox的Firebug實際上已經附帶了該功能，使我們可以輕鬆地從網站上覆制HTML和CSS。
但是， 這些工具只能複製HTML或CSS。 您不能使用這些工具複製與所選HTML元素相關CSS。 例如，假設您選擇HTML元素包含幾個子元素，如下所示。
<div class="container">
<button>Submit</button>
<p><span>By submitting you are agree to our term and condition</span></p>
</div>其中的每個元素在樣式表中都有自己的特定樣式規則。 一些HTML元素可能繼承了一些樣式規則，這會使將HTML和CSS一起復制變得棘手 。 在這裡，您會喜歡SnappySnippets之類的工具。
入門
SnappySnippet是一個Chrome擴充套件程式（ 在此處獲取），安裝後將在Google Chrome DevTools中為您提供一個名為SnappySnippet的新標籤。 這是我們將操作SnappySnippet的地方。
為了對其進行測試，我們準備了一個包含幾個HTML元素的網頁，形成了一個非常不錯的簡單Web登入表單 。 這些HTML元素均繼承CSS程式碼。 要使用瀏覽器DevTools中的常規功能以傳統方式複製所有這些程式碼，將需要一些工作。
但是，有了SnappySnippet，一切都變得更加簡單。
首先，選擇要複製的元素，然後開啟“ SnappySnippet”選項卡，然後單擊“ 從檢查的元素建立片段”按鈕。
正如您在下面的螢幕快照中看到的那樣，我們選擇的元素被複制幷包含子元素，並被放置在左側的HTML窗格中。 塑造這些HTML元素的所有樣式規則也將被複制並放置在CSS窗格中。
設定
SnappySnippet允許我們設定程式碼輸出。 在用於放置HTML和CSS的兩個窗格下，您將找到“ 設定”面板。 您可以進行一些設定，例如從輸出中刪除帶有-webkit-字首CSS屬性，為給HTML元素提供的ID插入字首，等等。
程式碼共享
Web開發人員可能熟悉諸如Codepen之類的程式碼共享平臺。 該網站允許Web開發人員共享工作程式碼段 。 它就像一個社交網站，但是我們不共享狀態和自拍照，而是共享程式碼。 使用SnappySnippet，可以將已複製的程式碼傳送到Codepen ， JSFiddle和JSBin。
要傳送程式碼，請確保已登入要傳送程式碼的相應網站。 這也是為了確保程式碼將立即儲存到您的帳戶中。 然後只需單擊這三個共享按鈕之一。
您複製的程式碼將完全返回您在網站上看到的程式碼。
最終思想
SnappySnippet是用於複製程式碼的非常方便的工具，但請記住不要將其用作竊其他開發人員程式碼的方法 。 無論您做什麼複製，都以學習為目標，希望從所使用的技術中學到新東西。 不論是否受版權保護，均不得公然複製。 請正確使用此工具。