什么是console.log？

问题描述 投票：397回答：20

console.log有什么用？

请通过代码示例解释如何在JavaScript中使用它。

javascript firebug console.log
20个回答
446
投票

它不是jQuery功能，而是用于调试目的的功能。例如，当事情发生时，您可以将某些内容记录到控制台。例如：

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

然后，当您单击按钮时，您会在Firebug的“控制台”选项卡（或其他工具的控制台 - 例如Chrome的Web Inspector）中看到#someButton was clicked。

由于某些原因，控制台对象可能不可用。然后你可以检查它是否 - 这很有用，因为你在部署到生产时不必删除调试代码：

if (window.console && window.console.log) {
  // console is available
}
12
投票

使用console.log将调试信息添加到页面。

许多人为此目的使用alert(hasNinjas)，但console.log(hasNinjas)更容易使用。使用警报弹出一个阻止用户界面的模式对话框。

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

11
投票

一个例子 - 假设您想知道您能够运行程序的哪一行代码（在它崩溃之前！），只需输入

console.log("You made it to line 26. But then something went very, very wrong.")
10
投票

您可以使用Firebug for Firefox或WebKit浏览器中的JavaScript控制台来调试JavaScript代码。

var variable;

console.log(variable);

它将显示变量的内容，即使它是数组或对象。

它与print_r($var);类似于PHP。

9
投票

注意：在生产代码中保留对控制台的调用将导致您的站点在Internet Explorer中中断。永远不要把它打开包装。见：https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

7
投票

在早期，JS调试是通过alert()函数执行的 - 现在它已经过时了。

console.log()是一个写入消息以记录调试控制台的函数，例如Webkit或Firebug。在浏览器中，您将无法在屏幕上看到任何内容。它将消息记录到调试控制台。它仅适用于带有Firebug的Firefox和基于Webkit的浏览器（Chrome和Safari）。 It does not work well in all IE releases。

控制台对象是DOM的扩展。

console.log()应该仅在开发和调试期间用于代码中。

有人在生产服务器上的javascript文件中留下console.log()被认为是不好的做法。

4
投票

如果您的浏览器支持调试，则可以使用console.log（）方法显示JavaScript值。

使用F12在浏览器中激活调试，然后在调试器菜单中选择“控制台”。

JavaScript中的控制台。尝试修复或“调试”一个无法运行的JavaScript程序，并使用console.log（）命令进行练习。根据您使用的浏览器，有一些快捷方式可以帮助您访问JavaScript控制台：

Chrome控制台键盘快捷键

Windows：Ctrl + Shift + J. Mac：Cmd + Option + J.

Firefox控制台键盘快捷键

Windows：Ctrl + Shift + K. Mac：Cmd + Option + K.

Internet Explorer控制台键盘快捷方式

F12键

Safari控制台键盘快捷键

Cmd + Option + C.

3
投票

console.log特别是开发人员编写代码的方法，以便不明显地通知开发人员代码正在做什么。它可用于提醒您存在问题，但在调试代码时不应取代交互式调试器。它的异步性质意味着logged values不一定代表调用方法时的值。

简而言之：使用console.log（如果可用）记录错误，然后使用您选择的调试器修复错误：Firebug，WebKit开发人员工具（内置于Safari和Chrome），IE Developer Tools或Visual Studio。

3
投票

当我启动console.log进行调试时，我真的觉得Web编程很容易。

var i;

如果我想检查i运行时的值..

console.log(i);

你可以在firebug的控制台选项卡中查看i的当前值。它专门用于调试。

3
投票

它用于记录（通过它的任何东西）到Firebug控制台。主要用法是调试JavaScript代码。

3
投票

除了上面提到的用法，console.log还可以打印到node.js的终端。使用express（例如）创建的服务器可以使用console.log写入输出记录器文件。

224
投票

您可以查看控制台的地方！只需将它们全部放在一个答案中。

火狐

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

IE浏览器

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

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 for IE7中访问控制台，请使用Firebug Lite书签

http://getfirebug.com/firebuglite/寻找稳定的书签

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

歌剧

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

iOS版

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

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

现在使用iOS 6，如果插入设备，可以通过OS X中的Safari查看控制台。或者您可以使用模拟器完成此操作，只需打开Safari浏览器窗口并转到“开发”选项卡即可。在那里，您可以找到使Safari检查器与您的设备通信的选项。

Windows Phone，Android

这两个都没有内置的控制台，没有bookmarklet功能。所以我们使用http://jsconsole.com/类型：listen，它会给你一个脚本标记放在你的HTML中。从那时起，您可以在jsconsole网站内查看您的控制台。

iOS和Android

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

较旧的浏览器问题

如果您在代码中使用console.log并且没有同时打开开发人员工具，那么旧版本的IE将崩溃。幸运的是，这是一个简单的解决方案。使用代码顶部的以下代码段：

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

这将检查控制台是否存在，如果不存在，则将其设置为具有名为log的空白函数的对象。这样window.console和window.console.log永远不会真正的undefined.

1
投票

在java脚本中没有输入和输出函数。所以要调试代码console.log（）方法是使用的。它是一种记录方法。它将打印在控制台日志（开发工具）下。

在您打开IE开发工具之前，它不会出现在IE8中。

99
投票

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

console.log('Testing console');

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

80
投票

它会将一条日志消息发布到浏览器的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中的“个人档案”选项卡中（不知道使用FF）。

如需完整参考，请访问http://getfirebug.com/logging，我建议您阅读。 （痕迹，群组，剖析，物体检查）。

希望这可以帮助！

32
投票

与jQuery没有任何关系，如果你想使用它，我建议你这样做

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

因此，当代码不可用时，您不会破坏它们。

正如评论中所建议的那样，您也可以在一个地方执行该操作，然后正常使用console.log

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

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

18
投票

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

  • 为Firebug安装FireQuery扩展。除了其他优点之外，这使得jQuery对象的日志记录看起来更好。
  • 创建一个更符合jQuery链接代码约定的包装器。

这意味着通常是这样的：

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

你可以调用它

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

轻松检查内部jQuery链。

15
投票

console.log与jQuery无关。

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

15
投票

有时候混淆点是使用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实际上需要尽可能多的参数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.