console对象详解

console对象详解

简介：console对象是JavaScript的原生对象，用于输出各种信息到控制台，提供有很多辅助方法

浏览器实现：其包含在浏览器自带的开发工具中

console对象的静态方法

相同点：用于在控制台输出信息，可接受一个或多个参数，将它们连起来输出会自动在每次输出的结尾，添加换行符若第一个参数是格式字符串，将依次用后面的参数替换占位符，然后再进行输出差异：console.info方法会在输出信息的前面，加上一个蓝色图标console.debug控制台输出调试信息，打开显示级别在verbose的情况下，才会显示warn方法输出信息时，在最前面加一个黄色三角，表示警告error方法输出信息时，在最前面加一个红色的叉，表示出错，高亮显示输出文字和错误发生的堆栈

console.log()

console.info()

console.debug()

console.warn()

console.error()

console.table()

console.table方法可以将其转为表格显示

console.count()

用于计数，输出它被调用次数

可以接受一个字符串作为参数，作为标签，对执行次数进行分类

console.dir()、console.dirxml()

dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示

输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性

Node 环境之中，还可以指定以代码高亮的形式输出

dirxml方法主要用于以目录树的形式，显示 DOM 节点

console.assert()

用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行

console.time()、console.timeEnd()

这两个方法用于计时，可以算出一个操作所花费的准确时间

time方法表示计时开始，timeEnd方法表示计时结束

参数是计时器的名称

console.group()、console.groupEnd()、console.groupCollapsed()

用于将显示的信息分组

console.trace()

显示当前执行的代码在堆栈中的调用路径

console.clear()

用于清除当前控制台的所有输出

命令行API

$_

属性返回上一个表达式的值

$0 - $4

控制台保存了最近5个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个，$1代表倒数第二个，以此类推直到$4

$(selector)

$(selector)返回第一个匹配的元素，等同于document.querySelector()

$$(selector)

$$(selector)返回选中的 DOM 对象，等同于document.querySelectorAll

$x(path)

返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素

inspect(object)

inspect(object)方法打开相关面板，并选中相应的元素，显示它的细节

getEventListeners(object)

返回一个对象，该对象的成员为object登记了回调函数的各种事件（比如click或keydown）

keys(object)，values(object)

keys(object)方法返回一个数组，包含object的所有键名

values(object)方法返回一个数组，包含object的所有键值

monitorEvents允许监听同一大类的事件

unmonitorEvents方法用于停止监听

其他方法

clear()：清除控制台的历史

copy(object)：复制特定 DOM 元素到剪贴板

dir(object)：显示特定对象的所有属性，是console.dir方法的别名

dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名

debugger 语句

debugger语句主要用于除错，作用是设置断点

有正在运行的除错工具，程序运行到debugger语句时会自动停下

没有除错工具，debugger语句不会产生任何结果，JavaScript 引擎自动跳过这一句