console常用命令总结笔记-白红宇

不同浏览器的console实现可能有一些差异，但一些主要方法基本相同。以下主要以Chrome为例进行总结：

tips:

可以直接打开console运行示例查看效果。

1. 快捷键：

ctrl+shift+I 或 F12;

2. 打印基本信息：

console.log()和console.info(),其中的参数可以为多个，将会以空格间隔进行打印；

3. 格式化打印：

格式说明符以%开头，后面添加：

s 字符串

d or i 整数

f 浮点值

o DOM元素以HTML/XML形式输出，JS对象以可展开的对象字面量形式输出(类似console.dirxml的处理)

O DOM元素或JS对象以可展开的Object形式输出(类似console.dir的处理)

c 使用提供的CSS样式格式化输出

console.log('this object is %o which should have a name property.',{
   name: "Anne", color: "white"})console.log('this object is %O which should have a name property.',{
   name: "Anne", color: "white"})console.log('%cThis is the %cbest time','color:#a25354; font-size:20px;','color:#4345a2; font-weight: bold; font-size:20px;')复制代码

在FireFox中，数值的格式化支持

%.2d代表把对应数值输出为两位整数，如

1.1 -->

01；而

%.2f代表把对应数值输出为两位精度的小数，如

1.1 -->

1.10. 这在chrome中不支持。

另外%c格式化输出对CSS的格式支持有限，并不支持所有有效的CSS样式；

4. 断言-自定义错误消息：

console.assert()，接收2个及以上参数；第一个参数是断言表达式，如果其解析为true则不打印消息，如果解释为false说明断言失败，输出第二个及之后参数中传入的信息；

let a = 3;console.assert(a > 2, "a is less than or equal 2") // 断言通过，不会打印信息console.assert(a % 2 === 0, "oops, a is odd"); // 断言失败，打印信息复制代码

5. 清除控制台的输出：

console.clear(), chrome中可以使用快捷键ctrl + L;

6. 返回代码中调用函数的次数：

console.count()

function clickHandler(){    console.count(`click handler called`)}     for (var i = 0; i < 3; i++) {    clickHandler()}// 每次调用输出调用次数Click handler called: 1Click handler called: 2Click handler called: 3复制代码

7. 打印对象

console.dir(): 以交互式对象属性列表的形式输出,可以折叠和展开对象查看其中的属性；

console.dirxml(): 如果可能，会输出元素的HTML/XML形式，否则就输出JavaScript对象；

例如：

打印Array类(也是对象)：

console.dir(Array);console.dirxml(Array);复制代码

打印DOM元素：

// 新建一个DOM元素var testDiv = document.createElement("div");testDiv.id = "test";testDiv.innerHTML = "这是一个例子
";// 打印console.dir(testDiv) // 输出js对象console.dirxml(testDiv) // 输出HTML表示复制代码

8. 控制台报错/警告：

这个我们应该经常会看到。

console.error("error info");

console.warn("warning info");

9. 计时器

console.time(label)为开始计时，console.timeEnd(label)为结束计时; 可以计算代码执行所用时间，这两个方法应传递相同的label参数(字符串)，代表同一个计时器；

FireFox中 console.timeLog(label) 可以用于打印某个计时器的具体时间， chrome没有支持。

10. 打印调用堆栈

console.trace()：可以获取该调用所在的文件及代码具体位置;

11. 分组输出

console.group()和console.groupEnd()分别作为分组开始和结束的标志，可以嵌套分组;

console.group()还可以传入1或多个参数，会被以空格分隔输出字符串作为分组的名称。

console.group("group", 1);console.log("this is in group 1");console.group("group", 2);console.log("this is in group 2");console.groupEnd();console.log("this is also in group 1");console.groupEnd();复制代码

chrome也支持

console.groupCollapse(), 会输出折叠的分组,可以展开查看内部内容; 如果有的浏览器不支持该命令就和

console.group()效果相同.

12. 输入二维数组，可以输出表格视图：

console.table([["a", "b", "c", "d"], [1, 2, 3, 4]])复制代码

谢谢你看到这里，这是个人总结笔记，如有不对的地方希望及时指出。 :)

参考资料：