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: 1
Click handler called: 2
Click handler called: 3
复制代码

7. 打印对象

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

• console.dirxml(): 若是可能，会输出元素的HTML/XML形式，不然就输出JavaScript对象；

例如：

1. 打印Array类(也是对象)：

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

2. 打印DOM元素：

// 新建一个DOM元素
var testDiv = document.createElement("div");
testDiv.id = "test";
testDiv.innerHTML = "<p>这是一个例子</p>";

// 打印
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]])
复制代码

谢谢你看到这里，这是我的总结笔记，若有不对的地方但愿及时指出。 :)

参考资料：

1. Getting creative with the Console API!
2. Console-MDN