Console - 提供了对浏览器调试控制台的访问

Console 对象提供了对浏览器调试控制台的访问（例如 Firefox 中的 Web 控制台）。其工作原理的具体细节因浏览器而异，但通常会提供_事实上_的一组功能。

可以从任何全局对象访问 Console 对象。如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。它定义为 Window.console，可以简单地通过 console 来引用。例如

console.log("无法打开指定的链接")

该页面记录了 Console 对象上可用的方法，并提供了一些用法示例。

方法

Console.assert()

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

Console.clear()

清空控制台。

Console.count()

输出给定的标签，调用该行的次数。

Console.debug()

使用日志级别 "debug" 向控制台输出消息。

注意： 从 Chromium 58 开始，当选择级别为 “Verbose” 时，该方法的输出才在 Chromium 浏览器控制台中显示。

Console.dir()

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

Console.dirxml()

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

Console.error()

打印一条 error 级别的信息。您可以使用字符串替换作为该方法的额外参数。

Console.exception()

error() 的别名。

Console.group()

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

Console.groupCollapsed()

创建一个新的内联组，将所有后续输出缩进另一个级别。然而，与 group() 不同，改内联组是默认折叠的，需要点击来展开它。要退出一个级别，请调用 groupEnd() 。

Console.groupEnd()

退出当前的内联组。

Console.info()

打印一条 info 级别的信息。您可以使用字符串替换作为该方法的额外参数。

Console.log()

用于记录信息的一般输出。您可以使用字符串替换作为该方法的额外参数。

Console.profile()

启动浏览器的内置分析器（例如，Firefox 性能工具）。您可以为分析的文件指定名称。

Console.profileEnd()

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

Console.table()

将表格数据显示为表格。

Console.time()

使用指定的名称启动 timer。在给定页面上最多可以运行 10,000 个同步计时器。

Console.timeEnd()

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

Console.timeStamp()

在浏览器的 时间轴 或 Waterfall 工具中添加标记。

Console.trace()

输出堆栈跟踪。

Console.warn()

打印一条 warn 级别的信息。您可以使用字符串替换作为该方法的额外参数。

用法

将文本输出到控制台

控制台最常用的功能是记录文本和其他数据。您可以分别使用 console.log()，console.info()，console.warn() 和 console.error() 方法生成四种类型的输出。这些结果中的每一个都会导致输出在日志中的样式不同，您可以使用浏览器提供的过滤控件来仅查看您感兴趣的输出类型。

每种输入方式有两种方法可以调用；你可以简单地传入一个对象列表，这些对象的字符串表示被连接成一个字符串，然后输出到控制台，或者你可以传入一个包含零个或多个替换字符串的字符串，后跟一个对象列表来替换它们。

输出单个对象

使用日志记录方法的最简单方法是输出单个对象：

var someObject = { str: "Some text", id: 5 };
console.log(someObject);

输出看起来像这样：

[09:27:13.475] ({str:"Some text", id:5})

输出多个对象

您还可以在调用日志记录方法时通过简单地列出它们来输出多个对象，如下所示：

var car = "Dodge Charger";
var someObject = { str: "Some text", id: 5 }; 
console.info("My first car was a", car, ". The object is:", someObject);

输出看起来像这样：

[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})

字符串替换

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 引入了对字符串替换的支持。将字符串传递给接受字符串的控制台对象的方法之一时，您可以使用这些替换字符串：

替换字符串	描述
%o 或 %O	输出 JavaScript 对象。单击对象名称可在检查器中展开有关它的更多信息。
%d 或 %i	输出一个整数。支持数字格式，例如 console.log("Foo %.2d", 1.1) 将输出数字作为两个有效数字，前导 0：Foo 01
%s	输出一个字符串。
%f	输出浮点值。支持格式化，例如 console.log("Foo %.2f", 1.1) 将数字输出到 2 位小数：Foo 1.10

注意： Chrome 中不支持精确格式化

每个都在格式字符串离开参数列表后拉出下一个参数。例如：

Each of these pulls the next argument after the format string off the parameter list. For example:

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}

输出看起来像这样：

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

给控制台输出加样式

您可以使用 %c 指令将 CSS 样式应用于控制台输出：

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

指令前的文本不会受到影响，但指令后面的文本将使用参数中的 CSS 声明设置样式。

注意： 这种方法支持相当多的 CSS 属性；你应该试验一下，看看哪些是有效的。

您可以使用嵌套组通过直观地组合相关材料来帮助组织输出。要创建一个新的嵌套块，请调用 console.group() 。 console.groupCollapsed() 方法也类似，但创建的是折叠的块，需要点击按钮来展开它。

注意： Gecko 尚不支持折叠组；目前 groupCollapsed() 方法与 group() 效果相同。

要退出当前组，只需调用 console.groupEnd() 。例如，给定该代码：

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

输出看起来像这样：

为了计算特定操作的持续时间，Gecko 10 在 console 对象中引入了定时器的支持。要启动计时器，请调用 console.time() 方法，为其指定一个名称作为唯一参数。要停止计时器，并以毫秒为单位获取经过的时间，只需调用 console.timeEnd() 方法，再次将计时器的名称作为参数传递。在给定页面上最多可同时运行 10,000 个计时器。

例如，给定该代码：

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

将记录用户查看警报框所需的时间：

注意： 重要的是要注意，如果您使用它来记录网络流量的时间，计时器将报告事务的总时间，而网络面板中列出的时间只是标头所需的时间。如果启用了响应正文日志记录，则响应标题和正文组合列出的时间应与您在控制台输出中看到的时间相匹配。

堆栈跟踪

控制台对象还支持输出堆栈跟踪；这将显示到达您调用 console.trace() 的点所需的调用路径。给出这样的代码：

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

控制台中的输出如下所示：

规范

规范	状态	备注
Console API	现行的标准	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Internet Explorer 8 和 9 中，当未打开开发人员工具时，console 对象是 undefined。此行为已在 Internet Explorer 10 中修复。

2. 断言失败时抛出错误。

3. console.log 的别名

4. 不使用 Logger 记录数据。

5. console.group 的别名

6. console.error 的别名

注意

至少在 Firefox 中，如果页面定义了一个 console 对象，那么该对象将覆盖 Firefox 内置的对象。

• 在 Gecko 12.0 之前，控制台对象的方法仅在 Web 控制台打开时才起作用。从 Gecko 12.0 开始，输出将被缓存，直到打开 Web 控制台，然后显示。
• 值得注意的是 Firefox 的内置 Console 对象与 Firebug 提供的对象兼容。

相关链接

• Web 控制台 — Firefox 中的 Web 控制台如何处理控制台 API 调用
• 远程调试i — 调试目标是移动设备时如何查看控制台输出
• 设备上的控制台日志记录 — 如何在 Firefox OS 设备输出日志

其他实现

• Google Chrome DevTools
• Firebug
• Internet Explorer
• Safari