Is it possible to dump JavaScript errors to a div in HTML?

Question

I'm writing a game and I've got a console for developers to interact with JavaScript methods in the game. I have a problem though; I can't figure out how to drop JavaScript errors to the console. Is there anyway to write errors to a div or HTML element?

Answer 1

Custom defined JavaScript errors are output with the throw command. If you want to input those errors into a div then use the innerHTML method instead of throw and immediately return from the executing function.

Answer 2

Firebug Lite?

Answer 3

It sounds like you already have the ability to execute JS working, and just need to capture error output? If so, you should be able to do so by wrapping your execution code in a try ... catch block:

var result;

try {
    result = eval($("#console-input").val());
} catch (ex) {
    if (ex !== null && typeof ex !== "undefined") {
        if (ex.message) ex = ex.message;
    } else {
        ex = "An unknown error occurred.";
    }

    result = ex;
}

$("#console-output").append($("<p/>").text(result));
$("#console-input").val("");

This will add the result of the code to an output div if no error occurs. If an error does occur, it will instead output either the error message (if any) or "An unknown error occurred."

Answer 4

konsole = document.createElement('ul');
konsole.id = 'console';
document.getElementsByTagName('body')[0].appendChild(konsole);

    function log(konsole, message, level)
    {
        if (undefined === level) level = 0;
        messageElem = document.createElement('li');
        messageElem.className = 'level-' + level;
        messageElem.innerHTML = message;
        konsole.appendChild(messageElem);
    };


document.getElementById('console')

log(document.getElementById('console'), ': )');

Then it's just about CSS...