console使用 Chrome控制台

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

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

console.log

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

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

var myArray = [{a:1, b:2, c:3}, {a:11, b:22, c:33}, {a:111, b:222, c:333}];

console.table(myArray);

console.log("%chello world!", "color:red");

console.log("%chello world!", "color:red; font-size:32px;");

console.log("%c", "padding:50px 300px; line-height:120px; background:url('http://wayouliu.duapp.com/img/tagsImg/youth.gif') no-repeat;");

console.log("%csue.\r\nI love you!\r\ntest","color:green;font-family:'方正静蕾简体';font-size:30px;");

console.warn("Whoa! warning goes here...");

 

console.error("Whoa! errors goes here...");

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");