Chrome中console对象的用法，以及debug技巧

1 显示信息的命令

console.log("normal");           // 用于输出普通信息
console.info("information");     // 用于输出提示性信息
console.error("error");          // 用于输出错误信息
console.warn("warn");            // 用于输出警示信息
//四个函数中log和info输出效果完全一样
//而error 和warn方法也就是输出的内容，一个是红色的错误效果，一个是黄色警告效果
//这也符合国际惯例

2 console.count()

console.count("科比打铁的次数是");
console.count("科比打铁的次数是");
console.count("科比打铁的次数是");
//科比打铁的次数是: 1
//科比打铁的次数是: 2
//科比打铁的次数是: 3

/*
总结：在一段代码中，console.count()函数每调用一次，就会自动从1开始计数
     并从控制台输出调用次数，console.count(description),它可接收一个变量
     通常我们传一个形像的 描述性质的字符串参数 
     其参数是可选的 console.count();
*/

3 同胞兄弟 console.time()...console.timeEnd();

console.time('共耗时');
(function() {document.getElementsByTagName('p')[0].innerHTML='我是被替换后的段落';})()
console.timeEnd('共耗时');

//console对象的time()方法必须和timeEnd()成对出现，参数是可选的
//如果传参，则time()和timeEnd()两个函数的参数 必须相同

4 表格形式输出数组和对象 console.table()

var obj = {
          fun: {
              name: 'foo',
              age: '18'
          },
          bar: {
              name: 'bar',
              age: '19'
          }
        };

        var arr = [
            ['fun', '18'],
            ['bar', '19']
        ];

        console.log(obj);
        console.table(obj);

        console.log(arr);
        console.table(arr);

console.table()在控制台结果将以如下表格形式呈现

5 将对象以树状结构展现 console.dir()

console.dir()可以显示一个对象所有的属性和方法

var info = {
    name : "Alan",
    age : "27",
    grilFriend : "nothing",
    getName : function(){
        return this.name;
    }
}
console.dir(info);

6 copy通过此命令可以将在控制台获取到的内容复制到剪贴板

比如我们正在操作某个DOM节点，它的层次较深，直接云DOM树复制的话，找到它都要费些时间，这时候这个copy()就可以派上用场了

7 console.log()第一个参数带有％c字符串，可让控制台 输出 带有样式的文字

console.log("滚粗去%c好吧","font-size:16px;color:red;font-weight:bold;")

其中%c 后面的文字 好吧，就会带有样式信息（红色粗体），而滚粗去则是默认的样式。 控制台突然有一坨很显眼的字体，很爽吧。特别是需要特殊显示某些变量的时候。

8 Chrome 控制台中原生支持类 jQuery 的选择器

也就是说你可以用$加上熟悉的css选择器来选择DOM节。这也解开了我多年的疑惑，之前我没有引用jQuery的时候，在控制台，使用$的时候，没有出现预料中的undefined让我耿耿于怀。

$('body')

9 console.clear()清空控制台

这个不作过多解释，因为可用快捷键Ctrl + L 或者 点击来清空。

10 keys和values方法：这两个不是console对象的方法，是window的方法

keys(obj)可以将对象obj的所有属性作为数组取出，
values(obj)可以将对象obj的所有属性的值作为数组取出
这两个数组的顺序和对象属性的定义顺序相同。

11 判断变量是否是真 console.assert()

console.assert()用来判断一个表达式或变量是否为真，只有表达式为false时，才输出一条相应信息，并且抛出一个异常。

var testVal = false;
console.assert(testVal, '当testVal为false时才输出！');

console.assert()和console.error()相比，前者有逻辑判断功能，从它们输出的结果来看，都为红色信息。不过console.assert()的结果前面有Assertion failed:字样

12 dirxml() 和dir(): window对象和window.console对象都有这两个方法

dir(obj)方法就是将对象以树形结构的方式，在控制台展开。没什么用，直接log也是这个效果，直接输变量名回车也是这个效果。
dirxml(obj)方法就是适用于显示DOM节点，用于普通对象没什么效果。
这两个方法不怎么重要，感觉有点鸡肋。

13 占位符

console对象上的直接输出方法，console.log(), console.warn(), console.error(), console.exception()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。
前面提到的％c也是占们符的一种，不过它的作用特殊而已

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

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

14 console.trace() 追踪函数的调用过程

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

function tracer(a) {
  console.trace();
  return a;
}

function foo(a) {
  return bar(a);
}

function bar(a) {
  return tracer(a);
}

var a = foo('tracer');

15 控制台输出图片

console.log("%c ", "padding:50px 300px;line-height:120px;background:url('url') no-repeat;");

由于控制台支持css样式，为了在控制台显示图片，需要用到css背景图片的属性。
而且%c占位符后面需要有空格（文本也可以，因为可以设置文本色为透明，就只看到背景了），才能确定文本空间，具体多少可以自由测试。不得不说Chrome控制台的强大。

显示图片的两个必须条件：

1. 占位符 %c 后面 必须 存在文本（最好是空格，这样就不用再设置文本透明了），文本空间决定了背景的显示大小、
2. 设置一个较大的font-size以给图片足够的显示空间，或者像上面例子一样设置padding，其原理只有一个，就是给图片空间。

16 console.profile() 和console.profileEnd()性能分析工具

console.profile() 和console.profileEnd() 类似 console.time()...console.timeEnd()，它们都是成对一起干活。

console.profile("分析智能小程序的缺陷");
var arr = new Array(100000);
for(var i=arr.length - 1;i >=0; i--) {
  arr[i] = new Object();
}
console.profileEnd("分析智能小程序的缺陷");
//执行上面的代码即可在 调试工具 >> MoreTools >> Javascript Profiler 面板看到相关的信息。
//此信息也是以我们的参数，这里就是  "分析智能小程序的缺陷" 命名的。