控制台

console.assert()

如果第一个参数为 false，则将错误消息记录到控制台。

console.clear()

清除控制台。

console.count()

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

console.countReset()

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

console.debug()

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

console.dir()

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

console.dirxml()

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

console.error()

使用错误日志级别将消息输出到控制台。

console.exception() 非标准 已弃用

console.error() 的别名。

console.group()

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

console.groupCollapsed()

创建一个新的内联 组，将所有后续输出缩进一个级别。但是，与 console.group() 不同，它以折叠的内联组开始，需要使用展开按钮将其展开。若要向后退出一级，请调用 console.groupEnd()。

console.groupEnd()

退出当前内联 组。

console.info()

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

console.log()

将消息输出到控制台。

console.profile() 非标准

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

console.profileEnd() 非标准

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

console.table()

将表格数据显示为表格。

console.time()

启动一个 计时器，其名称作为输入参数指定。在给定页面上最多可以运行 10,000 个同时计时器。

console.timeEnd()

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

console.timeLog()

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

console.timeStamp() 非标准

在浏览器性能工具的时间线上添加一个标记（Chrome 或 Firefox）。

console.trace()

输出 堆栈跟踪。

console.warn()

使用警告日志级别将消息输出到控制台。

控制台最常用的功能是记录文本和其他数据。您可以使用 console.log()、console.info()、console.warn()、console.error() 或 console.debug() 方法生成几种类型的输出。这些输出在日志中的样式各不相同，您可以使用浏览器提供的筛选控件仅查看您感兴趣的输出类型。

有两种方法可以使用每种输出方法

• 传入可变数量的参数，其字符串表示形式连接成一个字符串，然后输出到控制台。
• 传入一个包含零个或多个替换字符串的字符串，然后传入可变数量的参数来替换它们。

输出单个对象

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

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

输出类似如下所示

{str:"Some text", id:5}

浏览器将显示尽可能多和想要显示的有关该对象的信息。例如，对象的私有状态也可能被显示。某些类型的对象，例如 DOM 元素或函数，也可能以特殊方式显示。

对象快照

有关对象的信息是延迟检索的。这意味着日志消息显示对象在首次查看时而非记录时的内容。例如

const obj = {};
console.log(obj);
obj.prop = 123;

这将输出 {}。但是，如果您展开对象的详细信息，您将看到 prop: 123。

如果您要更改对象并且想要防止记录的信息被更新，则可以在记录它之前 深度克隆 该对象。一种常见的方法是 JSON.stringify()，然后 JSON.parse() 它

console.log(JSON.parse(JSON.stringify(obj)));

还有其他在浏览器中有效的替代方案，例如 structuredClone()，它们在克隆不同类型的对象方面更有效。

输出多个对象

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

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

输出将如下所示

My first car was a Dodge Charger. The object is: {str:"Some text", id:5}

使用字符串替换

日志方法的第一个参数可以是包含零个或多个替换字符串的字符串。每个替换字符串都将被相应的参数值替换。

%o

以“最佳可用格式”样式输出 JavaScript 对象，例如，DOM 元素可能以与在元素检查器中显示的方式相同的方式显示。

%O

以“通用 JavaScript 对象格式”样式输出 JavaScript 对象，通常采用可展开树的形式。这类似于 console.dir()。

%d 或 %i

输出整数。

%s

输出字符串。

%f

输出浮点值。

%c

将 CSS 样式规则应用于所有后续文本。请参阅 样式化控制台输出。

某些浏览器可能会实现其他格式说明符。例如，Safari 和 Firefox 支持 C 样式精度格式 %.<precision>f。例如，console.log("Foo %.2f", 1.1) 将以 2 位小数输出数字：Foo 1.10，而 console.log("Foo %.2d", 1.1) 将以两位有效数字输出数字，并在前面添加一个 0：Foo 01。

这些都从参数列表中提取格式字符串后面的下一个参数。例如

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

输出类似如下所示

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
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 声明进行样式化。

您可以多次使用 %c

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

与 %c 语法一起使用的属性如下（至少在 Firefox 中 - 它们在其他浏览器中可能有所不同）

• background 及其详细版本
• border 及其详细版本
• border-radius
• box-decoration-break
• box-shadow
• clear 和 float
• color
• cursor
• display
• font 及其详细写法
• line-height
• margin
• outline 及其详细写法
• padding
• text-* 属性，例如 text-transform
• white-space
• word-spacing 和 word-break
• writing-mode

您可以使用嵌套组通过视觉上组合相关材料来帮助组织输出。要创建新的嵌套块，请调用console.group()。console.groupCollapsed()方法类似，但会创建折叠的新块，需要使用展开按钮将其打开以供阅读。

要退出当前组，请调用console.groupEnd()。例如，给定以下代码

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

输出类似如下所示

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

例如，给定以下代码

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");

将记录用户关闭警报框所需的时间，将时间记录到控制台，等待用户关闭第二个警报，然后将结束时间记录到控制台

请注意，计时器的名称在计时器启动和停止时都会显示。

控制台对象还支持输出堆栈跟踪；这将向您显示调用 console.trace() 的位置所采用的调用路径。给定如下代码

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

foo();

控制台中的输出类似于以下内容

• Firefox 开发者工具
• Web 控制台 — Firefox 中的 Web 控制台如何处理控制台 API 调用
• about:debugging — 调试目标为移动设备时如何查看控制台输出
• Google Chrome 开发者工具
• Microsoft Edge 开发者工具
• Safari Web 检查器