使用CSSPeeper for Chrome在每个网站上详细查看CSS Inspector

常规的Chrome DevTools面板非常强大。它可以让任何人深入到任何页面来研究网站的布局，CSS，甚至HTTP头（如果需要的话）。

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

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

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

当你浏览网站时，你可以点击任何你看到的带有虚线轮廓的元素。这可以包括按钮，页面部分，标题，导航项目，您可以将其命名。

从那里你会得到一个完整的检查员的详细排版，颜色选择和字体样式。这是直接从网页中抽取样式而不用自己挖掘CSS代码的好方法。

CSSPeeper甚至可以让您使用内置的颜色选择器和配色方案生成器来选择相关的颜色。您可以从页面导出图像，构建自己的配色方案，并将这些图像应用到 Photoshop或Sketch中的自己的模型中。

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