JavaScript：如何将消息打印到错误控制台？

Question

如何在错误控制台中打印消息，最好包括一个变量？

例如，像这样的内容：

print('x=%d', x);

- Mark Harrison

---

你在谈论哪个控制台？浏览器控制台还是特定于JavaScript框架的控制台？ - Eric Schoonover

相关帖子 - Chrome：console.log，console.debug不起作用 - RBT

Answer 1

安装Firebug，然后您可以使用console.log(...)和console.debug(...)等功能（更多信息请参见文档）。

- Dan

---

不幸的是，这会在IE中引起错误。因此，在部署之前，您必须将其注释掉，或者包含一个捕获它的库。 http://getfirebug.com/lite.html - Shermozle

WebKit Web检查器也支持FireBug控制台API。 - olliej

为什么这个答案被认为是正确的？他并没有问怎样写到 Firebug 控制台，而是问如何写到错误控制台。我并不是想挑刺，只是想指出来。 - matt lohkamp

为了给现在看这个问题的任何人带来好处，值得指出的是，自从回答这个问题以来，所有浏览器现在都已经实现了控制台对象，因此console.log()等应该在所有浏览器中都可以使用，包括IE。 但是，在所有情况下，你需要在调试器窗口打开时进行调用，否则调用console将会生成错误。 - Spudley

正如@andrewjackson之前所指出的，console.log在所有现代浏览器中都可以正常工作，包括IE。如果您打算支持旧版浏览器（如果您正在开发公共网站，那么肯定应该这样做！），那么您的代码仍然是完全有效和有用的。然而，我的批评只是您的评论具有误导性/不准确。 - BrainSlugs83

另一方面，console.debug()在IE中不存在。我们可以通过以下方式解决这个问题：if (!console.debug){ console.debug = function(args){ console.log(args); } } - Rovanion

Answer 2

console.error(message); // Outputs an error message to the Web Console
console.log(message); // Outputs a message to the Web Console
console.warn(message); // Outputs a warning message to the Web Console
console.info(message); // Outputs an informational message to the Web Console. In some browsers it shows a small "i" in front of the message.

你也可以添加CSS：

console.log('%c My message here', "background: blue; color: white; padding-left:10px;");

更多信息可以在此处找到：https://developer.mozilla.org/en-US/docs/Web/API/console

- Nicholas

---

Chrome文档：https://developers.google.com/chrome-developer-tools/docs/console - e382df99a7950919789725ceeec126

这是正确答案。选定的答案中甚至没有提到“错误”这个词，尽管它在问题标题中出现了。 - Ivan Durst

关于添加CSS的额外内容非常有趣。+1！ - sudo make install

@O.R.Mapper 那里出了什么问题？我猜是 CSS 吗？ - Nicholas

@Nicholas：我稍后再试一次，但如果我记得正确的话，在日志消息中CSS出现了逐字逐句地打印，这使得控制台输出变得更加混乱而不是更容易阅读。 - O. R. Mapper

当你意识到这一点时，多年来使用“console.log”输出信息的同时，你还可以在控制台中使用CSS样式。 :| - Red

Answer 3

异常将被记录到JavaScript控制台中。如果您想禁用Firebug，则可以使用它。

function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
}

用法：

log('Hello World');
log('another message');

- Ivo Danihelka

---

在一些浏览器中，如果您启用了调试模式，这会弹出弹窗消息。 - BrainSlugs83

请问为什么throw必须包含在setTimeout中？ - HelloWorld101

为什么需要 setTimeout，请参见我的答案。基本上，它是在新线程中引发错误的方法。 - dlaliberte

Answer 4

一个适用于跨浏览器的好方法在 调试JavaScript：放弃您的警报！ 中进行了概述。

- Ian Oxley

---

throw() 是个很好的建议 - 这应该被选为答案。 - matt lohkamp

同意，这是一种跨浏览器的方法。但是...抛出异常和记录消息不是本质上不同的吗？ - Robin Maben

另一方面，抛出异常会停止当前“线程”的执行（如Yuval A所指出的），并在catch中恢复执行，如果有的话。我怀疑这不是期望的结果。 - dlaliberte

throw() 绝对不是解决这个问题的方法。你迟早会遇到麻烦。我遇到的时间就比较早，:(。 - Hugo Mota

@Ian_Oxley说过这个东西曾经出现过故障，现在已经恢复正常了，但把代码直接发布在这里仍然是更好的做法，并且这也是stackoverflow最佳实践的推荐。 - scrat.squirrel

Answer 5

如果你使用Safari，你可以写下以下代码

console.log("your message here");

它会直接显示在浏览器的控制台上。

- Lukas

---

现代浏览器都支持console.log()。 - JJJ

所有现代浏览器现在都支持console.log()。 直到最近这并不是真的。 - Bryce

Answer 6

以下是如何将消息打印到浏览器错误控制台而非调试器控制台的解决方案（可能会有绕过调试器的好理由）。

关于使用抛出错误以在错误控制台中获取消息的建议，一个问题是这会中断执行线程。如果不想中断线程，则可以在单独的线程中抛出错误，可以使用setTimeout创建一个线程。因此，下面是我的解决方案（实际上是Ivo Danihelka提出的解决方案的详细说明）:

var startTime = (new Date()).getTime();
function logError(msg)
{
  var milliseconds = (new Date()).getTime() - startTime;
  window.setTimeout(function () {
    throw( new Error(milliseconds + ': ' + msg, "") );
  });
}
logError('testing');

我在日志信息中包含了自启动时间以来的毫秒数，因为超时可能会导致您预期看到的消息顺序发生偏差。

Error方法的第二个参数是用于文件名的，这里设置为空字符串可防止输出无用的文件名和行号。虽然可以获取调用方函数，但无法使用简单的与浏览器无关的方式。

如果我们能够以警告或消息图标的形式显示消息就好了，但我找不到实现的方法。

使用throw的另一个问题是它可能被封闭的try-catch捕获并且被抛弃，在一个单独的线程中放置throw也避免了这个障碍。然而，错误还有另一种被捕获的方式，即如果window.onerror处理程序被替换为执行其他操作的处理程序。对此无能为力。

- dlaliberte

Answer 7

实际回答问题：

console.error('An error occurred!');
console.error('An error occurred! ', 'My variable = ', myVar);
console.error('An error occurred! ' + 'My variable = ' + myVar);

除了错误，你也可以使用信息、日志或警告。

- Yster

---

你的回答似乎是最好的，但是Mozilla的MDN页面说console.error(..)是一个非标准功能，不应在生产中使用。你对此有什么看法？你有没有关于新手程序员使用console.error和console.log的建议？ - modulitos

这很有趣。那我们就不应该使用它了。谢谢提供信息，卢卡斯。 - Yster

MDN（https://developer.mozilla.org/en-US/docs/Web/API/Console/log）也认为`console.log（...）`是“非标准”的。在这方面，`console.error`和`console.log`一样稳定。 - Mike Rapadas

@Lucas 谁在乎它是否标准？谁会在生产中使用控制台日志记录？ - Andrew

控制台错误现在在所有主要浏览器中都可以使用，甚至包括IE8。请参见https://developer.mozilla.org/en-US/docs/Web/API/Console/error。 - Red

Answer 8

如果您正在使用Firebug，并且需要在IE、Safari或Opera中提供支持，Firebug Lite可以为这些浏览器添加console.log()支持。

- Devon

---

哇.. Firebug Lite 真是太棒了。 - Dexter

Answer 9

WebKit的网页检查器也支持Firebug的控制台API（这只是对Dan's answer的轻微补充）。

- olliej

---

非常好，WebKit支持它。因此，它得到了广泛的支持。太棒了！ - Albus Dumbledore

Answer 10

一如既往，Internet Explorer 是一个大象穿着轮滑鞋，阻止你简单地使用 console.log()。

jQuery 的日志 可以很容易地进行适应，但是在每个地方都添加它会很麻烦。如果你正在使用 jQuery，则可以将其放入你的 jQuery 文件末尾，首先进行缩小：

function log()
{
    if (arguments.length > 0)
    {
        // Join for graceful degregation
        var args = (arguments.length > 1) ? Array.prototype.join.call(arguments, " ") : arguments[0];

        // This is the standard; Firebug and newer WebKit browsers support this.
        try {
            console.log(args);
            return true;
        } catch(e) {
            // Newer Opera browsers support posting erros to their consoles.
            try {
                opera.postError(args);
                return true;
            } 
            catch(e) 
            {
            }
        }

        // Catch all; a good old alert box.
        alert(args);
        return false;
    }
}

- Chris S

---

现在它被接受为jQuery的扩展，但是在捕获异常之前检查'console'和'opera'对象是否存在不是更有效吗？ - Danubian Sailor

@lechlukasz 我认为你可以避免使用扩展程序的开销，只需使用console.log加上这个IE检查即可：https://dev59.com/aHM_5IYBdhLWcg3wzmvM#6076286 - Chris S