今天为大家介绍一款浏览器插件—CSS Peeper ，有了这款chrome 插件，设计师可以不再需要挖掘代码，因为CSS Peeper可以非常方便的查看网页中的css样式。总结一句话就是让设计师专注于设计，并在代码中花费尽可能少的时间。
前段时间我们团队创建了名为CSS Peeper的 Chrome扩展程序，让设计师在工作中更加轻松。曾经我们时常想知道网站上的行高，字体或按钮大小是多少，现在我们为您提供满足您设计好奇心的终极工具。
下面你会看到一个关于这个工具是如何开发的简短故事，以及我们通过Chrome扩展程序为您提供有哪些功能。
目录 [显示]
背景故事
想象一下，您正在重新设计数字产品而没有风格指南可供参考。您可能要做的第一件事就是去产品网站检查设计系统和品牌的本质：颜色，排版，间距以及寻找特定的图像或图标。
你可能想要检查一些现有的CSS样式，获取调色板或下载一些可能有用的素材。问题是：如果不深入浏览器的代码检查器，您如何获得这些？
作为Chrome用户，我去寻找一个基本上可以为我解决这些问题的扩展。我发现了很多不同的插件：设计很差，只解决小问题，都不是以用户为中心。他们中的许多设计都没有注重细节和可用性问题。
事实上，这些插件都没有完全解决我的问题，也没有完美的解决方案。
基本上我无法找到符合我所有需求的Chrome扩展程序。我决定问其他设计师他们是否曾经找到类似的工具。令人惊讶的是，他们会用到非常多的扩展程序去解决当前的问题，这对设计师而言势必是很麻烦的一件事。
我一直希望为每位设计师提供类似瑞士军刀的扩展。这就是我们决定创建CSS Peeper的原因。
经过几个小时的搜索，我决定从零开始创造新的扩展工具。这个想法变成了一个名为CSS Peeper的项目。我已经向我的朋友JędrzejDadowski提出了这个设计概念，他是一位出色的前端开发人员，一切就绪，马上开工！
认识CSS Peeper
我们追求的目标很简单，它必须是一个不太复杂而方便的代码检查器，并且它能给我展示所有必要的样式。在这些需求的推动下，我为这款工具定义了需求清单：
- 检查Web上可用的样式，而无需切换插件。
- 快速浏览网站上使用的排版（字体系列，大小，行高等）。
- 能够在不检查网站的情况下查看网站上的所有颜色。
- 检查单个元素以获得大小，填充和样式效果，如阴影，悬停状态等。
- 只需点击一下即可下载素材（pngs，svgs，jpgs等）。
- 最佳用户体验的UI设计。
- 以简单，组织良好和美观的方式提供所有信息。
就是这样子，上面所列的需求被转换为第一版CSS Peeper的所有功能。
满足设计师的期望
我想到的第一件事就是UI的简洁和美观。其实为设计师设计一款工具是一件非常困难的事情。我们必须要看到其他人没有看到的要素，并且界面留给别人的第一印象一定要深刻，使用起来非常愉悦而又完美无瑕。
选择要检查的项目
我们扩展工具的核心功能：当您启动它时，您可以单击网站上的不同对象，如按钮，标题，背景和您要检查的任何内容。
因此，您将获得所选对象的完整信息，并提供一些便于在Sketch或Photoshop中使用的参数属性。
CSS Peeper允许您检查网站上使用的所有颜色。您可以通过在几秒钟内就可以找到你所需要的颜色参数。
我们计划添加快速复制选项，并可以在不同的颜色值（如HSL或RGB）之间切换。如果您在使用过程看到更多改进的空间，请告诉我们，我们将实现这一目标！
下载素材
如果您曾尝试从代码中最深的嵌套中提取某些资源（如图像，svg图标等），那你一定会非常喜欢我们开发的下载资源功能。
CSS Peeper为您简化了繁琐的工作，您无需深入挖掘代码。因为我们提供逐个下载资源或将它们全部打包为.zip文件的功能。
到目前为止发生了什么
我们真的很高兴地宣布，自CSS Peeper推出以来，我们目前拥有超过16,000名用户！太棒了！除了这个数字，我们收集了数百条积极意见，并从我们的用户那里获得了一些非常有价值的反馈。下面你可以找到那段时间的一些有趣的图表。
2016年12月19日至2017年1月2日期间收集的数据
发布后差不多三天，关于CSS Peeper的消息传开了，我们在最受欢迎的设计博客中被推荐：
我们受到了来自世界各地的数百名设计师的热烈欢迎。这是一种激励，并使我们有能力开发CSS Peeper……
我们需要您的意见！
目前我们已经提供了可以免费下载并使用产品，我们希望扩展工具可以满足用户需求。我们对这个小产品有自己的看法，但我们也想直接听取您的意见！
或者直接下载
我们真的很想从设计师自己那里听到更多，并了解他们对使用CSS Peeper的感受，以便我们可以设计以用户为中心的工具。您的所有建议和想法对我们来说都是非常宝贵的！
如果您有任何问题，建议或只是想表达您的支持 – 我们建议您发表评论或在Twitter或Facebook上找到我们。
如果你喜欢你所读的内容，别忘了点亮下面的小心！
