说是工具其实只是一段 Javascript 代码,但非常实用,它会给页面里所有的 DOM 元素添加一个 1px 的描边(outline),方便我们在调试 CSS 过程中分析、排查问题。

先来看看代码,它有两个版本,一个是使用的$$选择器,代码量更少(浏览器控制台支持 $$ 选择器);另一种就是传统的document.querySelectorAll选择器:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

下面就看看运行效果:

代码分析

这段代码是 Github 上的 140 bytes 活动中的代码,简单分析下这段 JS 代码,作者使用了不少技巧:

首先是遍历所有元素,这里用的是[].forEach.call(...),使用 forEach 替代 for 之类循环能减少不少代码量,而 forEach 是 Array 对象的方法,所以用了个 [] 空数组来代替Array.prototype.forEach;另外 NodeList 并非一个真正的 Array,所以使用$$('*').forEach会报错,而这里作者使用了 call (apply也行) 技巧来实现。

下一步就是添加描边,这里使用 outline 是因为它不会影响元素布局;再一个就是描边颜色的算法非常有意思:

CSS 可以设置 16 进制的颜色值,黑色:#000000、白色:#ffffff。这里先把 16 进制转换成数值parseInt("000000", 16) == 0parseInt("ffffff", 16) == 16777215;而 16777215 = 2^24 - 1;因此左位移操作再乖以一个随机数Math.random()*(1<<24) 可以得到一个0 到 16777216之间的值(PS:这里的位运算我也是一知半解,详解请 Google 或者查看最后的参考文章)。

但 Math.random 返回的是一个浮点数字,所以需要取整,这里使用了"~"操作符(按位取反操作)这行代码并不关心正负值。因此通过两次取返就可以得到纯整数部,我们还可以将 ~~ 视为 parseInt 的简写,最后使用 toString(16) 转换成 16 进制得出一个颜色值。

参考文章:http://ourjs.com/detail/54be0a98232227083e000012
源代码:https://gist.github.com/addyosmani/fd3999ea7fce242756b1

CSS 布局调试工具的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

随机推荐

  1. andriod ==和equals

    == 用于数字 equals用于字符

  2. File类的常用方法

    public static void GetFileInfo()    {                File file=new File("e:","two.txt ...

  3. Cent OS 6.4安装mysql

    Cent OS6.4 RPM安装mysql 一.卸载掉原有mysql 因为目前主流Linux系统版本基本上都集成了mysql数据库在里面 如下命令来查看我们的操作系统上是否已经安装了mysql数据库 ...

  4. Mac上的软件使用介绍

    目录大纲: Drop to GIF Parallels Desktop 1.Drop to GIF 功能:将视频文件可以生产动态图gif文件 网址在github上:https://github.com ...

  5. Objective-C之集合对象的内存管理

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. JSP基础--JAVA遇见HTML

    1.手工编写第一个WEB应用程序 2.默认访问服务器网页首页欢迎界面是 index.jsp,就是网页链接访问其所在的文件夹目录,不访问这个文件,也会自动访问的.如果这个文件夹目录下没有index.js ...

  7. android 之 ExpandableListView列表中的列表

    有时候,我们需要设计这样一个界面,外面有一个列表,当我们点击其中列表中的某个条目时,就会展开这个条目,出现一个新的列表.比如下图:(程序运行的效果图,在这里贴出来) 当我们点击第一项时,视图变为: - ...

  8. SAP SD业务的简图

  9. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  10. Java解决题目:有一对兔子,从出生第三个月起每个月都生一对兔子,小兔子长到第三个月后,每个月又生一对兔子。。。

    题目:有一对兔子,从出生第三个月起每个月都生一对兔子,小兔子长到第三个月后,每个月又生一对兔子,假如兔子都不死,问M个月时兔子的数量,M为键盘读入的正整数.(请用Java语言作答) 样例输入: 3 样 ...