Google浏览器开发者工具:CSSViewer(一个Css查看器)
CSSViewer的简介
CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件,在Chrome中安装了CSSViewer插件以后,用户就可以在设计网页的时候,快速地模仿网页中某个元素的表现形式,这对于一些使用公共库的开发者来说会大大地节约开发时间(寻找api的时间),用户只需要把鼠标放在元素上就可以快速地查看该元素的具体CSS属性。
CSSViewer的开发背景
网页的开发者在设计一个网页的时候,如果使用的CSS是一些公共库,比如jQuery UI,bootstrap等库的时候,需要大量的公共库CSS名称,如果用户只是参照API的话,在查看了大量API会浪费很多时间,如果给用户一个DEMO的页面,让用户自由查看该页面中的元素CSS,就可以让用户迅速地模仿和使用这些公共库,从而达到加快开发速度的目的。
CSSViewer的使用方法
在谷歌浏览器中安装CSSViewer插件,并在Chrome的扩展器中启动CSS查看器的功能,CSSViewer插件的下载地址可以在本文的下方找到,离线CSSViewer插件的安装方法可参考: 怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?最新谷歌浏览器离线安装版可以从这里下载:http://chromecj.com/chrome/2014-09/177.html。
点击Chrome右上角的CSSViewer插件按钮,这时候,用户就可以把鼠标在网页中进行浮动,从而找到需要看到的CSS属性,当用户浮动到一个元素上的时候,CSSViewer插件会自动以弹出窗口的形式,提醒用户该元素的详细CSS内容,包括字体大小、CSS类名、背景颜色、宽度、高度等,如图所示:
CSSViewer的注意事项
CSSViewer查看器只可以用来查看到当前网页元素的CSS元素属性,而对于网页中的Javascript则是无法进行查看到,有脚本多元素进行CSS影响时,CSSViewer插件也无法检测到变化。
每次点击Chrome右上角的CSSViewer插件按钮,才能启动CSS的观察模式,再次点击就可以取消。
转载于:https://www.cnblogs.com/telwanggs/p/7661744.html
Google浏览器开发者工具:CSSViewer(一个Css查看器)相关推荐
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主 ...
- 浏览器开发者工具修改html后执行,谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇咱们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最经常使用到的Chrome功能面板,也是解决通常问题 ...
- 浏览器开发者工具菜鸡相谈
浏览器开发者工具的初心者浅谈 一.什么是开发者工具: 其实简单的说,浏览器开发者工具就是给web应用和网站开发人员使用的工具,在其中web开发者可以查看或调试网页的内容和属性and so on... ...
- 如何使用浏览器开发者工具?
测试Web的同学都知道浏览器开发者工具.今天给大家简单介绍下这个工具. 每个web开发人员都需要一些基本的工具来理解代码的底层结构,并使我们能够检查web内容.开发人员工具直接构建在浏览器中.这些工具 ...
- 浏览器开发者工具基本使用教程
浏览器开发者工具基本使用教程 在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和 ...
- 关于火狐浏览器开发者工具使用
1.首先,按F12,打开火狐浏览器的调试工具,下面就是调试工具栏 注意...因为调试基本上只用到前四个图标,所以在此,只介绍前四个 1.从页面中选择一个元素 鼠标点击这个图标之后,鼠标在页面上就可以选 ...
- 浏览器开发者工具的使用
背景 在网页开发的时候, 不管是前端开发还是后端开发, 当我们的代码出现问题或者预期的效果没有达到的时候, 我们应第一时间打开开发者模式来查看, 浏览器开发者工具为我们提供解决问题的思路 打开开发者模 ...
- chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?
目录 chrome浏览器 开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...
- Chrome浏览器 开发者工具中的 Performance
目录 ■Chrome浏览器 开发者工具中的 Performance ■画面 ■代码 (2009年前后,大学时期写的代码.) ■工作中的使用 (两个系统同时运行) --- ■Chrome浏览器 开发者工 ...
最新文章
- 执行公式_法院诉讼费、保全费、执行费速算公式
- 90%人工智能公司都亏损?AI盈利难背后的大数据门槛
- ajax隐藏button,jquery下的ajax应用-form和button触发
- android retrofit入门,Android开发 retrofit入门讲解
- CTF——MISC——zip伪加密总结
- 08 / LiveVideoStack主编观察:开源RTC的机会来了吗?
- 在服务器上安装anaconda遇到的问题总结
- JavaScript的引入方式
- 老子《道德经》第三十七章
- jquery 语法基础
- [python]凯撒密码简单方法
- Flink中水位线/Periodic周期水印/Punctuated每个事件水印实现原理/ PunctuatedWatermarks/PeriodicWatermarks
- word-目录突然无法更新解决方法
- python:epub文件批量转TXT
- 三星手机如何通过Exchange账户同步联系人到手机中?
- 周记---学会推迟满足感 享受长远的趣味
- 现实迷途 第二章 借酒买醉
- 不能打开到主机的连接,在端口1521:连接失败的解决方法(修改远程桌面连接端口)
- 在Linux7关机命令,linux关机命令
【使用指南】
- 来个几年前别人的小故事
热门文章
- jq追加html属性,jQuery 操作 HTML 元素和属性的方法
- Spring Cloud Config统一管理微服务配置
- (11)FPGA跨时钟域问题导致数据偶尔异常(学无止境)
- (72)信号发生器DDS方波设计 (二)(第15天)
- (09)VHDL例化VHDL
- c语言编写弹窗提示是否确认退出_弹窗设计的5条基本原则
- STM32中断方式接收方式每次一个字节同时发生接收一段时间后不能再次接收问题
- java排序方法调用_Java实现顺序查找、二分查找、冒泡排序、方法调用
- quartz集成到springboot_一个用来学习 spring boot 的开源项目,总共包含 57 个集成demo...
- 【飞控理论】从零开始学习Kalman Filters之一:Kalman Filters的常见用途、什么是状态观测器?