'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

javascripthtmlgoogle-chromeconsole


Solution 1:[1]

It will print whatever in console inside div tag.(ERROR FIXED!)

<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>

Solution 2:[2]

Try to follow:

To access the developer console in Chrome on Windows, use the menu on the right of the window, and choose Tools > JavaScript console: You'll see the console appear in the bottom part of the screen, and you should see the output from the page, howdy. html , appear in the console.

Solution 3:[3]

The question is a bit general, so I am going to reply to what I think you are asking and then add a few more possible options.

I just want to create the same replica that we have seen on the web console . . .

If you are imagining the everything that is the console of Chrome FireFox browser embedded in an iframe on your webpage, then you are basically asking how do I rewrite a browser and display it into my page.

It's a really BIG thing to try and do. For that reason, I would start by looking for third-party add-ons. One example I found with a quick search on GitHub is:

Option 1:
https://github.com/TarVK/chromeConsole

However, there may be some simpler solutions you could try.

Option 2:

Look into window.addEventListener('error'). Putting the listener on the window object will create a way to call a function anytime an error event is detected. Furthermore, you can combine that with the following fundamental JavaScript Error Objects:

  • Error
  • AggregateError
  • EvalError
  • InternalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError

MDN defines error objects as:

Error objects are a special type of fundamental object. They include the basic Error type, as well as several specialized error types.

The keyword here is "object." Meaning objects have properties that describe them. Which means they can also be accessed through dot notation. Which means the event that the listener was listening for will probably have some type of information you could then display through an alert(Error.prototype.message), or through displaying it in the HTML with (document.getElementById('element-to-display-message').innerText = Error.prototype.message or (document.getElementById('element-to-display-message').innerText = Error.prototype.toString(). It's not going to look nice and clean like the browser console, but it would be a way of displaying the information provided in the console to the user.

Solution 4:[4]

These two options worked for me.

(Option 1) This will print the console into the bottom the webpage and will look pretty.

<script>
(function () {
  console.old = console.log;
  var old = console.log;
  var logger = document.getElementById('log');
  console.log = function () {
    for (var i = 0; i < arguments.length; i++) {
      if (typeof arguments[i] == 'object') {
          document.getElementById('log').innerHTML = ''
          logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]);console.old.apply(void 0, arguments) + '<br />';
      } else {
          document.getElementById('log').innerHTML = ''
          logger.innerHTML += arguments[i] + '<br />';
      }
    }
  }
})();
</script>

(Option 2) This will print the console into the bottom the webpage and will not look pretty.

<script>
  !function (o) { console.old = console.log, console.log = function () { var n, e, t = ""; for (e = 0; e < arguments.length; e++)t += '<span class="log-' + typeof (n = arguments[e]) + '">', "object" == typeof n && "object" == typeof JSON && "function" == typeof JSON.stringify ? t += JSON.stringify(n) : t += n, t += "</span>&nbsp;"; o.innerHTML += t + "<br>", console.old.apply(void 0, arguments) } }

(document.body);
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Parth prajapati
Solution 3 trrapp
Solution 4

Related Questions