CSSViewer的简介

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


CSSViewer的开发背景

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


CSSViewer的使用方法

  1. 在谷歌浏览器中安装CSSViewer插件,并在Chrome的扩展器中启动CSS查看器的功能,CSSViewer插件的下载地址可以在本文的下方找到,离线CSSViewer插件的安装方法可参考: 怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?最新谷歌浏览器离线安装版可以从这里下载:http://chromecj.com/chrome/2014-09/177.html

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


CSSViewer的注意事项

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

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

Google浏览器开发者工具:CSSViewer(一个Css查看器)的更多相关文章

  1. 使用Google浏览器开发者工具学习HTTP请求记录

    GET请求 1.Google浏览器开发者工具截图图示 2.General Request URL :为请求链接 Status Code :为HTTP响应状态码 3.ResponseHeaders :响 ...

  2. 利用google浏览器开发者工具调试网页(详)

    前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者同行们,话不多说 ...

  3. Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程

    前言 在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具, ...

  4. 谷歌Chrome浏览器开发者工具的基础功能

    上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...

  5. [转]谷歌Chrome浏览器开发者工具教程—JS调试篇

    来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...

  6. 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍

    爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...

  7. Google Chrome开发者工具

    Google Chrome开发者工具 是内嵌到浏览器的开发工具,打开方式有两种:第一“按F12”,第二:shift+ctrl+i(火狐.360等浏览器也可以这么用) Console介绍 Console ...

  8. 爬虫笔记之JS检测浏览器开发者工具是否打开

    在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理.本篇文章主要讲述几种前端JS检测开发者工具是 ...

  9. chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?

    目录 chrome浏览器 开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...

随机推荐

  1. CentOS 7.2更改网卡名称

    背景 没啥背景,就是VMWare装的CentOS虚拟机的自带网卡名有点乱,想重新定义一下. 环境 1.VMWare虚拟机 6张网卡 2.系统 [root@localhost ~]# cat /etc/ ...

  2. Difference between HttpContext.Request and Request

    https://stackoverflow.com/questions/5547989/difference-between-httpcontext-request-and-request Well: ...

  3. Managing SQLite Database

    Approach #1: Use a Singleton to Instantiate the SQLiteOpenHelper Declare your database helper as a s ...

  4. bzoj1499 [NOI2005]瑰丽华尔兹——单调队列优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1499 朴素DP方程很好想,以右移为例,就是 f[i][x][y]=max(f[i][x][y ...

  5. cocos2d-x-2.1.5版本在Xcode4.2中首次编译ccimage Semantic Issue出错解决方法

    // XXX: ios7 casting [str drawInRect:CGRectMake(textOriginX, textOrigingY, textWidth, textHeight) wi ...

  6. MQTT、CoAP

    实时协议是物联网的一项根本性技术,在物联网领域发挥了重大的作用.目前物联网设备所广泛使用的四大实时协议:XMPP.HTTP.CoAP以及MQTT等可谓各擅所长.亦各有弊端. 那么在万物互联的时代,谁主 ...

  7. zoj 3861(dfs)

    Valid Pattern Lock Time Limit: 2 Seconds      Memory Limit: 65536 KB Pattern lock security is genera ...

  8. Java:目录

    ylbtech-Java:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  9. artemplate include

    include用于嵌入字模板 {{include 'template_name'}} 子模板 默认共享当前的数据 也可以自己指定数据 {{include 'template_name' templat ...

  10. 【412】Linux 系统编译 C 程序

    1. 直接编译,会自动生成 a.out 文件,此文件即为可执行文件 # 编译 *.c 文件,生成可执行文件 a.out gcc euclide.c # 直接运行如下,如果没有输入和输出文件的话 # & ...