How To Display Web Browser Console In A Webpage
Solution 1:
It will print whatever in console inside div tag.(ERROR FIXED!)
<html><head><title>Console In Webpage</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body><divclass="output"></div><scriptlanguage="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:
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:
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.
Post a Comment for "How To Display Web Browser Console In A Webpage"