我只是想创建相同的副本，我们已经看到在Web控制台上，有任何选择？我正在制作一个调试工具，所以我想使用console.log（）显示所有的错误消息。目前，用户只能通过查看控制台通过检查查看错误，我想直接显示所有控制台的东西到一个网页
0ejtzxu11#
将打印控制台div标签内的内容
<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>
字符串
dtcbnfnu2#
这个问题有点笼统，所以我将回答我认为你在问什么，然后再加上一些可能的选择。我只想创建与我们在Web控制台上看到的相同的副本。……如果你正在想象Chrome Firefox浏览器的控制台嵌入在网页上的iframe中，那么你基本上是在问我如何重写浏览器并将其显示到我的页面中。这真的是一件很大的事情要尝试和做。因此，我会从寻找第三方插件开始。我在GitHub上快速搜索发现的一个例子是：
选项一：
https://github.com/TarVK/chromeConsole但是，您可以尝试一些更简单的解决方案。
选项二：
查看window.addEventListener('error')。将侦听器放在窗口对象上将创建一种方法，以便在检测到错误事件时调用函数。此外，您可以将其与以下基本JavaScript错误对象结合使用：
MDN将错误对象定义为：错误对象是一种特殊类型的基本对象。它们包括基本错误类型，以及几种特殊的错误类型。这里的关键字是“object”，意思是对象具有描述它们的属性。这意味着它们也可以通过点表示法访问。这意味着侦听器正在侦听的事件可能包含某种类型的信息，然后您可以通过alert(Error.prototype.message)显示，或者通过在HTML中使用(document.getElementById('element-to-display-message').innerText = Error.prototype.message或(document.getElementById('element-to-display-message').innerText = Error.prototype.toString()显示。它不会像浏览器控制台那样看起来干净整洁，但它可以向用户显示控制台中提供的信息。
alert(Error.prototype.message)
(document.getElementById('element-to-display-message').innerText = Error.prototype.message
(document.getElementById('element-to-display-message').innerText = Error.prototype.toString()
idv4meu83#
这两种选择对我来说都是有效的。（选项1）这将打印控制台到底部的网页，看起来很漂亮。
<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>
字符串（选项2）这将把控制台打印到网页的底部，看起来不太好看。
<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>
型
83qze16e4#
尝试关注：
4条答案
按热度按时间0ejtzxu11#
将打印控制台div标签内的内容
字符串
dtcbnfnu2#
这个问题有点笼统，所以我将回答我认为你在问什么，然后再加上一些可能的选择。
我只想创建与我们在Web控制台上看到的相同的副本。……
如果你正在想象Chrome Firefox浏览器的控制台嵌入在网页上的iframe中，那么你基本上是在问我如何重写浏览器并将其显示到我的页面中。
这真的是一件很大的事情要尝试和做。因此，我会从寻找第三方插件开始。我在GitHub上快速搜索发现的一个例子是：
选项一：
https://github.com/TarVK/chromeConsole
但是，您可以尝试一些更简单的解决方案。
选项二：
查看window.addEventListener('error')。将侦听器放在窗口对象上将创建一种方法，以便在检测到错误事件时调用函数。此外，您可以将其与以下基本JavaScript错误对象结合使用：
MDN将错误对象定义为：
错误对象是一种特殊类型的基本对象。它们包括基本错误类型，以及几种特殊的错误类型。
这里的关键字是“object”，意思是对象具有描述它们的属性。这意味着它们也可以通过点表示法访问。这意味着侦听器正在侦听的事件可能包含某种类型的信息，然后您可以通过
alert(Error.prototype.message)显示，或者通过在HTML中使用(document.getElementById('element-to-display-message').innerText = Error.prototype.message或(document.getElementById('element-to-display-message').innerText = Error.prototype.toString()显示。它不会像浏览器控制台那样看起来干净整洁，但它可以向用户显示控制台中提供的信息。idv4meu83#
这两种选择对我来说都是有效的。
（选项1）这将打印控制台到底部的网页，看起来很漂亮。
字符串
（选项2）这将把控制台打印到网页的底部，看起来不太好看。
型
83qze16e4#
尝试关注：