摘自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 控制台信息记录
