如何使用Google Chrome和SnappySnippet扩展名从DOM元素中检索HTML和CSS源代码

本文概述

作为Web开发人员, 你有时可能会查看许多网站的源代码, 以了解如何构建标记, CSS和javascript代码。你可能会发现太有趣的DOM元素片段, 而且看起来很酷, 并且你可能想在一个项目中复制该功能, 而不必下载整个Framework仅使用例如按钮的样式, 因为这简直太荒谬了。

如果你确实需要该按钮, 则需要检查代码, 复制标记并阅读使用哪些类。但是, 这非常曲折, 你将花费太多时间。

如果有一种方法可以自动为你执行该任务怎么办？好吧, 我为你介绍了SnappySnippet一个很棒的扩展, 可以为你完成这项艰巨的任务。

SnappySnippet是一个DevTools扩展, 允许你从选定的DOM子树(最后检查的元素)中提取CSS和HTML。然后, 只需单击一下, 就可以将选定的代码发送到CodePen, jsFiddle或JS Bin。

在浏览器中安装SnappySnippet扩展之后, 使用它就很容易了。

检查你在文档中发现有趣的元素, 在这种情况下, 我们将检查一个简单的boostrap按钮。

然后, 浏览控制台选项卡, 然后转到SnappySnippet选项卡。

最后, 单击”从检查的元素创建代码段”按钮。

标记将显示在HTML文本区域中, 而使元素看起来如何所需的CSS所需代码将显示在左侧区域的CSS文本区域中。

你可以查看代码段的预览, 将代码(通过按钮以POST形式)发送到其他在线沙箱, 并查看代码段的外观。如果你对结果不满意, 可以尝试在”设置”按钮中自定义SnappySnippet的配置设置, 以在代码段中包含祖先元素, 并包括前缀, 混合类等其他内容。

下图显示了所需的代码, 以显示一个简单的主类引导按钮, 在jsBin中显示。

玩得开心