how to display web browser console in a webpage

I just want to create the same replica what we have seen on the web console, there is any option for that?

I am making a debugging tool so I want to show all the error messages using console.log().

Currently, users can only view the errors by looking into the console by inspecting, i want to directly display all console things into a webpage

Solution

It will print whatever in console inside div tag.

<html>
<head>
    <title>Console In Webpage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div class="output"></div>
    <script language="javascript">
        var realConsoleLog = console.log;
        console.log = function () {
            var message = [].join.call(arguments, " ");
            $(".output").text(message);
            realConsoleLog.apply(console, arguments);
        };
        console.log("hello", "my", "name", "is", "shantharuban");
    </script>
</body>
</html>