Javascript 为什么 console.log() 被认为比 alert() 更好？

Why is console.log() considered better than alert()?

提问by Daniel Szabo

I've always been told that when debugging an application, JavaScript's console.log()method is preferred over simply using an alert()method. Why is this? Is there a good example someone can point me to where console.log()is obviously the better choice?

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

回答by Tomasz Nurkiewicz

• alert()is blocking
• alert()cannot be easily suppressed in non-debug environment
• consoletypically formats your objects nicely and allows to traverse them
• logging statements often have an interactive pointer to code which issued logging statement
• you cannot look at more than one alert()message at a time
• consoles can have different logging levels with intuitive formatting

• alert()正在阻塞
• alert()在非调试环境中不容易被抑制
• console通常很好地格式化您的对象并允许遍历它们
• 日志记录语句通常具有指向发出日志记录语句的代码的交互式指针
• 您不能一次查看多于一条alert()消息
• consoles 可以具有具有直观格式的不同日志记录级别

回答by lonesomeday

Try this:

尝试这个：

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

You'll see that console.logshows you the object, while alertgives you [object Object], which isn't useful. This is true also of, e.g. elements:

你会看到console.log向你展示了对象，而alert给了你[object Object]，这是没有用的。这也适用于例如元素：

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

回答by greenanvil

Both are just a way to get information about what's happening at the time in your JS. I used to use alert() all the time but migrated to console.log() for a few reasons. (Side note: console offers more than just log(), take a look at what else it can do).

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

I think the main benefits of console.log() are:

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

• it does not halt processes like alert does
• you can see what line of what script threw the log entry without putting the line into your message
• if you have more than one thing you're debugging it can get real annoying to keep hitting 'ok' on your alert boxes
• you can log objects and get lots of good info (thanks for the reminder, other answerers)

• 它不会像警报那样停止进程
• 您可以看到哪个脚本的哪一行抛出了日志条目，而无需将该行放入您的消息中
• 如果您正在调试不止一件事情，那么在您的警报框中继续点击“确定”会变得非常烦人
• 你可以记录对象并获得很多好的信息（感谢提醒，其他回答者）

In the end it boils down to how you prefer to debug.

最后归结为您更喜欢调试的方式。

One thing to be aware of. Not all browsers SUPPORT console.log() and will have a problem if you leave your console.log() calls in your code. Provide a console stub if console is not available to get around that problem.

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

回答by Quentin

It is non-blocking and allows you to deeply examine objects (rather then just seeing the results of toString()ing them).

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

回答by Oded

The alertneeds to be dismissed before javascript execution can resume. console.loghas no such problem.

alert在 javascript 执行可以恢复之前，需要取消。console.log没有这样的问题。

console.logwill also display the object with values, where a call to alertwill require you to traverse the object first.

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

回答by John Hartsock

If you forget to remove a debugging alert statement it will directly affect the end user.
If you forget to remove a debuggins console.log statement the user is not affected.
In addition console.log will allow you to see the full contents of an object instead of JavaScript's toString() representation.

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

回答by Christofer Eliasson

I guess its somewhat a matter of taste, but there are a number of benefits of using console.log:

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

• Say you want to log 20 different things, that would be quite annoying with alert.
• You can log objects for instance, and then inspect them.
• In Chrome Dev tools for instance, you can preserve the log between different pages.
• It is non-blocking
• It does not affect the end user if forgotten

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

To name a few.

仅举几例。

回答by Firenze

alert() stops all interaction with the browser until the message is dismissed while console.log() just prints the message to the console.

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

Ex. You're printing the values of a bunch of variables to make sure they're right and don't want to dismiss the alert window after each variable.

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

回答by Dave Newton

Because alerts are a PITA, stop everything until there's input, and don't allow object introspection.

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

Using a debugger is even better under some circumstances.

在某些情况下，使用调试器甚至更好。