Razouck razouck

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

Disclaimer: Please follow this guide being aware of the fact that I'm not an expert regarding the things outlined below, however I made my best attempt. A few people in IRC confirmed it worked for them and the results looked acceptable.

Attention: After following all the steps run gdk-pixbuf-query-loaders --update-cache as root, this prevents various gdk-related bugs that have been reported in the last few hours. Symptoms are varied, and for Cinnamon the DE fails to start entirely while for XFCE the icon theme seemingly can't be changed anymore etc.

Check the gist's comments for any further tips and instructions, especially if you are running into problems!

Screenshots

Results after following the guide as of 11.01.2017 13:08:

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	# man equivalent for msdn pages so I can look them up in the console.
	function msdn()
	{
	local lucky="https://www.google.com/search?btnI"
	local query="q=site:docs.microsoft.com+inurl:/en-us/windows/desktop/"
	local title="Microsoft Developer Network"
	local cache="${HOME}/.msdn/"

	if ! type lynx > /dev/null; then
	echo "error: lynx is not installed, please install it." 1>&2


	declare -ar _status=(
	[ 0]=😀 # Success
	[ 1]=🤨 # Error
	[129]=📞 # SIGHUP
	[130]=🛑 # SIGINT
	[131]="(╯°□°）╯︵ ┻━┻" # SIGQUIT
	[132]=👮 # SIGILL
	[133]=🐍 # SIGTRAP
	[134]=💥 # SIGABRT

	! XTerm resources
	!
	! Remember to run `xrdb < .Xresources` after changing anything.
	!
	! Tavis Ormandy <[email protected]>

	! Set the default UI font (menus, toolbar, etc)
	XTerm*XftFont: Segoe UI:size=10:antialias=true:style=Regular

	! Color of UI Components

	function findLongestWord(str) {
	return Math.max(...str.split(' ').map(val => val.length));
	}

	findLongestWord('The quick brown fox jumped over the lazy dog');