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
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
Share Improve this question asked Dec 26, 2019 at 17:47 Ajith jojoAjith jojo 4271 gold badge7 silver badges18 bronze badges 4-
console.log()output log into console, as its name suggests. You can't use it to update your web view. – TGrif Commented Dec 26, 2019 at 17:59 - i just want to display the log into my webpage .. – Ajith jojo Commented Dec 26, 2019 at 18:15
- 1 Does this answer your question? How to read from Chrome's console in JavaScript – Triby Commented Dec 26, 2019 at 18:20
- @Ajithjojo Then just update your webpage instead of log data to console. What is the problem ? – TGrif Commented Dec 26, 2019 at 18:27
4 Answers
Reset to default 3It will print whatever in console inside div tag.
<html>
<head>
<title>Console In Webpage</title>
<script src="https://ajax.googleapis./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>
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> "; o.innerHTML += t + "<br>", console.old.apply(void 0, arguments) } }
(document.body);
</script>
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./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 bine 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.
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.