说是工具其实只是一段 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. oracle pfile spfile

    1.参数文件的定义.作用 oracle数据库通过一系列参数来对数据库进行配置.这些参数是以键-值对的形式来表 示的,如:MAXLOGFILES=50BACKGROUND_DUMP_DEST=C:DUM ...

  2. 安装并运行hadoop

    本文地址:http://www.cnblogs.com/archimedes/p/run-hadoop.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudong.com, 更多云计 ...

  3. C++中static类成员

    static局部变量 static局部变量确保不迟于在程序执行流程第一次经过该对象的定义语句时进行初始化 这种对象一旦被创建,在程序结束前不会被撤销.在该函数被多次调用的过程中,静态局部对象会持续存在 ...

  4. 【读书笔记】iOS-GCD-Dispatch Queue

    一,Dispatch Queue的实现: 1,用于管理追加的Block的C语言层实现的FIFO队列. 2,Atomic函数中实现的用于排他控制的轻量级信号. 3,用于管理线程的C语言层实现的一些容器. ...

  5. 推送(PUSH)

    一.本地推送 1.建立本地推送 UILocalNotification *notification = [[UILocalNotification alloc] init]; //推送的内容 noti ...

  6. SQL Server服务器名称与默认实例名不一致的修复方法

    SQL Server服务器名称与默认实例名不一致的修复方法 分类: 个人累积 SQl SERVER 数据库复制2011-08-10 09:49 10157人阅读 评论(0) 收藏 举报 sql ser ...

  7. nyoj 170 网络的可靠性

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=170 思路:统计每个节点的度,将度为1的节点消去所需要的最少的边即为答案. 代码: #in ...

  8. 数据结构--线段树--lazy延迟操作

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 53749   ...

  9. 字符设备驱动——memory编译问题及解决办法

    1.fatal error:asm/system.h:No such file or directory #include <linux/version.h> #if LINUX_VERS ...

  10. 记一次ftp服务器搭建走过的坑

    记一次ftp服务器搭建走过的坑 1.安装 ①下载 wget https://security.appspot.com/downloads/vsftpd-3.0.3.tar.gz #要FQ ②解压 ta ...