console常用命令总结笔记不同浏览器的console实现可能有一些差异，但一些主要方法基本相同。以下主要以Chrom

不同浏览器的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对象；

例如：

打印Array类(也是对象)：

console.dir(Array);
console.dirxml(Array);

打印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]])

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

参考资料：