作为网络开发人员,我们有时可能会在网站上发现一些启发性的元素,这使您想知道他们是如何构建这种东西的。 然后,您将考虑获取该代码的副本。 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的地方。
![](https://i-blog.csdnimg.cn/blog_migrate/08fcab9c9aae989d59c41e5f6c8b433c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/08fcab9c9aae989d59c41e5f6c8b433c.png)
为了对其进行测试,我们准备了一个包含几个HTML元素的网页,形成了一个非常不错的简单Web登录表单 。 这些HTML元素均继承CSS代码。 要使用浏览器DevTools中的常规功能以传统方式复制所有这些代码,将需要一些工作。
![](https://i-blog.csdnimg.cn/blog_migrate/d6c5f3f296e4e60b694b1423b8de3aad.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d6c5f3f296e4e60b694b1423b8de3aad.png)
但是,有了SnappySnippet,一切都变得更加简单。
首先,选择要复制的元素,然后打开“ SnappySnippet”选项卡,然后单击“ 从检查的元素创建片段”按钮。
![](https://i-blog.csdnimg.cn/blog_migrate/ebd07327caa9dcb80c6207e15f8eb843.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ebd07327caa9dcb80c6207e15f8eb843.png)
正如您在下面的屏幕快照中看到的那样,我们选择的元素被复制并包含子元素,并被放置在左侧的HTML窗格中。 塑造这些HTML元素的所有样式规则也将被复制并放置在CSS窗格中。
![](https://i-blog.csdnimg.cn/blog_migrate/340265db42f4d1a87e22d441dd1d8705.png)
![](https://i-blog.csdnimg.cn/blog_migrate/340265db42f4d1a87e22d441dd1d8705.png)
设定
SnappySnippet允许我们设置代码输出。 在用于放置HTML和CSS的两个窗格下,您将找到“ 设置”面板。 您可以进行一些设置,例如从输出中删除带有-webkit-
前缀CSS属性,为给HTML元素提供的ID插入前缀,等等。
![](https://i-blog.csdnimg.cn/blog_migrate/e98e868983d4286ff8d76e25f7236550.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e98e868983d4286ff8d76e25f7236550.png)
代码共享
Web开发人员可能熟悉诸如Codepen之类的代码共享平台。 该网站允许Web开发人员共享工作代码段 。 它就像一个社交网站,但是我们不共享状态和自拍照,而是共享代码。 使用SnappySnippet,可以将已复制的代码发送到Codepen , JSFiddle和JSBin。
要发送代码,请确保已登录要发送代码的相应网站。 这也是为了确保代码将立即保存到您的帐户中。 然后只需单击这三个共享按钮之一。
![](https://i-blog.csdnimg.cn/blog_migrate/89a9209e901e5015207d62a63354fbb9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/89a9209e901e5015207d62a63354fbb9.png)
您复制的代码将完全返回您在网站上看到的代码。
![](https://i-blog.csdnimg.cn/blog_migrate/d4c863878b660fe4ac24a4a58c7527b1.png)
最终思想
SnappySnippet是用于复制代码的非常方便的工具,但请记住不要将其用作窃其他开发人员代码的方法 。 无论您做什么复制,都以学习为目标,希望从所使用的技术中学到新东西。 不论是否受版权保护,均不得公然复制。 请正确使用此工具。
翻译自: https://www.hongkiat.com/blog/snappysnippet-copy-codes/