Javascript: console.log to html
You can override the default implementation of console.log()
(function () {
var old = console.log;
var logger = document.getElementById('log');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
})();
Demo: Fiddle
Slight improvement on @arun-p-johny answer:
In html,
<pre id="log"></pre>
In js,
(function () {
var old = console.log;
var logger = document.getElementById('log');
console.log = function () {
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
} else {
logger.innerHTML += arguments[i] + '<br />';
}
}
}
})();
Start using:
console.log('How', true, new Date());
I come a bit late with a more advanced version of Arun P Johny's answer. His solution doesn't handle multiple console.log()
arguments and doesn't give an access to the original function.
Here's my version:
(function (logger) {
console.old = console.log;
console.log = function () {
var 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> ";
}
logger.innerHTML += output + "<br>";
console.old.apply(undefined, arguments);
};
})(document.getElementById("logger"));
// Testing
console.log("Hi!", {a:3, b:6}, 42, true);
console.log("Multiple", "arguments", "here");
console.log(null, undefined);
console.old("Eyy, that's the old and boring one.");
body {background: #333;}
.log-boolean,
.log-undefined {color: magenta;}
.log-object,
.log-string {color: orange;}
.log-number {color: cyan;}
<pre id="logger"></pre>
I took it a tiny bit further and added a class to each log so you can color it. It outputs all arguments as seen in the Chrome console. You also have access to the old log via console.old()
.
Here's a minified version of the script above to paste inline, just for you:
<script>
!function(o){console.old=console.log,console.log=function(){var n,e,t="";for(e=0;e<arguments.length;e++)t+='<span class="log-'+typeof(n=arguments[e])+'">',"object"==typeof n&&"object"==typeof JSON&&"function"==typeof JSON.stringify?t+=JSON.stringify(n):t+=n,t+="</span> ";o.innerHTML+=t+"<br>",console.old.apply(void 0,arguments)}}
(document.body);
</script>
Replace document.body
in the parentheses with whatever element you wish to log into.