什么是console.log?


Answers:


454

它不是jQuery功能,而是用于调试的功能。例如,您可以在发生某些情况时将某些内容记录到控制台。例如:

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

然后你会看到#someButton was clicked在Firebug的“控制台”选项卡(或其他工具的控制台-例如Chrome的Web检查)时,您需要点击按钮。

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

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

17
Google Chrome的开发人员工具还集成了一个控制台。
罗伯特·皮特(RobertPitt)2010年

8
“这很有用,因为在部署到生产环境时不必删除调试代码。” <-如果最终用户打开Firebug,该怎么办?
AbdullahC 2010年

6
对于不让IE抛出未定义控制台的错误也很有用
Alan Whitelaw

4
恕我直言,总比每次检查console.log是否可用更好:这种情况下,您可以在每次需要时编写console.log,而无需检查它的存在!
Enrico Carlesso 2011年

12
if (console.log)if (console && console.log)如果控制台不可用,则(甚至)仍会引发错误。您应该使用window.consolewindow保证存在)并且一次只检查一个深度级别。
Tgr

226

您可以查看控制台的地方!只是让他们都在一个答案中。

火狐浏览器

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/zh-CN/library/ie/gg589507(v=vs.85).aspx

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

如果必须在IE6中访问IE7的控制台,请使用Firebug Lite书签

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

http://en.wikipedia.org/wiki/书签

歌剧

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

这两个都没有内置控制台,也没有书签功能。因此,我们使用 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.


26
如果有错,请纠正我,但我认为在Firefox中无需Firebug即可查看控制台,只需单击Ctrl + Shift + J(工具> Web开发人员>错误控制台)
Dane411 2013年

4
@ Dane411这是真的,但是萤火虫更好,更常用。
Fresheyeball 2013年

3
@Fresheyeball有人必须清理掉所有垃圾,但是我认为在某些时候收获那些代表并实际上保持社区清洁变得不那么有趣了。
andlrc

2
谁反对这个答案,请发表评论。没有评论的
选票

在window.console.log之前有window.dump。它比空日志功能更好
OCTAGRAM 2013年

100

如果使用Firebug等工具检查代码,则可以查看记录到控制台的所有消息。假设您这样做:

console.log('Testing console');

当您在Firebug(或决定使用哪种工具检查代码)中访问控制台时,您将看到告诉该功能进行记录的任何消息。当您要查看函数是否正在执行,或者变量是否正在正确传递/分配时,此功能特别有用。对于弄清楚代码出了什么问题,这实际上非常有价值。


10
不要忘记先定义它,以避免IE中的错误:stackoverflow.com/a/7585409/318765
mgutt 2012年

83

它将日志消息发布到浏览器的JavaScript控制台,例如Firebug或开发人员工具(Chrome / Safari),并显示执行该脚本的行和文件。

此外,当您输出jQuery Object时,它将在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 ,我建议您阅读它。(跟踪,分组,配置文件,对象检查)。

希望这可以帮助!


1
为什么console.log("x:", x)优于console.log("x:" + x)?因为a ,比a更容易阅读,所以它更容易出错+吗?
凯文·梅雷迪斯

我认为,当您输出许多不同的内容时,阅读起来会稍微容易一些。在这种情况下,它可能应该+严格使用,但是我想表明您也可以在控制台函数中使用逗号。另外,如果两个变量都是整数或数组,则可以避免问题。
2014年

5
console.log("x:", x)明显更好,因为当x是对象或数组(或字符串以外的任何东西)时,它可以正确显示,而无需转换为字符串。
Josef Kufner 2014年

34

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

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

因此,当代码不可用时,您不会破坏代码。

如评论中所建议,您也可以在一个地方执行该命令,然后console.log照常使用

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

18
我是否可以建议改为if(!window.console){ window.console = function(){}; }在一处做,然后照常使用console.log。
Fresheyeball 2013年

23

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


19

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链内部。


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 PernetJanHančič的观点,这是一个非常好的主意,首先检查是否window.console已定义,以便在没有可用控制台的情况下不会破坏您的代码。


12

一个示例-假设您想知道能够运行程序的哪一行代码(在程序崩溃之前!),只需键入

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

11

您可以使用它通过Firefox的FirebugWebKit浏览器中的JavaScript控制台来调试JavaScript代码。

var variable;

console.log(variable);

它将显示变量的内容,即使它是数组或对象也是如此。

这是一个类似print_r($var);PHP


3
实用提示...我始终在可全局访问的javascript文件中包括以下内容:if (!window.console) { window.console = { log : function() {} }; }。这使您可以不必忘记删除偶尔的调试语句。
roufamatic 2011年

@roufamatic我不知道...添加代码以处理不属于的代码,这似乎是一个非常糟糕的解决方案...尤其是当查找/替换是如此简单时……
jondavidjohn 2012年

10

当心:在生产代码中留下对控制台的调用将导致您的站点在Internet Explorer中中断。切勿将其打开。参见:https : //web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog


2
如果您使用Windows计算机,控制台日志不会中断,但是如果使用Internet Explorer,则控制台日志将中断站点。
克里斯·霍伦贝克

我认为答案中引用的博客已不存在。
Tsundoku '17年

原始链接已死。我找到了Web存档副本。
亚历克斯(Alex)

8

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

console.log()功能是编写一条消息以登录调试控制台,例如 Webkit或Firebug。在浏览器中,您将不会在屏幕上看到任何内容。它将消息记录到调试控制台。仅在带有Firebug的Firefox和基于Webkit的浏览器(Chrome和Safari)中可用。它并非在所有IE版本中都能正常工作

控制台对象是DOM的扩展。

console.log()应在代码只开发和调试过程中使用。

有人console.log()将代码留在生产服务器上的javascript文件被视为不良做法。


5

如果浏览器支持调试,则可以使用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


4

console.log具体来说,是开发人员编写代码以不显眼地告知开发人员代码正在做什么的方法。它可以用来提醒您存在问题,但是在进行代码调试时,不应代替交互式调试器。它的异步特性意味着记录的值不一定代表调用该方法时的值。

简而言之:使用console.log(如果可用)记录错误,然后使用选择的调试器修复错误:Firebug,WebKit开发人员工具(内置于SafariChrome中),IE开发人员工具或Visual Studio。


4

当我开始console.log调试时,我真的觉得Web编程很容易。

var i;

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

console.log(i);

您可以i在firebug的控制台标签中检查的当前值。它专门用于调试。



4

除上述用法外,console.log还可以打印到终端中node.js。用express创建的服务器(例如)可以console.log用来写入输出记录器文件。


2

在Java脚本中,没有输入和输出功能。因此要调试代码,使用console.log()方法,这是一种记录方法。它将打印在控制台日志(开发工具)下。

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


2

这与jQuery无关。该console.log()被引用到控制台对象的日志功能,它提供了信息记录到浏览器的控制台方法。这些方法仅用于调试目的,不应依赖于向最终用户提供信息。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.