有选择地从现有站点复制HTML + CSS + JS的工具
转载：www.codenong.com/4911338/
cssfirebuggoogle-chrome-devtoolshtmlinternet-explorer
需求
[问题描述]
1.使用chrome打开一个地址
2.发现有个div实现了特效,10分牛逼
3.在chrome有什么插件可以将这个div及其子元素结构和css和子元素的css一键复制出来吗?\
Tools to selectively copy HTML+CSS+JS from existing sites
像大多数Web开发人员一样，我偶尔会查看网站的来源，看看他们的标记是如何构建的。 像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但如果我想复制一个孤立的部分并在本地使用它，那么复制所有单个元素及其相关的css将是一件痛苦的事。 并且可能同样需要保存整个源并删除不相关的代码。
如果我可以右键单击Firebug中的节点并且"为此节点保存HTML + CSS"选项，那就太棒了。 这样的工具存在吗？ 是否可以扩展Firebug或Chrome开发者工具来添加此功能？
SnappySnippet
我终于找到了一些时间来创建这个工具。您可以从Chrome网上应用店安装SnappySnippet。它允许从指定的(最后检查的)DOM节点轻松提取HTML + CSS。此外，您可以将代码直接发送到CodePen或JSFiddle。请享用！
其它功能
-
清理HTML(删除不必要的属性，修复缩进)
-
优化CSS使其可读
-
完全可配置(可关闭所有过滤器)
-
适用于::before和::after伪元素
-
由于Bootstrap和Flat-UI项目，很好的用户界面
码
SnappySnippet是开源的，你可以在GitHub上找到代码。
方法2 谷歌浏览器F12
选中要复制的元素，右键选择Copy--> Copy OuterHTML 和Copy --> Copy styles也可以
