网页的开发者在设计一个网页的时候,如果使用的CSS是一些公共库,比如jQuery UI,bootstrap等库的时候,需要大量的公共库CSS名称,如果用户只是参照API的话,在查看了大量API会浪费很多时间,如果给用户一个DEMO的页面,让用户自由查看该页面中的元素CSS,就可以让用户迅速地模仿和使用这些公共库,从而达到加快开发速度的目的。

插件简介

CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件,在Chrome中安装了CSSViewer插件以后,用户就可以在设计网页的时候,快速地模仿网页中某个元素的表现形式,这对于一些使用公共库的开发者来说会大大地节约开发时间(寻找api的时间),用户只需要把鼠标放在元素上就可以快速地查看该元素的具体CSS属性。

使用方法

点击Chrome右上角的CSSViewer插件按钮,这时候,用户就可以把鼠标在网页中进行浮动,从而找到需要看到的CSS属性,当用户浮动到一个元素上的时候,CSSViewer插件会自动以弹出窗口的形式,提醒用户该元素的详细CSS内容,包括字体大小、CSS类名、背景颜色、宽度、高度等,如图所示:

注意事项

1.CSSViewer查看器只能查询到当前网页元素的CSS元素属性,对于网页中的Javascript无法进行查看到,有脚本多元素进行CSS影响时,CSSViewer插件也无法检测到变化。

2.用户需要先点击Chrome右上角的CSSViewer插件按钮,才能启动CSS的观察模式,再次点击就可以取消。

 

请扫码关注公众号,更多精彩内容等你来!

插件下载地址:

此处内容已经被作者无情的隐藏,请输入验证码查看内容:
验证码:
请关注本站公众号回复“验证码”,获取验证码。 【注】”在微信里搜索“不会笑青年”或者“laughyouth”或者微信扫描右侧二维码都可以关注微信公众号。
不会笑青年

小白学堂 » CSSViewer丨CSS查看器

就聊挣钱,一个带着你做副业的社群。

立即查看 了解详情