浏览器控制台调试工具console

console是前端开发人员必备的调试工具，
在 mozilla 网站可以查到 https://developer.mozilla.org/en-US/docs/Web/API/Console_API 使用手册，并且可以看到主流浏览器对具体功能的支持情况。本文对部分重点内容进行整理。

一、基本功能

• console.info 提示信息
• console.debug 调试信息
• console.trace 打印函数堆栈
• console.warn 打印告警信息
• console.error 打印错误报警
• console.exception 打印报警信息

二、断言与统计

1. 断言

console.assert(expression, object[, object...])

示例：

console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object

2. 行数计算

console.count([label])

本行执行次数，可选参数 label 表示在输出的次数前加个前缀：

复制代码
(function() {
  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5

3. 重置计数

console.countReset();

3. 打印对象，以列表形式输出对象属性

console.dir(object)

示例：

var person = {
  name: 'classicemi',
  age: 22,
  sex: 'male'
};
console.dir(obj);

三、js性能统计

1. 性能分析，打印执行性能情况

console.profile([profileLabel])

2. 输出代码的执行时间

console.time(name)

计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。

console.time('计时器');
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');

3. 显示内存信息

console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）

4. 标记运行时的timeline

console.timeStamp() 

用于标记运行时的timeline信息。

三、格式输出

1. 清空控制台

console.clear() ;

根当于快捷键ctrl+L。

2. 输出嵌套

console.group();

console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');

3. 嵌套,默认折叠

console.groupCollapsed();

和console.group()相似的方法是console.groupCollapsed()作用相同，不同点是嵌套的输出内容是折叠状态，在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧

4. 以表格样式输出

console.table()

5. ES6 模板输出

ES6模板的使用反单引号``,支持变量(使用${ params } 格式), 支持换行, 支持占位符,

let person = {name: "孔甲乙", sex:"男", age: 22}
console.log(`
Person info:  
  name: ${person.name}
  sex:  ${person.sex}
  age: %d
`, age)

四、占位符

1. 字符、数值格式化

在 console.log(),console.warn(),console.error(),console.exception()和console.info()，都可以使用占位符。

支持的占位符有四种，分别是：

• 字符(%s)
• 整数(%d 或 %i)
• 浮点数(%f)
• 对象(%o)

console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);
console.log('圆周率是%f', 3.14159);

var obj = {
  name: 'classicemi'
}
console.log('%o', obj);

2. CSS样式

console.log('%c测试使用css.', 'color: #fff; background: #f40; font-size: 24px;', '其它内容');

如果使用background-url还可以显示图片。

五、控制台功能

1. 在控制台输出在Elements面板选中的页面元素

$0

可以在控制台输出在Elements面板选中的页面元素。

2. 上一次在控制台键入的命令

$_

和键盘“上”功能一样。

3. 用xPath的语法来获取页面上的元素

$x