embeddable browser console

index.html

<div id="consolelog" style="font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: 40px 30px 0px; background-color: white; border: 2px solid black; padding: 10px;"></div>

<input type="text" id="consoleinput" style="margin: 0px 30px; width: 400px;" onkeypress="return evalConsoleInput(event, this.value);" />

<script type="text/javascript">
var appendConsole = function(message, type) {
  var color = "black";
  if (type === "error") {
    color = "red";
  } else if (type === "debug") {
    color = "blue";
  }

  var div = document.createElement('div');
  div.style.color = color;
  div.style.marginBottom = "10px";

  div.innerHTML = message;

  document.getElementById("consolelog").appendChild(div);
}

var originalConsole = null;

if (window.console != null) {
  originalConsole = window.console;
}

window.console = {
  log: function(message) {
    appendConsole(message, "info");
    originalConsole.log(message);
  },
  info: function(message) {
    appendConsole(message, "info");
    originalConsole.info(message);
  },
  debug: function(message) {
    appendConsole(message, "debug");
    originalConsole.debug(message);
  },
  error: function(message) {
    appendConsole(message, "error");
    originalConsole.error(message);
  }
};

function evalConsoleInput(e, message)
{
  if (e.keyCode == 13) { // 13 is the keycode for the enter key
    var inputField = document.getElementById("consoleinput");
    var evalString = inputField.value;

    console.log("> " + evalString);

    try {
      var returnValue = eval(evalString);
      console.log(returnValue);
    } catch (e) {
      console.error(e.message);
    } finally {
      inputField.value = "";
    }
  }
}
</script>