Rplus Rplus

CSS Layout Debugger

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

	/* bling.js */

	window.$ = document.querySelectorAll.bind(document);

	Node.prototype.on = window.on = function (name, fn) {
	this.addEventListener(name, fn);
	}

	NodeList.prototype.__proto__ = Array.prototype;

	// once in the headers
	defineMetaEvent('Namespace','Click');

	// then when you need it
	document.body.onNamespaceClick.add(function(e) { /.../ });
	document.body.onNamespaceClick.clear();

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js'",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	var url = "http://example.com:3000/pathname/?search=test#hash";

	var _a = new URL(url);

	_a.protocol; // => "http:"
	_a.hostname; // => "example.com"
	_a.port; // => "3000"
	_a.pathname; // => "/pathname/"
	_a.search; // => "?search=test"
	_a.hash; // => "#hash"