console 那些事儿

小山头

摘自https://developer.mozilla.org/zh-CN/docs/Web/API/Console
Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console），不同浏览器上他的工作方式不同，以下介绍为大多浏览器都会提供的接口特性。

Console 对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。

它被浏览器定义为 Window.console，也可被简单的 console 调用。例如：

console.log("Failed to open the specified link")

Console.assert()

如果断言为false，则将一个错误消息写入控制台。如果断言是true，没有任何反应。

Note: 此特性在 Web Worker 中可用。
Note: console.assert( )方法在Node.js中的实现和浏览器中可用的console.assert()方法实现
是不同的。在浏览器中当console.assert()方法接受到一个值为假断言（assertion）的时候，会向控
制台输出传入的内容，但是并不会中断代码的执行，而在Node.js中一个值为假的断言将会导致一个
AssertionError被抛出，使得代码执行被打断。

语法

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting

参数

• assertion：一个布尔表达式。如果assertion为假，消息将会被输出到控制台之中。
• obj1 ... objN：被用来输出的Javascript对象列表，最后输出的字符串是各个对象依次拼接的结果。
• msg：一个包含零个或多个子串的Javascript字符串。
• subst1 ... substN： 各个消息作为字串的Javascript对象。这个参数可以让你能够控制输出的格式。

实例

let obj = {a: 1, b: 2, c: 3};
// console.assert(obj.a == 1, obj); // 语句一
console.assert(obj.c == 1, obj); // 语句二

• 当执行 语句一，第一个参数值为 true，控制台无任何打印；

• 执行 语句二，控制台输出：

  
  

Console.clear()

清空控制台.

控制台显示的内容将会被一些信息替换，比如‘Console was cleared’这样的信息。

需要的注意的一点是在Google Chrome浏览器中，如果用户在设置中勾选了“Preserve log”选项，console.clear()将不会起作用。

语法

console.clear();

Console.count()

输出 count() 被调用的次数。此函数接受一个可选参数 label(字符串)。

如果有 label，此函数输出为那个指定的 label 和 count() 被调用的次数。

如果 label 被忽略，此函数输出 count() 在其所处位置上被调用的次数。

语法

console.count([label]);

参数

• label: 字符串，如果有，count() 输出此给定的 label 及其被调用的次数。

例如：

var user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "Alice";
greet(); // 第11行
greet();
console.count();

Console 的输出如下:

"<no label>: 1"
"<no label>: 2"
"<no label>: 3"
"<no label>: 1"

注意最后一行的日志输出：在 11 行对 count() 的单独调用是被当作一个独立事件来处理的。

如果把变量 user 当作 label 参数传给前面调用的 count()，把字符串 "alice" 传给后面调用的 count()：

var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "Alice";
greet(); // 第11行
greet();
console.count("Alice");

可以看到输出如下:

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"

现在可以基于不同的 label 值维护不同的数值。由于 11 行的 label 匹配了两次 user 的值，因此它不会被当作独立的事件。

Console.countReset()

语法

console.countReset([label]);

参数

• label：一个字符串， 若传入此参数 countReset() 重置此label的count为0。
  若忽略此参数 countReset() 重置count()默认的 default 字段的count为0

返回值

• 若传入label参数: counter-name: 0
• 若不传入label参数: default: 0

异常情况

若传入一个不存在的 label, countReset 返回下面的警告信息:

Counter "counter-name" doesn’t exist.

若 label 没有被传入 并且 count() 也没有被调用过, countReset 返回下面的警告信息:

Counter "default" doesn’t exist.

示例

下面给出示例代码:

var user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "Alice";
greet();
greet();
console.count();
console.countReset();

控制台打印输出结果:

"default: 1"
"default: 2"
"default: 3"
"default: 1"
"default: 0"

可以看到 调用 console.counterReset() 重置了default 的计数为0
如果我们把 user 变量做为 label 传入第一次调用的 count() 把字符串 'alice' 作为第二次调用count() 的参数

var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "Alice";
greet();
greet();
console.countReset("bob");
console.count("Alice");

我们看到的输出如下:

"bob: 1"
"alice: 1"
"alice: 2"
"bob: 0"
"alice: 3"

调用countReset("bod")只是重置了 "bob" 的计数器值 而 "alice" 的计数器值没有改变。

Console.debug()

Console.debug() 输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。

语法

console.debug(对象1 [, 对象2, ..., 对象N]);
console.debug(消息[, 字符串1, ..., 字符串N]);

参数

• 对象1 ... 对象N: 要输出的JavaScript 对象列表。 按传参的顺序把对象输出到控制台。
• 消息: 一个JavaScript字符串，其中包含零个或多个替代字符串。
• 字符串1 ... 字符串N: JavaScript 对象，用来依次替换msg中的替代字符串。你可以在替代字符串中指定对象的输出格式。查看使用字符串替换 in Console了解替换字符串如何工作。

console.dir

在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。

语法

console.dir(object);

参数

• object: 打印出该对象的所有属性和属性值.

Console.dirxml()

显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示，那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表，可以让你看到子节点的内容。

语法

console.dirxml(object);

参数

• object: 一个属性将被输出的JavaScript对象。

Console.error()

向 Web 控制台输出一条错误消息。

语法

console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);
console.exception(obj1 [, obj2, ..., objN]);
console.exception(msg [, subst1, ..., substN]);

注意: console.exception() 是 console.error() 的别名；它们功能相同。

参数

• obj1 ... objN: 要输出的 JavaScript 对象列表。 这些对象的字符串形式按顺序加起来然后输出。
• msg: 一个字符串，它包含零个或多个替代字符串。
• subst1 ... substN: JavaScript 对象可以用此来替换msg里的替代字符串。你可以控制输出的格式。

console.group()/console.groupEnd()/console.groupCollapsed

在 Web控制台上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束.
console.groupCollapsed()新建的分组默认是折叠的.用户必须点击一个按钮才能将折叠的内容打开.

Console.info()

向web控制台输出一个通知信息。在Firefox和Chrome中，web控制台的日志中的项目旁边会显示一个小的‘I‘图标

语法

console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);

参数

obj1 ... objN: 要输出的JavaScript对象列表。对象obj1,obj2,...列出顺序和输出顺序一致。
msg: JavaScript字符串。可包含零个或多个替换字符串。
subst1 ... substN: 用于替换msg内的替换字符串的JavaScript对象。 可以对输出的格式进行额外的控制。
打印多个对象

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

console.log

向 Web 控制台输出一条消息。

语法

console.log(obj1 [, obj2, ..., objN);
console.log(msg [, subst1, ..., substN);
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
console.log(`temp的值为: ${temp}`)

参数

• obj1 ... objN: 一个用于输出的 JavaScript 对象列表。其中每个对象会以字符串的形式按照顺序依次输出到控制台。
• msg: 一个JavaScript字符串，其中包含零个或多个替代字符串。
• subst1 ... substN: JavaScript 对象，用来依次替换msg中的替代字符串。你可以在替代字符串中指定对象的输出格式。

Console.table()

将数据以表格的形式显示。

这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。

它会把数据 data 以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。

表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。 如果数据是一个对象，那么它们的值就是各对象的属性名称。 注意（在 FireFox 中）console.table 被限制为只显示1000行（第一行是被标记的索引（原文：labeled index））。

语法

console.table(data [, columns]);

参数

• data: 要显示的数据。必须是数组或对象。
• columns: 一个包含列的名称的数组。

打印单一参数类型

数据的参数类型可以是数组或是对象。

// 打印一个由字符串组成的数组

console.table(["apples", "oranges", "bananas"]);

// 打印一个属性值是字符串的对象

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var me = new Person("John", "Smith");

console.table(me);

打印复合的参数类型

如果需要打印的元素在一个数组中，或者需要打印的属性在一个对象，并且他们本身就是一个数组或者对象，则将会把这个元素显示在同一行，每个元素占一列：

// 二元数组的打印

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

// 打印一个包含对象的数组

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

请注意，如果数组包含对象，则列将使用属性名称进行标记。

结果显示，如果数组中包含该对象，打印出来的列标签将是该对象的属性名

// 打印属性名是对象的对象

var family = {};

family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");

console.table(family);

选择要隐藏的列

console.table() 会把所有元素罗列在每一列，你可以使用 columns 参数选择要显示的列的子集：

// 一个对象数组，只打印 firstName

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);

按列重新排序

可以点击每列的顶部标签来重排输出的表格。

console.trace

向Web控制台输出一个堆栈跟踪.

在页面console文档中查看堆栈跟踪的详细介绍和示例.

语法

console.trace();

Console.warn()

向 Web 控制台输出一条警告信息。

语法

console.warn(obj1 [, obj2, ..., objN]);
console.warn(msg [, subst1, ..., substN]);

参考阅读

• Tools
• Web Console - Firefox Console 对象
• On-device console logging - Firefox OS 控制台信息记录