使用此Chrome扩展程序的任何网站上的详细CSS检查器

常规的Chrome DevTools面板功能强大。 它使任何人都可以深入任何页面来研究站点的布局，CSS甚至是HTTP标头（如果需要）。

您可以使用DevTools CSS检查器执行很多操作。 但是它没有一个清晰的GUI面板，这是每个开发人员都会喜欢的一件事。

查看CSSPeeper ，这是一个免费的Chrome扩展程序，可将此GUI检查器添加到您的浏览器中。 尽管它目前仅是为Chrome构建的，但它可以让您研究任何页面上任何元素CSS属性。

安装后，您只需访问一个网页，然后在Chrome加载项栏中单击扩展程序的主按钮即可 。 一个新的检查器窗口将显示在网页顶部，其中包含有关每个主要元素的详细信息。

浏览站点时，可以单击带有虚线轮廓的任何元素。 您可以为其命名，包括按钮，页面部分，标题，导航项。

从那里，您将得到整个检查员的详细信息，包括字体，颜色选择和字体样式。 这是直接从网页提取样式的好方法，而无需您自己研究CSS代码。

CSSPeeper甚至允许您使用内置的颜色选择器和颜色方案生成 器选择相关的颜色 。 您可以从页面导出图像，构建自己的配色方案，然后使用Photoshop或Sketch 将它们应用于您自己的模型中 。

我主要向设计人员而不是开发人员推荐此扩展，因为它是一个对设计人员更友好的插件，可提取原始CSS并将代码转换为易于读取的数据块。

但是这个插件也可以帮助开发人员！ 对于所有类型CSS来说，它确实是一个功能强大的站点检查工具 。

查看CSSPeeper主页，以了解有关其功能的更多信息。 主页上还包含一个指向Chrome商店的链接，因此您可以免费安装扩展程序并将其取出进行测试。

翻译自: https://www.hongkiat.com/blog/csspeeper-chrome-extension/