How to display live console.logs in an application?

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!

Answers


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

http://jsfiddle.net/8bbd9/


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.


Need Your Help

Redis pubsub with Ratchet

php redis ratchet phpwebsocket

I have a socket configured with Ratchet to listen to messages in the client like this:

Jquery Move Div to Center of Screen (Masonry JS)

javascript jquery css jquery-masonry jquery-transit

I am using Jquery Transit and Masonry JS. There is a button in my div that, when clicked on, should change the containers position to fixed and move it to the center of the screen (using Jquery Tra...