Chrome 控制台不完全指南 [转] （部分功能已经无效，比如copy）

Chrome的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的console，使用得当可以有如下功效：

更高「逼格」更快「开发调试」更强「进阶级的Frontender」
Bug无处遁形「Console大法好」

console.log

大家都会用log，但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理。
他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。
各个所代表的语义如下：

console.log：普通信息
console.info：提示类信息
console.error：错误信息
console.warn：警示信息

当合理使用上述log方法后，可以很方便地在控制台选择查看特定类型的信息。

1 console.log(‘一颗红心向太阳’,’吼吼~’); 2 console.info(‘楼上药不能停！’); 3 console.warn(‘楼上嘴太贱！’); 4 console.error(‘楼上关你毛事？’);

如果再配合console.group 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

1 console.group(“app.foo”); 2 console.log(“来自foo模块的信息 blah blah blah…”); 3 console.groupEnd(); 4 console.group(“app.bar”); 5 console.log(“来自bar模块的信息 blah blah blah…”); 6 console.groupEnd();

而关于console.log，早已被玩儿坏了。一切都源于Chrome提供了这么一个API：第一个参数可以包含一些格式化的指令比如%c。

比如给hello world 做件漂亮的嫁衣再拉出来见人：

1 console.log(‘%chello world’,’font-size:25px;color:red;’);

如果你觉得不够过瘾，那就把你能写出来的最华丽的CSS样式都应用上吧，比如渐变。于是你可以得到如下华丽丽的效果：

1 console.log(‘%chello world’, ‘background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;’);

各种招大招的节奏啊~

看着上面密集的代码不用惊慌，上面console.log()第二个参数全是纯CSS用来控制样式的，你不会陌生。而第一个参数里可以带用百分号开头的转义指令，如上面输出带样式的文字时使用的%c指令。更详细的指令参见官方API文档的这个表格。

如果还不够过瘾，那咱们来log一些图片吧，甚至。。。动图？
对，你得先有图，我们拿这张图为例。

1 console.log(“%c”, “padding:50px 300px;line-height:120px;background:url(‘http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif’) no-repeat;”);

看着上面摇摆的豆比兔是不是有种抽它一脸的冲动。

除此，console.table 更是直接以表格的形式将数据输出，不能赞得太多！
借用之前写过的一篇博文里的例子：

1 var data = [{‘品名’: ‘杜雷斯’, ‘数量’: 4}, {‘品名’: ‘冈本’, ‘数量’: 3}]; 1 console.table(data);

另外，console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。

1 console.log(‘%c你好’,’color:red;’,’小明’,’你知道小红被妈妈打了么’);

console.count

除了条件输出的场景，还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。

function foo(){    //其他函数逻辑blah blah。。。    console.count('foo 被执行的次数：');}foo();foo();foo();

console.dir

将DOM结点以JavaScript对象的形式输出到控制台
而console.log是直接将该DOM结点以DOM树的结构进行输出，与在元素审查时看到的结构是一致的。不同的展现形式，同样的优雅，各种体位任君选择反正就是方便与体贴。

console.dir(document.body);console.log(document.body);

(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣，其实(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。

$$('div')