前言
個人博客：Damonare的個人博客
Chrome瀏覽器我想是每一個前端er必用工具之一吧，一部分原因是它速度快，體積不大癌别，支持的新特性也比其它瀏覽器多，還有一部分我想就是因為它的控制臺功能強大了吧蹋笼，說它是神器一點也不過分展姐，很方便。但其實很多開發(fā)者并沒有用出控制臺的精髓剖毯，只是使用簡單的console.log();其實控制臺功能遠遠不止這么簡單哦圾笨。
console.clear
console.clear();清空控制臺，這個應該和console.log知名度一樣高吧逊谋。
console.log家族
先簡單介紹一下chrome的控制臺擂达，打開chrome瀏覽器，按f12就可以輕松的打開控制臺
如果你是一位開發(fā)者胶滋，我想console.log肯定是經常使用的了板鬓，我們主要看看console.log的幾個兄弟：
1.console.log ('普通信息')
2.console.info ('提示性信息')
3.console.error ('錯誤信息')
4.console.warn ('警示信息')
大家都會用log，但很少有人能夠很好地利用console.error究恤，console.warn 等將輸出到控制臺的信息進行分類整理俭令。他們功能區(qū)別不大，意義在于將輸出到控制臺的信息進行歸類部宿，或者說讓它們更語義化唤蔗。
如果再配合console.group 與console.groupEnd，可以將這種分類管理的思想發(fā)揮到極致窟赏。這適合于在開發(fā)一個規(guī)模很大模塊很多很復雜的Web APP時妓柜，將各自的log信息分組到以各自命名空間為名稱的組里面。
console.group("app.bundle");
console.warn("來自bundle模塊的警告信息1");console.warn("來自bundle模塊的警告信息2");
console.groupEnd();
console.group("app.bundle");
console.log("來自bundle模塊的信息1");console.log("來自bundle模塊的信息2");
console.groupEnd();
這樣的控制臺信息看上去就一目了然了涯穷，就不用再為了找這是屬于那一行代碼輸出的再翻一遍源碼了棍掐。
另外，console.log家族還給我們提供了一個的API：第一個參數可以帶一些格式化指令拷况，比如%c,\n;看下面這個炫酷的效果：
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() 接收不定參數，參數間用逗號分隔鹰服，最終會輸出會將它們以空白字符連接病瞳。
console.table
看著這種“黑魔法”是不是有種坑分的感覺呢，其實還不止哦悲酷！console.table可以讓我們輸出表格,示例：
var data = {code:200,content:[{'品名': '杜雷斯', '數量': 4}, {'品名': '岡本', '數量': 3}]};
console.table(data.content);
有的時候后端傳回來一大串數據套菜，是不是覺得直接console.log或是通過抓包工具查看都會讓人暈頭轉向呢，這個時候正事console.table發(fā)揮作用的時候了设易，以表格的形式呈現(xiàn)數據逗柴，自然一目了然。
console.assert
var isDebug=false;
console.assert(isDebug,'開發(fā)中的log信息顿肺。戏溺。。');
當你想代碼滿足某些條件時才輸出信息到控制臺屠尊，那么你大可不必寫if或者三元表達式來達到目的于购，cosole.assert便是這樣場景下一種很好的工具，它會先對傳入的表達式進行斷言知染，只有表達式為假時才輸出相應信息到控制臺副瀑。
console.count
除了條件輸出的場景胳搞，還有常見的場景是計數。
當你想統(tǒng)計某段代碼執(zhí)行了多少次時也大可不必自己去寫相關邏輯忌警，內置的console.count可以很地勝任這樣的任務.
console.dir
將DOM結點以JavaScript對象的形式輸出到控制臺止潘，而console.log是直接將該DOM結點以DOM樹的結構進行輸出掺炭，與在元素審查時看到的結構是一致的。不同的展現(xiàn)形式凭戴，同樣的優(yōu)雅涧狮，各種體位任君選擇反正就是方便與體貼。
console.dir(document.body);
console.log(document.body);
console.time & console.timeEnd
輸出一些調試信息是控制臺最常用的功能么夫，當然者冤，它的功能遠不止于此。當做一些性能測試時档痪，同樣可以在這里很方便地進行涉枫。比如需要考量一段代碼執(zhí)行的耗時情況時，可以用console.time與 console.timeEnd來做此事腐螟。
console.time("Array耗時");
var array= new Array(10000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array耗時");
當想要查看CPU使用相關的信息時愿汰，可以使用console.profile配合 console.profileEnd來完成這個需求困后。
這一功能可以通過UI界面來完成，Chrome 開發(fā)者工具里面有個tab便是Profile衬廷。使用方法和console.time基本一樣摇予，其實time開發(fā)者工具里也有個tab就是timeline。關于console.prefile博主就不做多余的介紹了吗跋。想要做更多了解的讀者可以看這里侧戴。
$
講真，米國程序員們真的很喜歡money靶±啊（誰又不是呢）救鲤，看看PHP就知道了，滿屏的$秩冈。而在Chrome的控制臺里本缠，$用處同樣是蠻多且方便的。
2+2//回車入问，再
$_+1//回車得5
上面的$_需要領悟其奧義才能使用得當丹锹，而$0~$4則代表了最近5個你選擇過的DOM節(jié)點。
什么意思呢芬失？在頁面右擊選擇審查元素楣黍，然后在彈出來的DOM結點樹上面隨便點選，這些被點過的節(jié)點會被記錄下來棱烂，而$0會返回最近一次點選的DOM結點租漂，以此類推，$1返回的是上上次點選的DOM節(jié)點颊糜，最多保存了5個哩治，如果不夠5個，則返回undefined衬鱼。
另外值得一贊的是业筏，Chrome 控制臺中原生支持類jQuery的選擇器，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節(jié)點鸟赫，多么滴熟悉蒜胖。
$('body');
$$('div');
$(selector)返回的是滿足選擇條件的首個DOM元素。
剝去她偽善的外衣抛蚤，其實$(selector)是原生JavaScript document.querySelector() 的封裝台谢。
同時另一個命令$$(selector)返回的是所有滿足選擇條件的元素的一個集合，是對document.querySelectorAll() 的封裝岁经。
$x(path)
將所匹配的節(jié)點放在一個數組里返回
$x("http://p");
$x("http://p[a]");
$x("http://p")匹配所有的p節(jié)點对碌，$x("http://p[a]");匹配所有子節(jié)點包含a的p節(jié)點
copy
copy(document.body)
然后你就可以Ctrl+v了。
注意：他不依附于任何全局變量比如window蒿偎，所以其實在JS代碼里是訪問不了這個copy方法的朽们，所以從代碼層面來調用復制功能也就無從談起怀读。但愿有天瀏覽器會提供相應的JS實現(xiàn)吧~這樣我們就可以通過js代碼進行復制操作而不用再依賴Flash插件了。
keys & values
這是一對基友骑脱。前者返回傳入對象所有屬性名組成的數據菜枷，后者返回所有屬性值組成的數組。具體請看下面的例子：
var tfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tfboy);
values(tfboy);
monitor & unmonitor
monitor(function)叁丧，它接收一個函數名作為參數啤誊，比如function a，每次a被執(zhí)行了拥娄，都會在控制臺輸出一條信息蚊锹，里面包含了函數的名稱a及執(zhí)行時所傳入的參數。而unmonitor(function)便是用來停止這一監(jiān)聽稚瘾。
function sayHello(name){
alert('hello,'+name);
}
monitor(sayHello);
sayHello('damonare');
sayHello('tjz');
unmonitor(sayHello);
debug & undebug
debug同樣也是接收一個函數名作為參數牡昆。當該函數執(zhí)行時自動斷下來以供調試，類似于在該函數的入口處打了個斷點摊欠，可以通過debugger來做到丢烘，同時也可以通過在Chrome開發(fā)者工具里找到相應源碼然后手動打斷點。而undebug 則是解除該斷點些椒。而其他還有好些命令則讓人沒有說的欲望播瞳，因為好些都可以通過Chrome開發(fā)者工具的UI界面來操作并且比用在控制臺輸入要方便。
本博文依據Console API文檔和Commond API書寫免糕。
