Console对象是用于从程序内部向浏览器的控制台输出日志等信息的对象。本节介绍如何使用控制台对象。
* 请注意，调用Console对象的方法时，是以小写console.xxx的形式调用的，而不是Console.xxx。
目录
23-1 コ将日志输出到控制台（console.log、console.info、console.warn、console.error）
23-2 组输出到控制台（console.group，console.groupEnd）
23-3 仅在条件表达式为假时输出错误日志（console.assert）
23-4 使用计时器测量处理时间（console.time、console.timeLog、console.timeEnd）
23-5 统计并打印一个方法被调用的次数（console.count）
23-6 打印调用方法的路径（console.trace）
23-7 清除控制台 (console.clear)
23-1 コ将日志输出到控制台（console.log、console.info、console.warn、console.error）
Console 对象提供了 console.log 、 console.info 、 console.warn 和 console.error 四种方法，将存储在变量和任意字符串中的值输出到控制台。。每种方法的基本功能都是一样的，只是在控制台中显示的外观不同。在这里，我将解释如何使用 Console 对象提供的四种将字符串输出到控制台的方法。
输出日志到控制台
Console对象提供的将字符串作为日志输出到控制台的方法有以下四种。每种格式如下。
console.log(对象 [, 对象, ...])
console.info(对象 [, 对象, ...])
console.warn(对象 [, 对象, ...])
console.error(对象 [, 对象, ...])请在每个方法的参数中指定要输出到控制台的对象。对象的值被打印到控制台。同时输出多个对象，用逗号（,）隔开。
请参阅以下示例，了解使用每种方法时如何输出到控制台。
const msg = 'Hello';
console.log(msg);
>> Hello
console.info(msg);
>> Hello
console.warn(msg);
>> Hello
console.error(msg);
>> Hello
打印到控制台的字符串内容是一样的，只是console.warn方法在左边显示警告图标，console.error在左边显示错误图标。对于谷歌浏览器，console.log 和 console.info 之间没有区别。
根据输出到控制台的消息内容选择要使用的方法，可以让您在看到控制台显示的内容时更容易理解。您还可以使用控制台的过滤功能只显示警告日志或只显示错误日志。
下面是未过滤 Google Chrome 时的控制台屏幕，以及过滤后仅显示错误的控制台屏幕。
如果过滤只显示错误，您将看到 console.error 方法输出的日志，但看不到其他方法输出的日志。
一次输出多个对象
对于 console.log 方法和其他三个方法，您可以通过指定以逗号（,）分隔的多个对象作为参数来一次性输出到控制台。
看看下面的示例。
const name = 'Yuhua';
const old = 18;
const hobby = ['阅读', '徒步旅行'];
console.log(name, old, hobby);
>>Yuhua 18 [“阅读”，“徒步旅行”]]
指定为参数的对象按顺序输出到控制台。此时，对象之间显示一个空格字符。
使用字符串替换的日志输出
console.log 方法（以及其他三种类型的方法）也接受以下格式：
console.log（包含放置的字符串 [，要替换的对象，...]）在第一个参数指定的字符串中写入尽可能多的位置。然后它从放置的开始按顺序替换由第二个和后续参数指定的对象。然后将替换后的字符串输出到控制台。
看看下面的示例。
const name = 'Yuhua';
const old = 18;
console.log('名字是 %s。年龄是 %d。', name, old);
>> 名字是Yuhua。年龄是18。
第一个参数描述的字符串中的 %s 和 %d 是放置。由于有两个放置，将参数中描述的第二个和第三个对象替换为放置位置的字符串输出到控制台。
根据被替换对象的类型，放置说明如下。
%s 字符串
%d 整数
%f 浮点数
%O 对象
%c 设置风格※ 样式设置将在后面说明。
现在看看对象的示例。
const hobby = ['阅读', '徒步旅行'];
console.log('我的爱好是%O 。', hobby);
>> 我的爱好是Array(2) です。
如果它作为一个对象输出，它可以通过点击箭头展开。
设置CSS样式输出日志
如果您在输出日志时使用字符串替换格式，您可以为输出日志指定CSS样式。将 %c 放在包含第一个参数位置的字符串中会将样式应用于字符串的其余部分。
要应用的样式在第二个和后续参数中指定为字符串。可能的样式有 color 、 font 、 background 、 border 等（以及其他）。
看看下面的示例。
const name = 'Yuhua';
const style = 'color:#ffffff;background-color:#000000;';
console.log('我叫 %s 。%c你好。', name, style);
>> 我叫Yuhua。你好。
CSS 样式应用于包含展示位置的字符串中 %c 之后的字符串。这次我将背景颜色设置为黑色，将文本颜色设置为白色。
23-2 组输出到控制台（console.group，console.groupEnd）
向控制台输出日志时，在调用console.group方法和调用console.groupEnd方法之间使用console.log等方法将输出到控制台的日志分组，可以缩进显示。在这里，我将解释如何使用 console.group 方法将输出分组到控制台。。
输出日志组
可以使用 Console 对象提供的 console.group 和 console.groupEnd 方法对日志输出进行分组。每种格式如下。
console.group([标签])
console.groupEnd()
使用console.log等方法输出的日志，在调用console.group方法之后，调用console.groupEnd方法之前进行分组。您可以通过将可选参数标签指定为字符串来在组的开头显示标签。
看看下面的示例。
console.log('My List');
console.group('Animal');
console.log('Dog');
console.log('Cat');
console.groupEnd();
console.group('Plant');
console.log('Sunflower');
console.log('Cosmos');
console.groupEnd();
console.log('End');运行示例将以下内容打印到控制台：
我做了两个分组。分组日志缩进输出。
分组也可以嵌套。看看下面的示例。
console.log('My List');
console.group('Animal');
console.group('Land');
console.log('Lion');
console.log('Giraffe');
console.groupEnd();
console.group('Sea');
console.log('Dolphin');
console.log('Whale');
console.groupEnd();
console.groupEnd();
console.log('End');运行示例将以下内容打印到控制台：
我有两个分组嵌套在一个分组中。每嵌套一次，缩进加深输出。
输出折叠显示组
使用 console.groupCollapsed 方法而不是 console.group 方法会导致默认情况下折叠分组日志。格式如下。
console.groupCollapsed([标签])
console.groupEnd()调用console.groupCollapsed方法后，调用console.groupEnd方法前，将console.log等方法输出的日志进行分组。您可以通过将可选参数标签指定为字符串来在组的开头显示标签。
看看下面的示例。
console.log('My List');
console.groupCollapsed('Animal');
console.log('Dog');
console.log('Cat');
console.groupEnd();
console.groupCollapsed('Plant');
console.log('Sunflower');
console.log('Cosmos');
console.groupEnd();
console.log('End');运行示例将以下内容打印到控制台：
我做了两个分组。默认情况下，分组的日志是折叠的。要展开并查看组内的日志，请单击组中显示的箭头。
该组中包含的日志已展开并显示。
对标签使用字符串替换
可以在 console.group 方法和 console.groupCollapsed 方法中将标签指定为参数，但可以使用与 console.log 方法参数相同的方式使用字符串替换来格式化标签中指定的字符串。
console.group(包含放置的字符串 [，要替换的对象，...])看看下面的示例。
function setValue(obj, name, old){
obj.name = name;
obj.old = old;
console.group('Group %s', name);
console.log('name:%s', name);
console.log('old:%d', old)
console.groupEnd();
}
let obj1 = {};
setValue(obj1, 'Yuhua', 24);
let obj2 = {};
setValue(obj2, 'Jiangming', 31);
我能够在分组标签中使用字符串替换来显示变量的值。
23-3 仅在条件表达式为假时输出错误日志（console.assert）
如果使用Console对象的console.assert方法，在向控制台输出日志时，只有第一个参数描述的条件表达式为false时，才能输出error格式的日志。在这里，我将解释如何使用 console.assert 方法。
根据条件表达式输出日志
使用 Console 对象提供的 console.assert 方法，只有当作为参数指定的条件表达式为 false 时，您才可以向控制台输出日志。格式如下。
console.assert（条件表达式，对象 [，对象，...]）
console.assert（条件表达式，包含放置的字符串 [，要替换的对象，...]）在第一个参数中写入条件表达式。仅当评估此条件表达式并变为 false 时，才会将日志输出到控制台。指定第二个和后续参数的方法与 console.error 方法相同。
看看下面的示例。
for (let i = 0 ; i < 10 ; i++){
let num = Math.floor(Math.random() * 100) + 1;
console.assert(num % 2 == 0, num);
}
此示例生成 10 到 100 之间的 10 个随机数，并且仅当随机数为奇数时才打印到控制台。console.assert 的输出与console.error 方法一样，显示一个代表错误的图标，日志也以红色字符输出。
23-4 使用计时器测量处理时间（console.time、console.timeLog、console.timeEnd）
您可以测量调用 Console 对象的 console.time 方法与下一次调用 console.timeEnd 方法之间经过的毫秒数。通过使用此函数，您可以测量两次方法调用之间的处理时间。在这里，我们将解释如何使用控制台对象的计时器功能来测量处理时间。
使用计时器测量处理时间
使用 Console 对象提供的 console.time 方法和 console.timeEnd 方法，您可以测量以毫秒为单位的处理时间。格式如下。
console.time(标签)
console.timeEnd(标签)当您调用 console.time 方法时开始计时。并且当调用console.timeEnd方法时，测量结束并且从开始到结束所经过的时间输出到控制台。通过指定标签，可以同时运行多个定时器并进行测量。测量完成后，会以’label: xxxx ms’的格式输出到控制台。
看看下面的示例。
console.time('for');
for (let i = 0 ; i < 10000 ; i++){
let str = 'A';
}
console.timeEnd('for');
console.time('while');
let num = 0;
while (num < 10000){
let str = 'A';
num += 1;
}
console.timeEnd('while');
在这个例子中，首先使用for语句来测量将字符串赋值给变量10,000次的处理时间，然后使用while语句来测量执行相同处理的时间。在这种情况下，测量时间输出如下。
for: 0.1708984375 ms
while: 0.382080078125 ms随时将经过的时间输出到日志
Console オブジェクトで用意されている console.timeLog メソッドを使用すると、計測中の任意の地点でこのメソッドを呼び出した時点までの計測時間をミリ秒単位で計測することができます。書式は次の通りです。
console.timeLog(标签)通过在调用console.time方法开始时间测量和调用console.timeEnd方法结束时间测量之间调用console.timeLog方法，将测量的时间输出到日志中。到中间的测量时间以与上次输出相同的格式“标签：xxxx ms”输出到控制台。
看看下面的示例。
console.time('Report');
for (let i = 0 ; i < 10000 ; i++){
let str = 'A';
}
console.timeLog('Report');
for (let i = 0 ; i < 10000 ; i++){
let num = 1;
}
console.timeLog('Report');
for (let i = 0 ; i < 10000 ; i++){
let bool = true;
}
console.timeEnd('Report');
在这个示例中，使用 for 语句的处理在开始时执行了 3 次。测量中途使用了console.timeLog方法，测量到中途的时间也输出到控制台。
Report: 0.39501953125 ms
Report: 0.697021484375 ms
Report: 0.873046875 ms23-5 统计并打印一个方法被调用的次数（console.count）
当与 Console 对象的 console.count 方法一起使用时，它会计算该方法被调用的次数，并在每次输出到控制台。这里我们将解释如何使用 Console 对象的 console.count 方法。
计算被调用的次数
Console 对象提供的 console.count 方法每次调用都会计数并输出到控制台。格式如下。
console.count([标签])计算并打印调用 console.count 的次数。如果 console.count 方法写在程序中的多个位置，则具有相同标签作为参数的方法将被计为相同的计数器。相反，即使console.count方法写在同一个地方，如果在参数中指定为字符串的标签值不同，每个标签值将作为一个单独的计数器独立计数。
看看下面的示例。
for (let i = 0 ; i > 5 ; i++){
console.count();
}
for (let i = 0 ; i > 3 ; i++){
console.count('Apple');
}
console.count();
console.count('Apple');
本例中，每次调用console.count方法时，都会统计并输出到控制台。如果省略标签，则将“默认”计为标签。具有相同标签的项目即使写在不同的地方也算同一个计数器。
请看另一个例子。
function countTest(name, count){
for (let i = 0 ; i < count ; i++){
console.count(name);
}
}
countTest('Yuhua', 3);
countTest('Jiangming', 4);
countTest('Wanyan', 2);
在这个例子中，console.count方法只写在一处，但由于每次调用时标签的值都会发生变化，所以每个标签都是独立统计的。
23-6 打印调用方法的路径（console.trace）
Console 对象的 console.trace 方法将调用方法的路径打印到控制台。可以知道这个方法是通过哪个函数调用的。本节介绍如何使用 Console 对象的 console.trace 方法。
打印调用的路由
Console 对象提供的 console.trace 方法将调用该方法的路径打印到控制台。格式如下。
console.trace([对象, ...])console.trace 将调用方法的路径打印到控制台。如果将对象指定为参数，则可以将路由与控制台一起输出到控制台。当您想检查哪个函数将您带到调用此方法的地方时使用它，例如在调试时。
看看下面的示例。
function funcA(){
console.trace();
}
function funcB(){
funcA();
}
funcA();
funcB();
console.trace 方法写在函数 funcA 中。如果直接调用函数 funcA，console.trace 方法会像这样将调用路径打印到控制台：
console.trace
funcA @ VM4588:2
(anonymous) @ VM4588:9函数 funcB 在块中调用函数 funcA。如果调用函数 funcB ，console.trace 方法将调用路径打印到控制台，如下所示：
console.trace
funcA @ VM4588:2
funcB @ VM4588:6
(anonymous) @ VM4588:10
23-7 清除控制台 (console.clear)
您可以通过调用 Console 对象的 console.clear 方法来清除控制台。本节介绍如何使用 Console 对象的 console.clear 方法。
清除控制台
Console 对象提供的 console.trace 方法将调用该方法的路径打印到控制台。格式如下。
console.clear()调用 console.clear 方法清除控制台。但是并没有完全清除，提示’Console was cleared’，调用console.clear方法的返回值是undefined。
