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

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

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

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

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

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

网站建设

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

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

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

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

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