常规的Chrome DevTools面板功能非常强大。它允许任何人深入研究任何页面，以研究网站的布局、CSS，甚至 HTTP 标头（如果需要）。
您可以使用 DevTools CSS 检查器做很多事情。但它没有清晰的 GUI 面板，而这是每个开发人员都喜欢的。
查看CSSPeeper，这是一款免费的 Chrome 扩展程序，可将此 GUI 检查器添加到您的浏览器中。它可以让您研究任何页面上任何元素的 CSS 属性，尽管它目前仅适用于 Chrome。
安装后，您只需访问网页并点击Chrome 附加组件栏中扩展程序的主按钮即可。网页顶部会出现一个新的检查器窗口，其中包含每个主要元素的详细信息。
浏览网站时，您可以点击任何带有虚线轮廓的元素。这可以包括按钮、页面部分、标题、导航项等等。
从那里，您将获得一个完整的检查器，其中包含有关排版、颜色选择和字体样式的详细信息。这是一种直接从网页中提取样式的好方法，而无需自己深入研究 CSS 代码。
CSSPeeper 甚至允许您使用内置的颜色选择器和配色方案生成器来选择相关颜色。您可以从页面导出图像，构建自己的配色方案，然后使用 Photoshop 或 Sketch将其应用到您自己的模型中。
我主要向设计师而不是开发人员推荐这个扩展，因为它是一个更加设计师友好的插件，可以提取原始 CSS 并将代码转换为易于阅读的数据块。
但是这个插件也可以帮助开发人员！它确实是一个适用于所有类型 CSS 的强大站点检查工具。
查看CSSPeeper 主页以了解其功能。主页还包含 Chrome 商店的链接，因此您可以免费安装扩展程序并试用。
欢迎关注我，共同探讨学习科技前沿技术资讯，提升认知赚钱能力。
