什么是console.log？

Question

有什么用console.log？

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

Answer 1

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

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

然后#someButton was clicked,当您单击按钮时,您将在Firebug的"控制台"选项卡(或其他工具的控制台 - 例如Chrome的Web Inspector)中看到.

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

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

Answer 2

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

火狐

https://getfirebug.com/

Firefox的内置开发人员工具Ctrl + Shift + J(工具> Web开发人员>错误控制台)(但Firebug要好得多;使用Firebug)

https://developer.mozilla.org/en-US/docs/Tools

Safari和Chrome

基本相同.

https://developers.google.com/web/tools/chrome-devtools/

https://developer.apple.com/safari/tools/

IE浏览器

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

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

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

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

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

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

歌剧

https://www.opera.com/dragonfly/

iOS版

适用于所有iPhone,iPod touch和iPad.

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/
( 在iOS上调试Web内容的存档链接)

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

Windows Phone,Android

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

iOS和Android

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

较旧的浏览器问题

如果你在代码中使用console.log并且没有同时打开开发人员工具,那么旧的浏览器(再次感谢Microsoft)将会崩溃.幸运的是它很容易解决.简单地使用代码顶部的下面的代码片段,好的旧IE应该让你自己:

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

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

Answer 3

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

console.log('Testing console');

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

Answer 4

它会将一条日志消息发布到浏览器的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 ,我建议您阅读.(痕迹,群组,剖析,物体检查).

希望这可以帮助!

Answer 5

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

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

因此,当代码不可用时,您不会破坏它们.

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

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

Answer 6

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

Answer 7

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链.

Answer 8

console.log 与jQuery无关.

它将消息记录到调试控制台,例如Firebug.

Answer 9

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

Answer 10

用于console.log向页面添加调试信息.

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

编辑:我同意Baptiste Pernet和JanHančič的说法,检查是否window.console首先定义是一个非常好的主意,这样如果没有可用的控制台,您的代码就不会中断.

Answer 11

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

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

Answer 12

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

var variable;

console.log(variable);

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

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

Answer 13

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

Answer 14

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

该console.log()函数将消息写入调试控制台上的日志,例如 Webkit或Firebug.在浏览器中,您将无法在屏幕上看到任何内容.它将消息记录到调试控制台.它仅适用于带有Firebug的Firefox和基于Webkit的浏览器(Chrome和Safari).它在所有IE版本中都不能很好地工作.

控制台对象是DOM的扩展.

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

有人离开console.log()生产服务器上的javascript文件被认为是不好的做法.

Answer 15

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