为啥console.log() 被认为比alert() 更好？

Posted 2023-02-21

【中文标题】为啥console.log() 被认为比alert() 更好？

【英文标题】：Why is console.log() considered better than alert()?为什么console.log() 被认为比alert() 更好？

【发布时间】：2012-01-02 11:02:00

【问题描述】：

我一直被告知，在调试应用程序时，javascript 的 console.log() 方法比简单地使用 alert() 方法更受欢迎。为什么是这样？有没有一个很好的例子有人可以指出console.log() 显然是更好的选择？

【参考方案1】：

它是非阻塞的，允许您深入检查对象（而不是只查看toString()ing 的结果）。

【参考方案2】：

alert 需要在 javascript 执行恢复之前被解除。 console.log没有这个问题。

console.log 还将显示带有值的对象，其中对 alert 的调用将要求您首先遍历该对象。

【参考方案3】：

因为警报是 PITA，所以在有输入之前停止一切，并且不允许对象自省。

在某些情况下使用调试器会更好。

【参考方案4】：

试试这个：

var data = a: 'foo', b: 'bar';
console.log(data);
alert(data);

您会看到console.log 向您显示对象，而alert 为您提供[object Object]，这没有用。这也适用于，例如元素：

alert(document.body); // [object htmlBodyElement] (exact result depends on your browser)

【参考方案5】：

alert() 被屏蔽 alert() 在非调试环境下不容易被抑制 console 通常会很好地格式化您的对象并允许遍历它们 日志语句通常有一个交互式指针，指向发出日志语句的代码 您一次不能查看多个alert() 消息 consoles 可以通过直观的格式设置不同的日志记录级别

【讨论】：

不要忘记 if(window.console)console.log 否则你会破坏 IE 用户的废话，因为控制台在打开之前不存在。

我不确定您所说的警报不能轻易被抑制是什么意思。您只需要alert = function()

@PeterOlson -- 警告不仅仅是老派，它是可怕的和侵入性的.. 当然你可以巧妙地解决它，但不是最好的事情，为什么不让每个开发人员保持一致和使用 F12 开发人员工具并停止使用讨厌的警报。

IE 已经崩溃，不需要console.log()。这仅适用于旧版本的 IE，如果你支持它，你就是在浪费你宝贵的时间。去做一些很棒的东西，不支持古老的浏览器。

但是很多时候console.log和alert显示的结果是有明显区别的。我正在尝试一个程序，如果键是用户提供的并且它的值为“proto”，则忽略对象中的键分配。控制台显示一个空对象作为输出，即 ，而警报显示“[Object object]”。似乎@lonesomeday 在下面也提到了同样的问题。

【参考方案6】：

如果您忘记删除调试警报语句，它将直接影响最终用户。 如果您忘记删除 debuggins console.log 语句，用户不会受到影响。 此外，console.log 将允许您查看对象的完整内容，而不是 JavaScript 的 toString() 表示。

【参考方案7】：

我想这有点个人喜好问题，但使用 console.log 有很多好处：

假设您要记录 20 种不同的东西，这对于警报来说会很烦人。 例如，您可以记录对象，然后检查它们。 例如，在 Chrome 开发工具中，您可以保留不同页面之间的日志。 它是非阻塞的 如果忘记也不会影响最终用户

仅举几例。

【参考方案8】：

alert() 停止与浏览器的所有交互，直到消息被解除，而 console.log() 只是将消息打印到控制台。

例如。您正在打印一堆变量的值以确保它们是正确的，并且不想在每个变量之后关闭警报窗口。

【参考方案9】：

两者都只是获取有关您的 JS 中正在发生的事情的信息的一种方式。我曾经一直使用 alert()，但出于一些原因迁移到了 console.log()。 （旁注：控制台提供的不仅仅是 log()，看看它还能做什么）。

我认为 console.log() 的主要好处是：

它不会像警报那样停止进程 您可以查看哪个脚本的哪一行抛出了日志条目，而无需将该行放入您的消息中 如果您要调试的东西不止一个，那么在警报框上一直点击“确定”会很烦人 您可以记录对象并获得很多有用的信息（感谢其他回答者的提醒）

最终归结为您喜欢如何调试。

需要注意的一件事。并非所有浏览器都支持 console.log()，如果您将 console.log() 调用留在代码中，则会出现问题。如果控制台无法解决该问题，请提供控制台存根。