How to display live console.logs in an application?

Question

I'm creating a 'playground' that will allow users to explore various uses of a soon-to-be-supported CSS property.

In it, I'd really like to have users be able to see logs to the console (which I'll write into the source code), without their having to actually have the console open. In other words, I'd like to have a simple browser-console widget in my application.

Anyone have any idea of where to start?

I've been googling around, to no avail.

I'm using JavaScript and Knockout.js for the UI.

Thanks in advance!

See http://stackoverflow.com/questions/6604192/showing-console-errors-and-alerts-in-a-div-inside-the-page — Liam McInroy, Mar 05 '14 at 22:21

score 1 · Answer 1 · answered Mar 05 '14 at 22:25

1

var log = console.log;
console.log = function () {
   $('body').append(Array.prototype.slice.call(arguments).join(' ') + '<br>');
   log.apply(console, arguments);
}

http://jsfiddle.net/8bbd9/

answered Mar 05 '14 at 22:25

jgillich

71,459
6
57
85

score 1 · Answer 2 · answered Mar 05 '14 at 22:25

If I were you, I would use a different function that adds iteams to a block.

<script>
function console(text){
   document.getElementById("console").innerHTML+=text;
}
</script>
<div id="console" style="height:100px;width:50px;overflow:scroll;"></div>

I hope that helps.

How to display live console.logs in an application?

2 Answers2