什么是控制台.log？答案

【问题标题】：What is console.log?什么是控制台.log？
【发布时间】：2011-06-12 05:43:51
【问题描述】：

console.log 有什么用？

请用代码示例说明如何在 JavaScript 中使用它。

【问题讨论】：

【解决方案1】：

它不是 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
}

【讨论】：

Google Chrome 的开发者工具也集成了一个控制台。
“这很有用，因为您在部署到生产环境时不必删除调试代码”
这对于不让 IE 为未定义控制台抛出错误也很有用
恕我直言，比每次检查 console.log 是否可用更好的是有这样的东西：if(typeof(console) == 'undefined') { console = {'log': function () {return}} } 在这种情况下，您可以在每次需要时编写 console.log 而无需检查它的存在！
如果控制台不可用，if (console.log)（甚至if (console && console.log)）仍然会抛出错误。您应该使用window.console（因为window 保证存在）并且一次只检查一个深度级别。

【解决方案2】：

可以查看控制台的地方！只是为了让它们都在一个答案中。

火狐

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

Internet Explorer

别忘了你可以在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 中访问 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

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

iOS 和 Android

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

旧版浏览器问题

最后，如果您在代码中使用 console.log 并且没有同时打开开发人员工具，那么旧版本的 IE 将会崩溃。幸运的是，这是一个简单的修复。在代码顶部使用以下代码 sn-p：

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

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

【讨论】：

如果有错误请指正，但我认为Firefox中的Firebug不需要查看控制台，只需单击Ctrl+Shift+J（工具> Web开发人员>错误控制台）
@Dane411 确实如此，但 firebug 更好，更常用。
@Fresheyeball 有人必须清理所有垃圾，但我认为在某些时候收获这些代表并真正保持社区清洁变得不那么有趣了。
谁反对这个答案，请发表评论。没有 cmets 的 downvotes 是没用的
window.console.log 之前有 window.dump。比空日志功能好

【解决方案3】：

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

console.log('Testing console');

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

【讨论】：

别忘了先定义一下，避免IE报错：stackoverflow.com/a/7585409/318765

【解决方案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建议您阅读。（跟踪、组、分析、对象检查）。

希望这会有所帮助！

【讨论】：

为什么console.log("x:", x) 比console.log("x:" + x) 好？因为, 比+ 更容易阅读，它是否更不容易出错？
在我看来，当您输出许多不同的东西时，它会更容易阅读。在这种情况下，它可能应该严格使用+，但我想表明您也可以在控制台函数中使用逗号。此外，如果两个变量都是整数或数组，它也可以避免问题。
console.log("x:", x) 明显更好，因为当x 是对象或数组（或字符串以外的任何内容）时，它会正确显示，而无需转换为字符串。

【解决方案5】：

与 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。

【解决方案6】：

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

【讨论】：

【解决方案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 链内部。

【讨论】：

【解决方案8】：

console.log 与 jQuery 无关。

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

【讨论】：

【解决方案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 实际上可以接受任意数量的参数。

【讨论】：

【解决方案10】：

使用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.")

【讨论】：

【解决方案12】：

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

var variable;

console.log(variable);

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

PHP 类似于print_r($var);。

【讨论】：

一个方便的提示...我总是在全局可访问的 javascript 文件中包含以下内容：if (!window.console) { window.console = { log : function() {} }; }。这使您可以避免忘记删除偶尔的调试语句。
@roufamatic 我不知道......添加代码，处理不属于的代码，似乎是一个非常糟糕的解决方案......尤其是当查找/替换如此简单时......

【解决方案13】：

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

【讨论】：

如果您使用 Windows 机器，控制台日志不会中断，但如果您使用 Internet Explorer，它会中断您的站点。
我认为答案中引用的博客已经不存在了。
原始链接已失效。我找到了一个 Web 存档副本。

【解决方案14】：

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

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

控制台对象是 DOM 的扩展。

console.log() 只能在开发和调试期间在代码中使用。

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

【讨论】：

【解决方案15】：

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

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

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

Chrome 控制台键盘快捷键

Windows：Ctrl + Shift + J
Mac：Cmd + 选项 + J

Firefox 控制台键盘快捷键

Windows：Ctrl + Shift + K
Mac：Cmd + 选项 + K

Internet Explorer 控制台键盘快捷键

F12键

Safari 控制台键盘快捷键

Cmd + 选项 + C

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

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

var i;

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

console.log(i);

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

【讨论】：

【解决方案18】：

它用于记录（您传递的任何内容）到Firebug 控制台。主要用途是调试您的 JavaScript 代码。

【讨论】：

【解决方案19】：

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

【讨论】：

【解决方案20】：

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

【讨论】：

完全没有 JQUERY 可以做的事情

【解决方案21】：

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

在您打开 IE 开发工具之前，它在 IE8 及以下版本中不存在。

【讨论】：

【解决方案22】：

Quoting MDN Docs here

console — 包含许多可以调用来执行的方法基本的调试任务，通常侧重于记录各种值到浏览器的 Web 控制台。

目前最常用的方法是console.log，使用记录特定变量中包含的当前值。

如何在Javascript中使用？

let myString = 'Hello World';
console.log(myString);

还要记住 console 是 Web 浏览器中全局 window 对象的一部分。因此，以下在技术上也是正确的，但在实际场景中并未使用。

let myString = 'Hello World';
window.console.log(myString);

【讨论】：

? 正确的控制台是窗口的全局部分

【解决方案23】：

我试着用简单的方式解释：

为什么可用：

console.log() 方法将消息写入控制台并显示。

~对测试非常有用。

~在脚本标签下/内部使用它们。

如何查看：

=>按 F12

语法：

console.log(你想显示的消息);

~接受一个参数并显示它。

使用数组：

var myArray = ["Ali", "John", "Shahrukh"];
console.log(myArray);

使用对象：

var myObject = { firstname : "Ali", lastname : "Rana" };
console.log(myObject);

处理文本：[方法 1]：

console.log("Hello StackOverflow");

处理文本：[方法 2]

var str = "Hello StackOverflow";
console.log(str);

使用数字：

var myvar = '2';
console.log(myvar);

使用函数：

function myfunction() { return (5 * 19); }
console.log(function());

显示带参数的消息：

var a = 2;
console.log("The value of a is " + a);

希望，它可能会有所帮助。

【讨论】：

【解决方案24】：

console.log() 是 JavaScript 中的一个函数，用于打印之前定义的任何类型的变量，或者只打印需要显示给用户的任何消息。

EG 代码：

function func() { return (5 * 18); }
     console.log(func());

图片：

输出：

【讨论】：

【解决方案25】：

console.log() ：这种方法是众所周知的，也是最常见的，它可以输出任何类型的任何东西。将字符串、数字、对象甚至 html 元素作为参数传递，它会为您打印相同的内容。

例如

console.log('Your print statements here!');
console.log('2nd parameter is type object', {type: 'object'});
console.log('can print with multiple parameters', 100001, {type: 'object'});

通过此处的示例了解有关控制台的更多信息：console

【讨论】：