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是用于复制代码的非常方便的工具，但请记住不要将其用作窃其他开发人员代码的方法 。 无论您做什么复制，都以学习为目标，希望从所使用的技术中学到新东西。 不论是否受版权保护，均不得公然复制。 请正确使用此工具。