原文：https://juejin.cn/post/691874…

日志打印

控制台最罕用的性能恐怕就是日志的打印查看了，然而大家都晓得几种日志打印的办法呢，上面一个一个说。

console.assert(expression, object)

看名字 assert（断言）差不多能猜出来是干嘛的。

console.assert(expression, object)

console.assert 接管两个参数，第一个是表达式，第二个是对象。

当表达式的值为 false 时，会打印一个谬误，谬误的内容就是第二个参数。

// 把这段代码 copy 到控制台执行
const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

会看到 reason 被打印进去。

这里我试了一下，第二个参数其实也能够是其余类型的数据。

console.clear()

这个办法式用来清空 console 控制台的，在方才的控制台里输出 console.clear() 而后回车，能够看到信息都被清空了。

当然还有其余几种清空的办法

• 执行 clear()，成果和 console.clear() 是一样的。
• 在控制台 按 control + l 按键
• 在控制台 按command + shift + p，而后输出 clear

第一项就是 Clear console，间接回车就好。

• Mac 电脑上其实还能够通过按键 command + k来清空控制台。

console.count([label])

这个办法是用来打印调用 count 的次数，能够传入一个参数来当做标识。

console.count('coffee'); // 复制到控制台执行一次

咱们会看到控制台会打印：coffee: 1, 咱们继续执行两次。

能够看到，coffee打印了三次。
如果不传参数，就是default，大家能够本人试一试。

console.countReset([label])

这个和 console.count 是对应的，用来重置计数的。

console.debug(object [, object, ...])

这个作用与 console.log 是雷同的，区别是打印日志的级别不同。console.log 是 Info 级别，console.debug 是 Verbose 级别。

console.dir(object)

这个办法用来打印指定对象的 JSON 模式。

这就是 document 对象的 JSON 模式的内容。

console.dirxml(object)

这个办法用来打印 node 节点的 xml模式。

console.error(object [, object, ...])

这个办法用来打印一个谬误的信息，并且蕴含堆栈轨迹（就是谬误产生的门路追踪）。

console.group(label)

这个办法能够将信息分组打印在一起，直到调用 console.groupEnd。

// 把这段代码复制到控制台执行
const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);

能够看到在 console.group 和 console.groupEnd 之间打印的信息呈现在了一组中，能够被折叠和开展。

console.groupEnd(label)

这个就不说了，下面说过了，和 console.group 是对应的。

console.groupCollapsed(label)

这个的作用和 console.group 是雷同的，区别是这个办法打印的日志会默认折叠起来。

还是下面那段代码，只不过把console.group 改成 console.groupCollapsed，再次执行。

能够看到信息默认折叠了。

console.info(object [, object, ...])

这个办法和 console.log 是雷同的。

console.log(object [, object, ...])

在控制台打印一个信息。这个应该都很相熟，用的也是最多的，就不说了。

console.table(array)

将信息打印为一个表格，比方数组

对象也能够

console.time([label])

用来开启一个新的定时器，晓得调用 console.timeEnd，并将所耗费的工夫打印进去。

// 复制到控制台执行
console.time();
for (var i = 0; i < 100000; i++) {let square = i ** 2;}
console.timeEnd();

console.time 和 cnsole.timeEnd 都是能够传一个参数的，作用和后面说的 console.count 相似。

console.timeEnd([label])

完结定时器，下面说过了。

console.trace()

打印堆栈追踪信息。

// 复制到控制台执行
const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

能够看到执行 console.trace 把函数的调用信息都打印进去了。

console.warn(object [, object, ...])

打印一个正告信息。

到这里也说了好多种打印的办法了，然而打印的信息是分级别的，有谬误、正告等。上面就总结一下。

在控制台如果想要依据日志级别来过滤信息的话，能够通过下面图片中标出的中央，来做过滤。

办法

$_

$_ 返回的是最近的表达式的值。

$0 – $4

$0 – $4返回的是 Elements 面板中最近抉择的五个 DOM 元素或者 Profiles 面板中最近抉择 5 个 Javascript 堆对象的历史援用。$0 是最近的援用，$1 是第二近的援用，顺次类推。

$(selector, [startNode])

$ 用法与 Jquery 选择器有些相似，然而实际上应用的却是 document.querySelector() 办法.

该办法还接管第二个参数 startNode，是一个 Node 节点，示意从此开始搜寻。

$$(selector, [startNode])

$$ 与下面的 $ 选择器相似，只不过应用的是 document.querySelectorAll() 办法。

$$ 办法也反对第二个参数 startNode，如不传则默认为 document。

$x(path, [startNode])

$x(path) 返回一个匹配给定 XPath 表达式的元素数组。

下面就是返回了一个蕴含以后页面所有 span 元素的数组。此办法也反对第二个参数 startNode。

clear()

清空控制台历史，与 console.clear() 相似。

copy(object)

复制指定对象的字符串模式到剪切板。

debug(function)

该办法承受一个参数，是一个办法。当该办法被调用时，会进入 debug。

能够调用 undebug(fn) 办法，来进行 debug。

dir(object)

dir() 办法与 console.dir() 办法雷同，返回所传入对象的 JSON 模式。

dirxml(object)

dirxml() 与 console.dirxml() 办法雷同，返回所传入对象的 XML 模式。

inspect(object/function)

inspect() 在适当的面板中关上并抉择指定的元素或对象: DOM 元素的 Elements 面板或 JavaScript 堆对象的 Profiles 面板。

getEventListeners(object)

该办法返回注册在指定对象上的事件监听器，返回值是一个对象，蕴含每个注册事件类型的数组(例如，单击或按下键)。数组成员是该事件的侦听器对象。

keys(object)

该办法返回一个数组，蕴含传入对象的属性（键）的名称。能够通过 values() 办法来失去对象属性值的数组。

monitor(function)

当调用指定的函数时，控制台会记录一条音讯，该音讯指出函数名以及在调用函数时传递给函数的参数。

monitorEvents(object[, events])

这个办法接管两个参数，第一个是对象，第二个是事件，当传入的工夫在指定对象上触发时，该事件对象会被打印进去。

第二个参数不止能够传入单个事件，还能够传入一个蕴含多个事件的数组。甚至还能够传入指定的事件类型。

monitorEvents(window, ["resize", "scroll"]); // 传入一个数组
monitorEvents($0, "key"); // 传入一个事件类型

具体事件类型如下：

profile([name]) 和 profileEnd([name])

profile() 启动一个 Javascript Cpu 概括剖析，能够传入一个参数（字符串）。profileEnd() 用来实现一个概要文件，并且在 Profile 面板显示后果。

queryObjects(Constroctor)

该办法返回指定构造函数创立的对象的数组。比方：

• queryObjects(Promise) 返回所有的 Promise 办法。
• queryObjects(HTMLElement) 返回所有的 HTML。
• queryObjects(foo) 返回所有通过 new foo() 创立的对象。

queryObjects()的作用域是控制台中以后抉择的执行上下文。

table(data[, columns]))

table() 与 console.table() 办法相似。

undebug(function)

undebug(fn)进行对指定函数的调试。

unmonitor(function)

unmonitor(function) 用来进行对指定函数的监测。与 monotor() 办法对应。

unmonitorEvents(object[, events])

unmonitorEvents() 用来进行对传入对象的监测。与 monitorEvents() 办法对应。

values(object)

该办法下面曾经说过了，返回蕴含指定对象的值的数组。

控制台的日志打印形式与各种快捷办法就说到这里，有谬误和补充的欢送提出斧正，非常感激！！！

参考：https://developers.google.com…