共计 4486 个字符，预计需要花费 12 分钟才能阅读完成。
原文：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, ...])
打印一个正告信息。
到这里也说了好多种打印的办法了，然而打印的信息是分级别的，有谬误、正告等。上面就总结一下。
| 办法 | 日志级别 |
|---|---|
console.count |
Info |
console.dir |
Info |
console.dirxml |
Info |
console.info |
Info |
console.log |
Info |
console.table |
Info |
console.timeEnd |
Info |
console.trace |
Info |
console.warn |
Warning |
console.assert |
Error |
console.error |
Error |
console.debug |
Verbose |
在控制台如果想要依据日志级别来过滤信息的话，能够通过下面图片中标出的中央，来做过滤。
办法
$_
$_ 返回的是最近的表达式的值。
$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…
