A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version
| <!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 --> | |
| <html lang="zh-cmn-Hans-CN"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome --> | |
| <meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 --> | |
| <!-- | |
| content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。 |
| function whichTransitionEvent(){ | |
| var t; | |
| var el = document.createElement('fakeelement'); | |
| var transitions = { | |
| 'transition':'transitionend', | |
| 'MSTransition':'msTransitionEnd', | |
| 'MozTransition':'transitionend', | |
| 'WebkitTransition':'webkitTransitionEnd' | |
| } |