bbottema/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Log to HTML</title>
		<link rel="icon" href="data:;base64,=">

		<script>
            (function(eleLocator) {
                fixLoggingFunc('log');
                fixLoggingFunc('debug');
                fixLoggingFunc('warn');
                fixLoggingFunc('error');
                fixLoggingFunc('info');

                function fixLoggingFunc(name) {
                    console['old' + name] = console[name];
                    console[name] = function() {
                        let output = "", arg, i;

                        for (i = 0; i < arguments.length; i++) {
                            arg = arguments[i];
                            output += "<span class=\"log-" + (typeof arg) + "\">";

                            if (typeof arg === "object" && typeof JSON === "object" && typeof JSON.stringify === "function") {
                                output += JSON.stringify(arg);
                            } else {
                                output += arg;
                            }

                            output += "</span>&nbsp;";
                        }

                        eleLocator().innerHTML += output + "<br>";
                        console['old' + name].apply(undefined, arguments);
                    };
                }
            })(() => document.getElementById("log"));
		</script>

		<style>
			body {background: #333;}
			.log-boolean,
			.log-undefined {color: magenta;}
			.log-object,
			.log-string {color: orange;}
			.log-number {color: cyan;}
		</style>
	</head>
	<body class="language-java">
		<pre id="log"></pre>

        <script>
            console.debug("Hi!", {a:3, b:6}, 42, true);
            console.info("Multiple", "arguments", "here");
            console.warn(null, undefined);
        </script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Log to HTML</title>
	<link rel="icon" href="data:;base64,=">

	<script>
	(function(eleLocator) {
	fixLoggingFunc('log');
	fixLoggingFunc('debug');
	fixLoggingFunc('warn');
	fixLoggingFunc('error');
	fixLoggingFunc('info');

	function fixLoggingFunc(name) {
	console['old' + name] = console[name];
	console[name] = function() {
	let output = "", arg, i;

	for (i = 0; i < arguments.length; i++) {
	arg = arguments[i];
	output += "<span class=\"log-" + (typeof arg) + "\">";

	if (typeof arg === "object" && typeof JSON === "object" && typeof JSON.stringify === "function") {
	output += JSON.stringify(arg);
	} else {
	output += arg;
	}

	output += "</span> ";
	}

	eleLocator().innerHTML += output + "<br>";
	console['old' + name].apply(undefined, arguments);
	};
	}
	})(() => document.getElementById("log"));
	</script>

	<style>
	body {background: #333;}
	.log-boolean,
	.log-undefined {color: magenta;}
	.log-object,
	.log-string {color: orange;}
	.log-number {color: cyan;}
	</style>
	</head>
	<body class="language-java">
	<pre id="log"></pre>

	<script>
	console.debug("Hi!", {a:3, b:6}, 42, true);
	console.info("Multiple", "arguments", "here");
	console.warn(null, undefined);
	</script>
	</body>
	</html>