Debug informimg popup boilerplate

DebugPopup.html

<Style type="text/css">
pre { display:none; background:red; color:white; font-weight:bold; padding:5px; width:850px; }
</Style>

<pre id="debugPre" style="display:none;">
Your debugging HTML HERE
</pre>

<script type="text/javascript">

	function printFormData(formId) {

		const formEl = document.getElementById(formId);
		const formData = new FormData(formEl);

		const params = {};
		for(const [key, val] of formData.entries()) {
			params[key] = val;
		}

		console.table(params);
		console.log(JSON.stringify(params));

	}

	dev_debug_toNext = true;
	const el = document.querySelector("pre");
	el.textContent = el.innerText
		.replaceAll(", ", ",\n")
		.replaceAll("{", "\n{\n").replaceAll("}", "\n}\n")
		.replaceAll("[", "\n[\n").replaceAll("]", "\n]\n")
		.replaceAll("(", "\n(\n").replaceAll(")", "\n)\n");

    function debug_init() {
            document.head.append(Object.assign(document.createElement('style'), {
            type: 'text/css',
            textContent: "div#debugToast.show { opacity:1 !important; }"
        }));
    }
	
	function debug_openToast(text) {
		const debugToast= Object.assign(document.createElement('div'), {
			id: 'debugToast',
			style: `
				position: fixed; bottom: 5px; right: 5px;
				color: #fff; background-color: #333;
				margin: 5px; border-radius:5px; padding: 8px 16px;
				opacity:0; transition: opacity 0.5s;
				`,
			className: 'show',
			textContent: text
		});
		document.body.append(debugToast);

		setTimeout(function() {
			debugToast.classList.remove('show');
			setTimeout(function() {
				document.body.removeChild(debugToast);
			}, 500);
		}, 500);
	}

	document.addEventListener('keydown', function(event) {
		if (event.ctrlKey && (event.key.toLowerCase() === 'q') {
			debug_init();
			debug_openToast("DEBUG START");
			debug_start();
		}
	});

	function debug_start() {
		document.querySelectorAll("pre").forEach(el => el.style.display = "block");
		dev_debug_toNext = false;
	}

</script>