Jérôme Pott mornir

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

justify-content = main axis

align-items = cross axis

align-content = cross axis with wrap; to be used when weird gap appear between rows/columns

photo gallery: grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));

absolut path: /images/flower.png relative path: ./images/flower.png (or images/flower.png) or ../../images/flower.png

background-color: #f5f5f5 nice to the eyes nice yellow : #ffc600 or #ffc40e nice gray: #222;

	const str = "I can speak {日本語,にほんご} read {漢字,かんじ}"

	const regex = /{(\S+?),(\S+?)}/g

	const newStr = str.replace(regex, `
	<ruby>
	$1 <rp>(</rp><rt>$2</rt><rp>)</rp>
	</ruby>`)

	const obj = {video: {name: 'cat', duration:30}}

	obj.map({video} => video.cat, video.duration)

	const data = {
	key: 314343214,
	data: {
	name: 'hello',
	duration: 44
	}

	function sortListBy(Parameter, List) {
	return List.sort((a, b) => {
	if (a[Parameter] > b[Parameter]) {
	return 1
	} else {
	return -1
	}
	})
	}

	object-fit: cover (for img)
	backgroud-size: cover (for url(''))

	const params = { a: 'foo', b: 'bar' };
	const urlParams = new URLSearchParams(Object.entries(params));
	fetch('/some/url?' + urlParams);