console.log
有什么用途?
请使用JavaScript编写代码示例并解释如何使用它。
这不是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
}
这里是查看控制台的位置!为了避免分散多个答案,将它们都放在一个回答中。
Firefox
(你现在也可以使用 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。
现在,如果您将设备连接到 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
。
如果您使用像Firebug这样的工具检查代码,就可以查看记录到控制台中的任何消息。假设您这样做:
console.log('Testing console');
当您访问Firebug中的控制台(或您决定使用的任何工具来检查代码)时,您将看到您告诉函数记录的任何消息。当您想要查看函数是否正在执行或变量是否被正确传递/分配时,这特别有用。实际上,它对于找出代码出了什么问题非常有价值。
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并建议你阅读它(跟踪,分组,性能分析,对象检查)。
希望这有所帮助!
console.log("x:", x)
比 console.log("x:" + x)
更好?这是因为逗号 ,
比加号 +
更易于阅读,所以更少出错。 - Kevin Meredith+
,但我想展示一下你也可以在控制台函数中使用逗号。此外,这样做还可以避免变量都是整数或数组时出现的问题。 - Fredx
为对象、数组或其他类型时,使用console.log("x:", x)
可以正确地显示它本来的形式,而不会将其转换为字符串。 - Josef Kufner这与jQuery无关,如果您想使用它,我建议您这样做。
if (window.console) {
console.log("your message")
}
为了避免在代码不可用时破坏它。
如评论所建议的,您也可以在一个地方执行它,然后像平常一样使用console.log
。
if (!window.console) { window.console = { log: function(){} }; }
if(!window.console){ window.console = function(){}; }
,然后像平常一样使用console.log。 - Fresheyeballconsole.log
与jQuery无关。它是由调试器(包括Chrome调试器和Firebug)提供的通用对象/方法,允许脚本将数据(或大多数情况下的对象)记录到JavaScript控制台中。
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链中的内容。
console.log
与 jQuery 没有任何关系。
它将消息记录到调试控制台,如 Firebug。
>>> 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接受任意数量的参数。
使用console.log
向您的页面添加调试信息。
许多人使用alert(hasNinjas)
来实现此目的,但是console.log(hasNinjas)
更易于操作。使用警报会弹出一个阻止用户界面的模态对话框。
编辑:我同意Baptiste Pernet和Jan Hančič的观点,首先检查window.console
是否定义是一个非常好的想法,这样如果没有控制台可用,您的代码就不会出错。
if (console.log)
(甚至是if (console && console.log)
),仍会抛出错误。您应该使用window.console
(因为window
肯定存在),并且一次只检查一个深度级别。 - Tgr