CODEWITHSUNDEEP
javascriptconsole
Jody Heavener
Jody Heavener

Reputation: 2864

Display web console on screen?

Is it possible to capture all events/errors/logs that happen in the console and display them in an element on the screen? Can this be done with JavaScript?

Upvotes: 4

Views: 3719

Answers (3)

FranSanchis
FranSanchis

Reputation: 1701

Place the code at the top of body tag, or wherever in your html page.

<ul id="console-container"></ul>
<script>
(function(){
    let printOnScreen = function (...args) { // adds <li> on "console-container"
        let node = document.createElement("LI");             
        let textnode = document.createTextNode("console: " + args.join(" - ") );         
        node.appendChild(textnode);                              
        window.document.getElementById("console-container").appendChild(node);    
    };
    let methods = Object.keys(console) //get all console methods
    for (i = 0, j = methods.length; i < j; i++) {
        console[methods[i]] = printOnScreen; //override all methods
    }
    window.onerror = function (...args) { // catch all unhandled exceptions
        printOnScreen(args) 
    }
})();
</script>

Upvotes: 0

Xotic750
Xotic750

Reputation: 23472

You can write your own logging framework or use an available one like for example log4javascript, but I don't think that any of them are able to redirect output from the console, you would have to use try..catch to catch the errors or a global error listener (which is not very reliable across browser) and then log them via the framework's methods.

Upvotes: 0

Ian
Ian

Reputation: 50905

You can always override the console methods, as well as tap into window's error event. Here's an example of overriding, including listening for the error event.

(function () {
    "use strict";

    var methods, generateNewMethod, i, j, cur, old, addEvent;

    if ("console" in window) {
        methods = [
            "log", "assert", "clear", "count",
            "debug", "dir", "dirxml", "error",
            "exception", "group", "groupCollapsed",
            "groupEnd", "info", "profile", "profileEnd",
            "table", "time", "timeEnd", "timeStamp",
            "trace", "warn"
        ];

        generateNewMethod = function (oldCallback, methodName) {
            return function () {
                var args;
                alert("called console." + methodName + ", with " + arguments.length + " argument(s)");
                args = Array.prototype.slice.call(arguments, 0);
                Function.prototype.apply.call(oldCallback, console, arguments);
            };
        };

        for (i = 0, j = methods.length; i < j; i++) {
            cur = methods[i];
            if (cur in console) {
                old = console[cur];
                console[cur] = generateNewMethod(old, cur);
            }
        }
    }

    window.onerror = function (msg, url, line) {
        alert("Window error: " + msg + ", " + url + ", line " + line);
    };
}());

console.log("ahh", "fdsa");
console.warn("f");

(function () {
    throw new Error("asdf");
}());

DEMO: http://jsfiddle.net/HfPJ8/

Upvotes: 4

Related Questions