Javascript 什么是 console.log？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4539253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is console.log?
提问by Mihir
What is the use of console.log?
有什么用console.log？
Please explain how to use it in JavaScript, with a code example.
请用代码示例解释如何在 JavaScript 中使用它。
回答by Jan Han?i?
It's not a jQuery feature but a feature for debugging purposes. You can for instance log something to the console when something happens. For instance:
它不是 jQuery 功能，而是用于调试目的的功能。例如，您可以在发生某些事情时将某些内容记录到控制台。例如：
$('#someButton').click(function() {
console.log('#someButton was clicked');
// do something
});
You'd then see #someButton was clickedin Firebug's “Console” tab (or another tool's console — e.g. Chrome's Web Inspector) when you would click the button.
然后#someButton was clicked，当您单击按钮时，您会在 Firebug 的“控制台”选项卡（或其他工具的控制台 — 例如 Chrome 的 Web Inspector）中看到。
For some reasons, the console object could be unavailable. Then you could check if it is - this is useful as you don't have to remove your debugging code when you deploy to production:
由于某些原因，控制台对象可能不可用。然后您可以检查它是否是 - 这很有用，因为您在部署到生产时不必删除调试代码：
if (window.console && window.console.log) {
// console is available
}
回答by Fresheyeball
Places you can view the console! Just to have them all in one answer.
可以查看控制台的地方！只是将它们全部放在一个答案中。
Firefox
火狐
(you can also now use Firefox's built in developer tools Ctrl+Shift+J (Tools > Web Developer > Error Console), but Firebug is much better; use Firebug)
（您现在也可以使用 Firefox 的内置开发人员工具 Ctrl+Shift+J（工具 > Web 开发人员 > 错误控制台），但 Firebug 更好；使用 Firebug）
Safari and Chrome
Safari 和 Chrome
Basically the same.
基本一样。
https://developers.google.com/chrome-developer-tools/docs/overview
https://developers.google.com/chrome-developer-tools/docs/overview
https://developer.apple.com/technologies/safari/developer-tools.html
https://developer.apple.com/technologies/safari/developer-tools.html
Internet Explorer
IE浏览器
Don't forget you can use compatibility modes to debug IE7 and IE8 in IE9 or IE10
别忘了你可以使用兼容模式在IE9或IE10中调试IE7和IE8
http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx
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
http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx
If you must access the console in IE6 for IE7 use the Firebug Lite bookmarklet
如果您必须在 IE6 中访问 IE7 控制台，请使用 Firebug Lite 书签
http://getfirebug.com/firebuglite/look for stable bookmarklet
http://getfirebug.com/firebuglite/寻找稳定的书签
http://en.wikipedia.org/wiki/Bookmarklet
http://en.wikipedia.org/wiki/Bookmarklet
Opera
歌剧
http://www.opera.com/dragonfly/
http://www.opera.com/dragonfly/
iOS
IOS
Works for all iPhones, iPod touch and iPads.
适用于所有 iPhone、iPod touch 和 iPad。
Now with iOS 6 you can view the console through Safari in OS X if you plug in your device. Or you can do so with the emulator, simply open a Safari browser window and go to the "Develop" tab. There you will find options to get the Safari inspector to communicate with your device.
现在使用 iOS 6，如果您插入设备，您可以通过 OS X 中的 Safari 查看控制台。或者您可以使用模拟器执行此操作，只需打开 Safari 浏览器窗口并转到“开发”选项卡即可。在那里，您会找到让 Safari 检查器与您的设备进行通信的选项。
Windows Phone, Android
视窗手机、安卓
Both of these have no console built in and no bookmarklet ability. So we use http://jsconsole.com/type :listen and it will give you a script tag to place in your HTML. From then on you can view your console inside the jsconsole website.
这两者都没有内置控制台，也没有书签功能。所以我们使用 http://jsconsole.com/输入 :listen ，它会给你一个脚本标签放在你的 HTML 中。从那时起，您可以在 jsconsole 网站内查看您的控制台。
iOS and Android
iOS和安卓
You can also use http://html.adobe.com/edge/inspect/to access web inspector tools and the console on any device using their convenient browser plugin.
您还可以使用http://html.adobe.com/edge/inspect/使用其方便的浏览器插件在任何设备上访问 Web 检查器工具和控制台。
Older browser problems
旧浏览器问题
Lastly older versions of IE will crash if you use console.log in your code and not have the developer tools open at the same time. Luckily it's an easy fix. Use the below code snippet at the top of your code:
最后，如果您在代码中使用 console.log 并且没有同时打开开发人员工具，那么旧版本的 IE 将崩溃。幸运的是，这是一个简单的修复。使用代码顶部的以下代码片段：
if(!window.console){ window.console = {log: function(){} }; }
This checks to see if the console is present, and if not it sets it to an object with a blank function called log. This way window.console and window.console.log is never truly undefined.
这会检查控制台是否存在，如果不存在，则将其设置为具有名为 的空白函数的对象log。这样 window.console 和 window.console.log 永远不会真正undefined.
回答by Fibericon
You can view any messages logged to the console if you use a tool such as Firebug to inspect your code. Let's say you do this:
如果您使用 Firebug 等工具检查代码，则可以查看记录到控制台的任何消息。假设你这样做：
console.log('Testing console');
When you access the console in Firebug (or whichever tool you decide to use to inspect your code), you will see whatever message you told the function to log. This is particularly useful when you want to see if a function is executing, or if a variable is being passed/assigned properly. It's actually rather valuable for figuring out just what went wrong with your code.
当您在 Firebug（或您决定用来检查代码的任何工具）中访问控制台时，您将看到您告诉函数记录的任何消息。当您想查看函数是否正在执行，或者变量是否被正确传递/分配时，这特别有用。实际上，找出代码出了什么问题是非常有价值的。
回答by Fred
It will post a log message to the browser's javascript console, e.g. Firebug or Developer Tools (Chrome / Safari) and will show the line and file where it was executed from.
它将向浏览器的 javascript 控制台（例如 Firebug 或开发人员工具（Chrome / Safari））发布一条日志消息，并将显示执行它的行和文件。
Moreover, when you output a jQuery Object it will include a reference to that element in the DOM, and clicking it will go to that in the Elements/HTML tab.
此外，当您输出 jQuery 对象时，它将在 DOM 中包含对该元素的引用，单击它会转到 Elements/HTML 选项卡中的引用。
You can use various methods, but beware that for it to work in Firefox, you must have Firebug open, otherwise the whole page will crash. Whether what you're logging is a variable, array, object or DOM element, it will give you a full breakdown including the prototype for the object as well (always interesting to have a poke around). You can also include as manyarguments as you want, and they will be replaced by spaces.
您可以使用各种方法，但要注意它要在 Firefox 中工作，您必须打开 Firebug，否则整个页面会崩溃。无论您记录的是变量、数组、对象还是 DOM 元素，它都会为您提供完整的分类，包括对象的原型（随便看看总是很有趣）。您还可以根据需要包含任意数量的参数，它们将被空格替换。
console.log( myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");
These show up with different logos for each command.
这些显示为每个命令的不同徽标。
You can also use console.profile(profileName);to start profiling a function, script etc. And then end it with console.profileEnd(profileName);and it will show up in you Profiles tab in Chrome (don't know with FF).
您还可以console.profile(profileName);用来开始分析函数、脚本等。然后以console.profileEnd(profileName);它结束，它将显示在 Chrome 的“个人资料”选项卡中（不知道 FF）。
For a complete reference go to http://getfirebug.com/loggingand I suggest you read it.(Traces, groups, profiling, object inspection).
如需完整参考，请访问http://getfirebug.com/logging ，我建议您阅读它。（跟踪、组、分析、对象检查）。
Hope this helps!
希望这可以帮助！
回答by Baptiste Pernet
There is nothing to do with jQuery and if you want to use it I advice you to do
与 jQuery 无关，如果您想使用它，我建议您这样做
if (window.console) {
console.log("your message")
}
So you don't break your code when it is not available.
因此，当代码不可用时，您不会破坏代码。
As suggested in the comment, you can also execute that in one place and then use console.logas normal
正如评论中所建议的，您也可以在一个地方执行它，然后console.log正常使用
if (!window.console) { window.console = { log: function(){} }; }
回答by Quentin
console.loghas nothing to do with jQuery. It is a common object/method provided by debuggers (including the Chrome debugger and Firebug) that allows a script to log data (or objects in most cases) to the JavaScript console.
console.log与 jQuery 无关。它是调试器（包括 Chrome 调试器和 Firebug）提供的通用对象/方法，允许脚本将数据（或大多数情况下的对象）记录到 JavaScript 控制台。
回答by Tgr
console.loglogs debug information to the console on some browsers (Firefox with Firebug installed, Chrome, IE8, anything with Firebug Lite installed). On Firefox it is a very powerful tool, allowing you to inspect objects or examine the layout or other properties of HTML elements. It isn't related to jQuery, but there are two things that are commonly done when using it with jQuery:
console.log在某些浏览器（安装了 Firebug 的 Firefox、Chrome、IE8、安装了 Firebug Lite 的任何东西）上将调试信息记录到控制台。在 Firefox 上，它是一个非常强大的工具，允许您检查对象或检查 HTML 元素的布局或其他属性。它与 jQuery 无关，但与 jQuery 一起使用时，通常会做两件事：
install the FireQueryextension for Firebug. This, amongst other advantages, makes the logging of jQuery objects look nicer.
create a wrapper that is more in line with jQuery's chaining code conventions.
为 Firebug安装FireQuery扩展。除了其他优点之外，这使得 jQuery 对象的日志记录看起来更好。
创建一个更符合 jQuery 的链接代码约定的包装器。
This means usually something like this:
这通常意味着这样的事情：
$.fn.log = function() {
if (window.console && console.log) {
console.log(this);
}
return this;
}
which you can then invoke like
然后你可以像这样调用
$('foo.bar').find(':baz').log().hide();
to easily check inside jQuery chains.
轻松检查 jQuery 链内部。
回答by SLaks
console.loghas nothing to do with jQuery.
console.log与 jQuery 无关。
It logs a message to a debugging console, such as Firebug.
它将消息记录到调试控制台，例如 Firebug。
回答by Thalis K.
A point of confusion sometimes is that to log a text message along with the contents of one of your objects using console.log, you have to pass each one of the two as a different argument. This means that you have to separate them by commas because if you were to use the + operator to concatenate the outputs, this would implicitly call the .toString()method of your object. This in most cases is not explicitly overriden and the default implementation inherited by Objectdoesn't provide any useful information.
有时令人困惑的一点是，要使用 console.log 将文本消息与其中一个对象的内容一起记录，您必须将两者中的每一个作为不同的参数传递。这意味着您必须用逗号分隔它们，因为如果您要使用 + 运算符连接输出，这将隐式调用.toString()对象的方法。在大多数情况下，这不会被显式覆盖，并且继承的默认实现Object不提供任何有用的信息。
Example to try in console:
在控制台中尝试的示例：
>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}
whereas if you tried to concatenate the informative text message along with the object's contents you'd get:
而如果您尝试将信息性文本消息与对象的内容连接起来，您会得到：
>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]
So keep in mind that console.log in fact takes as many arguments as you like.
所以请记住，console.log 实际上可以接受任意多的参数。
回答by Mark Byers
Use console.logto add debugging information to your page.
用于console.log向页面添加调试信息。
Many people use alert(hasNinjas)for this purpose but console.log(hasNinjas)is easier to work with. Using an alert pop-ups up a modal dialog box that blocks the user interface.
许多人alert(hasNinjas)为此目的而使用，但console.log(hasNinjas)更容易使用。使用警报弹出一个模式对话框，阻止用户界面。
Edit: I agree with Baptiste Pernetand Jan Han?i?that it is a very good idea to check if window.consoleis defined first so that your code doesn't break if there is no console available.
编辑：我同意Baptiste Pernet和Jan Han 的观点？我？window.console首先检查是否已定义是一个很好的主意，这样如果没有可用的控制台，您的代码就不会中断。
