logo标签列表

什么是console.log？

javascriptfirebugconsole.log
433

console.log有什么用途？

请使用JavaScript编写代码示例并解释如何使用它。

26个回答
466

这不是jQuery的特性，而是用于调试目的的特性。例如，当某些事情发生时，你可以将某些内容记录到控制台中。例如：

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

如果你点击了按钮，你将会在Firebug的“Console”选项卡（或其他工具的控制台，例如Chrome的Web Inspector）中看到#someButton被点击了。

由于某些原因，控制台对象可能不可用。那么你可以检查它是否可用 - 这很有用，因为这样你就不必在生产环境中删除调试代码：

if (window.console && window.console.log) {
  // console is available
}
20
谷歌Chrome的开发者工具也集成了控制台。 - RobertPitt
8
当您部署到生产环境时，这很有用，因为您无需删除调试代码。但如果最终用户打开Firebug呢？ - AbdullahC
6
它还有一个用处，就是防止IE因为没有定义控制台(console)而抛出错误。 - Alan Whitelaw
5
我认为，比每次检查console.log是否可用更好的方法是使用以下代码：if(typeof(console) == 'undefined') { console = {'log': function() {return}} }这样就可以每次需要时都编写console.log而无需检查其是否存在！请注意，这段代码的作用是定义一个虚拟的console对象，如果原来的console对象未定义，就使用虚拟对象代替。其中虚拟对象的log方法并不执行具体操作，只是返回空值。 - Enrico Carlesso
13
如果console不可用，即使是if (console.log)（甚至是if (console && console.log)），仍会抛出错误。您应该使用window.console（因为window肯定存在），并且一次只检查一个深度级别。 - Tgr
显示剩余6条评论
227

这里是查看控制台的位置！为了避免分散多个答案，将它们都放在一个回答中。

Firefox

http://getfirebug.com/

(你现在也可以使用 Firefox 内置的开发者工具 Ctrl+Shift+J (工具 > Web 开发者 > 错误控制台)，但 Firebug 更好，建议使用 Firebug)

Safari 和 Chrome

基本上是一样的。

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

不要忘记可以使用兼容性模式来调试 IE7 和 IE8，在 IE9 或 IE10 中。

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

如果你必须在 IE6 中访问控制台以供 IE7 使用，可以使用 Firebug Lite 书签工具。

http://getfirebug.com/firebuglite/ 查找稳定的书签工具

http://en.wikipedia.org/wiki/Bookmarklet

Opera

http://www.opera.com/dragonfly/

iOS

适用于所有 iPhone、iPod touch 和 iPad。

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

现在，如果您将设备连接到 OS X 的 Safari，则可以通过 Safari 查看控制台 iOS 6。或者，您也可以使用模拟器，在 Safari 浏览器窗口中打开“开发”选项卡。在那里，您将找到选项，让 Safari 检查器与您的设备通信。

Windows Phone、Android

这两个平台都没有内置控制台和书签工具功能。因此，我们使用http://jsconsole.com/ 输入 ":listen"，它将为您提供一个脚本标记以放在 HTML 中。从那时起，您就可以在 jsconsole 网站中查看控制台。

iOS 和 Android

您还可以使用 http://html.adobe.com/edge/inspect/ 访问 Web 检查器工具和任何设备上的控制台，使用它们方便的浏览器插件即可。

 if(!window.console){ window.console = {log: function(){} }; }

这段代码检查控制台是否存在，如果不存在，则将其设置为一个带有名为 log 的空函数的对象。这样，window.console 和 window.console.log 就永远不会真正地变成 undefined。

26
请纠正我，但我认为在Firefox中查看控制台不需要Firebug插件，只需单击Ctrl+Shift+J（工具>Web开发者>错误控制台）。 - Dane411
4
@Dane411，这是真的，但Firebug更好用并且更常用。 - Fresheyeball
3
有人需要清理所有的垃圾，但我认为随着时间推移，收获这些声望并保持社区干净变得不那么有趣了。 - Andreas Louv
2
谁给这个答案点了踩，请留言说明原因。没有评论的踩是毫无意义的。 - Fresheyeball
在 window.console.log 之前有 window.dump。它比空日志函数更好。 - OCTAGRAM
显示剩余3条评论
102

如果您使用像Firebug这样的工具检查代码，就可以查看记录到控制台中的任何消息。假设您这样做：

console.log('Testing console');

当您访问Firebug中的控制台（或您决定使用的任何工具来检查代码）时，您将看到您告诉函数记录的任何消息。当您想要查看函数是否正在执行或变量是否被正确传递/分配时，这特别有用。实际上，它对于找出代码出了什么问题非常有价值。

10
别忘了先定义它，以避免在IE中出现错误：https://dev59.com/Emsz5IYBdhLWcg3w5MI0#7585409 - mgutt
84
它将会在浏览器的javascript控制台中发布一个日志信息，例如Firebug或者开发者工具（Chrome / Safari），并且会显示它所执行的行和文件。
此外，当您输出一个jQuery对象时，它将包含对DOM中该元素的引用，单击它将跳转到Elements / HTML选项卡中的该元素处。
您可以使用各种方法，但要注意，在Firefox中，您必须打开Firebug才能正常工作，否则整个页面将崩溃。无论您记录的是变量、数组、对象还是DOM元素，它都将为您提供完整的分析，包括对象的原型（总是有趣的）。您也可以包含任意数量的参数，它们将被空格替换。
console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

每个命令都有不同的标识。

你也可以使用 console.profile(profileName); 来对一个函数、脚本等进行性能分析，然后用 console.profileEnd(profileName); 结束它，它将在 Chrome 的"Profiles"选项卡中显示出来（我不知道 FF 是否也有）。

想要了解完整的参考资料，请访问http://getfirebug.com/logging并建议你阅读它（跟踪，分组，性能分析，对象检查）。

希望这有所帮助！

1
为什么 console.log("x:", x) 比 console.log("x:" + x) 更好？这是因为逗号 , 比加号 + 更易于阅读，所以更少出错。 - Kevin Meredith
在我看来，当你输出许多不同的内容时，使用逗号可能会稍微更容易阅读。在这种情况下，应该严格使用+，但我想展示一下你也可以在控制台函数中使用逗号。此外，这样做还可以避免变量都是整数或数组时出现的问题。 - Fred
5
当x为对象、数组或其他类型时，使用console.log("x:", x)可以正确地显示它本来的形式，而不会将其转换为字符串。 - Josef Kufner
35

这与jQuery无关，如果您想使用它，我建议您这样做。

if (window.console) {
    console.log("your message")
}

为了避免在代码不可用时破坏它。

如评论所建议的，您也可以在一个地方执行它，然后像平常一样使用console.log。

if (!window.console) { window.console = { log: function(){} }; }
19
我建议您在一个地方使用if(!window.console){ window.console = function(){}; }，然后像平常一样使用console.log。 - Fresheyeball
23

console.log与jQuery无关。它是由调试器（包括Chrome调试器和Firebug）提供的通用对象/方法，允许脚本将数据（或大多数情况下的对象）记录到JavaScript控制台中。

19

console.log 在某些浏览器上（安装了 Firebug 的 Firefox、Chrome、IE8 或安装了 Firebug Lite 的其他浏览器）会将调试信息记录到控制台。在 Firefox 上，它是一个非常强大的工具，允许您检查对象或查看 HTML 元素的布局或其他属性。它与 jQuery 无关，但通常在使用它与 jQuery 时会有两个常见做法：

  • 安装 FireQuery 扩展程序以便于 Firebug 使用。这样做会使 jQuery 对象的日志记录更加美观。

  • 创建一个包装器，使其更符合 jQuery 的链接代码规范。

通常是像这样的方式：

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

然后您可以像这样调用它

$('foo.bar').find(':baz').log().hide();

方便地检查jQuery链中的内容。

16

console.log 与 jQuery 没有任何关系。

它将消息记录到调试控制台，如 Firebug。

16
有时候会有一个困惑点，那就是如果要在console.log中记录文本消息和您的对象之一的内容，则必须将它们作为不同的参数传递。这意味着您必须使用逗号将它们分开，因为如果您使用+运算符来连接输出，这将隐式调用对象的.toString()方法。在大多数情况下，这并没有被显式地覆盖，继承自Object的默认实现也没有提供任何有用的信息。
在控制台中尝试的示例：
>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

如果您尝试将信息性文本消息与对象的内容连接起来，您将得到:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

需要记住的是，实际上console.log接受任意数量的参数。

13

使用console.log向您的页面添加调试信息。

许多人使用alert(hasNinjas)来实现此目的，但是console.log(hasNinjas)更易于操作。使用警报会弹出一个阻止用户界面的模态对话框。

编辑：我同意Baptiste Pernet和Jan Hančič的观点，首先检查window.console是否定义是一个非常好的想法，这样如果没有控制台可用，您的代码就不会出错。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接