javascripthtmlgoogle-chromeconsole

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.

    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");
    <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>
</body>

</html>