javascript - 什么是控制台.log？

Question

有什么用console.log？

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

score 460 · Accepted Answer

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

score 226 · Accepted Answer

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

火狐

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/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 检查器与您的设备通信的选项。

视窗手机、安卓

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

iOS 和安卓

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

旧版浏览器问题

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

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

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

score 101 · Accepted Answer

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

console.log('Testing console');

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

score 84 · Accepted Answer

它会将日志消息发布到浏览器的 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 ，我建议您阅读它。（跟踪、组、分析、对象检查）。

希望这可以帮助！

score 34 · Accepted Answer

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

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

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

正如评论中所建议的，您也可以在一个地方执行它，然后console.log正常使用

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

score 23 · Accepted Answer

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

score 19 · Accepted Answer

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

score 16 · Accepted Answer

16

console.log与jQuery无关。

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

于 2010-12-27T14:14:13.727 回答

score 16 · Accepted Answer

有时令人困惑的一点是，要使用 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 实际上需要尽可能多的参数。

score 13 · Accepted Answer

用于console.log将调试信息添加到您的页面。

许多人alert(hasNinjas)用于此目的，但console.log(hasNinjas)更容易使用。使用警报弹出窗口会阻止用户界面的模式对话框。

编辑：我同意Baptiste Pernet和Jan Hančič的观点，即最好先检查是否window.console已定义，这样如果没有可用的控制台，您的代码就不会中断。

score 12 · Accepted Answer

一个例子 - 假设你想知道你能够运行你的程序的哪一行代码（在它崩溃之前！），只需输入

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

score 11 · Accepted Answer

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

var variable;

console.log(variable);

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

它类似于PHPprint_r($var);。

score 10 · Accepted Answer

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

score 10 · Accepted Answer

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

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

控制台对象是 DOM 的扩展。

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

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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

var i;

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

console.log(i);

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

在此处引用 MDN 文档

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

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

如何在 Javascript 中使用？

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

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

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

score 0 · Accepted Answer

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

为什么可用：

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);

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

score 0 · Accepted Answer

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

例如代码：

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

图片：

输出：

score 0 · Accepted Answer

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'});

通过此处的示例查找有关控制台的更多信息：控制台

score 0 · Accepted Answer

console.log() 用于开发人员一般记录输出信息。

您还有其他控制台方法，如下所示

控制台.assert()

//如果第一个参数为假，则将消息和堆栈跟踪记录到控制台。

控制台.clear()

// 清除控制台。

控制台.count()

// 记录使用给定标签调用此行的次数。

控制台.countReset()

// 使用给定标签重置计数器的值。

控制台.调试（）

// 使用日志级别调试将消息输出到控制台。

控制台.dir()

// 显示指定 JavaScript 对象的属性的交互式列表。此列表允许您使用显示三角形来检查子对象的内容。

控制台.dirxml()

// 如果可能，则显示指定对象的 XML/HTML 元素表示，如果不可能，则显示 JavaScript 对象视图。

控制台错误（）

// 输出错误信息。您可以在此方法中使用字符串替换和附加参数。

控制台异常（）

// 非标准 // error() 的别名。

控制台.组（）

// 创建一个新的内联组，将所有后续输出缩进另一个级别。要移出关卡，请调用 groupEnd()。

console.groupCollapsed()

// 创建一个新的内联组，将所有后续输出缩进另一个级别。但是，与 group() 不同的是，它以折叠的内联组开始，需要使用公开按钮来展开它。要移出关卡，请调用 groupEnd()。

控制台.groupEnd()

// 退出当前的内联组。

控制台信息（）

// 信息记录。您可以在此方法中使用字符串替换和附加参数。

控制台.log()

// 用于日志信息的一般输出。您可以在此方法中使用字符串替换和附加参数。

控制台.profile()

// 非标准 // 启动浏览器的内置分析器（例如，Firefox 性能工具）。您可以为配置文件指定一个可选名称。

控制台.profileEnd()

// 非标准 // 停止分析器。您可以在浏览器的性能工具（例如，Firefox 性能工具）中查看生成的配置文件。

控制台.table()

// 将表格数据显示为表格。

控制台时间（）

// 使用指定为输入参数的名称启动计时器。在给定页面上最多可以同时运行 10,000 个计时器。

控制台.timeEnd()

// 停止指定的计时器并记录自启动以来经过的时间（以毫秒为单位）。

控制台.timeLog()

// 将指定计时器的值记录到控制台。

控制台.timeStamp()

// 非标准 // 将标记添加到浏览器的时间轴或瀑布工具。

控制台.trace()

// 输出堆栈跟踪。

控制台.warn()

javascript - 什么是控制台.log？

26 回答 26

如何在 Javascript 中使用？

Related

Reference