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

常规的Chrome DevTools面板功能强大。它使任何人都可以深入任何页面来研究站点的布局,CSS甚至是HTTP标头(如果需要)。 您可以使用DevTools CSS检查器执行很多操作。但是它没有清晰的GUI面板,这是每个开发人员都会喜欢的一件事。 查看CSSPeeper,这是一个免费的Chrome扩展程 WP网站建设

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

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

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

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

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

WordPress网站建设

WordPress网站建设

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

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

WordPress网站建设

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

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

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/12031

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code