Showing console errors and alerts in a div inside the page

user_650722 0
Viewed 54548

I'm building a debugging tool for my web app and I need to show console errors in a div. I know I can use my own made console like object and use it, but for future use I need to send all console errors to window. Actually I want to catch console events.

browser javascript
7 Answers
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div id="logger" class="web_console"></div>

    <script type="text/javascript">

        // Overriding console object
        var console = {};

        // Getting div to insert logs
        var logger = document.getElementById("logger");

        // Adding log method from our console object
        console.log = function(text)
        {
            var element = document.createElement("div");
            var txt = document.createTextNode(text);

            element.appendChild(txt);
            logger.appendChild(element);
        }

        // testing
        console.log("Hello World...");
        console.log("WOW");

        /**
            console.log prints the message in the page instead browser console, useful to programming and debugging JS using a Android phone

        */
    </script>
</body>
</html>
user_57190380

I created a zero-dependency npm module for this case: console-events (surely if you're okay to use nodejs :P)

You can add event listener like that:

const { console } = require('console-events');

console.addEventListener('log', (e) => {
   e.preventDefault(); //if you need to prevent normal behaviour e.g. output to devtools console
   $('#debugDiv').append('<p>' + message + '</p>');
})
user_92019030
Related