njif

CSS Layout Debbuger

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

	// http://javascriptrules.com/2009/07/22/cross-browser-event-listener-with-design-patterns/
	var addEvent = (function () {
	var setListener;

	return function (el, ev, fn) {
	if (!setListener) {
	if (el.addEventListener) {
	setListener = function (el, ev, fn) {
	el.addEventListener(ev, fn, false);
	};

	// Try this: https://github.com/es-shims/es5-shim
	Function.prototype.bind = (function() {
	if (Function.prototype.bind)
	return Function.prototype.bind;

	function bind(context) {
	var func = this;
	var bindArgs = Array.prototype.slice.call(arguments, 1);
	function wrapper() {
	var args = Array.prototype.slice.call(arguments);

	function InheritClass(Base, Child, Context) {
	if (!Base \|\| !Child)
	return;
	Base.apply(Context, Array.prototype.slice.call(arguments, 3));

	var MemberValue;

	for (var MemberName in Base.prototype) {
	MemberValue = Base.prototype[MemberName];
	if (!Child.prototype[MemberName])

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.slider {
	position: relative;
	display: inline-block; /.inlineblock; mixin /

	// handlebars/exception.js
	var __module5__ = (function() {
	"use strict";
	var __exports__;

	var errorProps = ['description', 'fileName', 'lineNumber', 'message', 'name', 'number', 'stack'];

	function Exception(message, node) {
	var line;
	if (node && node.firstLine) {