Debug Informationen mit CSS Variablen

CSS Variablen sind einfach nur ein Geschenk der Development Götter! Ich nutze sie unter anderem auch um einfacher an Debug-Informationen zu gelangen. Das folgende JS / SCSS Snippet fügt beispielsweise die aktuelle Fenster-Breite und -Höhe in einem kleinen weißen Kästchen am unteren rechten Bildschirm-Rand hinzu, sofern der body die Klasse .debug besitzt, was ich wiederum an die wp_debug-Konstante von WordPress geknüpft habe. Bekomme ich nun während der QM-Phase einen Bug geliefert, so erhalte ich im übermittelten Screenshot bereits erste Anhaltspunkte. Neben den Größen habe ich zum Beispiel über eine library noch den verwendeten Browser in der Ausgabe, eine (leider nicht ganz so zuverlässige) Information über das verwendete Device, den aktiven Breakpoint und den Version-String der Website (hilfreich um beispielsweise festzustellen, ob eine gecachte Version verwendet wird).

function setDebugInformation() {
	let root = document.documentElement;
		root.style.setProperty('--ww', '"' + window.innerWidth + 'px"');
		root.style.setProperty('--wh', '"' + window.innerHeight + 'px"');
	}
}

window.addEventListener('resize',h.throttle(function() {
	setDebugInformation();
},15,this));

body {
	&.debug {
		&:after {
			font-size: 14px;
			text-transform: lowercase;
			position: fixed;
			bottom: 0;
			padding: 10px;
			background-color: #ffffff;
			z-index: 99999;
		}
		&:after {
			content: 'width: ' var(--ww) ' | height: ' var(--wh);
			right: 0;
		}
	}
}