前段時間看git的相關，記的筆記也大緻寫到了部落格上，還有些因為運用不熟，或者還有一些疑惑點，暫時也不做過多糾纏，之後在實踐中多運用得出結論再整理分享吧。
工欲善其事，必先利其器。要想做好前端的工作，也應該多了解浏覽器開發工具的使用，近來幾天在看html和css的一些技巧性知識，順便也把chrome一些懂的地方再熟悉和不懂的地方去學習，把開發工具了解了解，也分享給小夥伴們，今天暫時是console相關的吧(偷個小懶，從用的最熟的面闆入手，之後計劃整理出chrome開發工具各個面闆的使用說明~也需要時間測測，還有兩個面闆用的不熟呢)。
console.assert(expression,object)
當expression表達式的結果為true的時候，控制台無顯示；當滿足expression表達式滿足false條件的時候，該消息以及堆棧跟蹤被寫入控制台。
console.clear()
清除控制台資訊，如果setting(設定)中"Preserve Logs"(保持日志)是打開狀态時，console.clear()失效。
console.count(label)
列印出這個方法被執行的次數。在調試js執行的時候挺有幫助,可以結合console.time(label)／console.timeEnd(label)結合，看某函數執行的次數及每次執行所耗的時間。
console.dir(object)
将指定對象用javascript封裝并列印，如果指定的對象是一個HTML元素，則列出DOM屬性。
對于這個方法，比如我們需要看某個DOM的屬性的時候，document.getElementById('someid')列印出來的應該是個<div id="someid">...</div>,這就比較尴尬了，列印的是個html元素，然後使用console.dir(document.getElementById('someid'))列印後，便能夠看到整個DOM對象及屬性了。
console.group(object[,object,...])
根據可選的标題産生一個新的日志清單，之後直至console.groupEnd()之前的控制台輸出資訊都會列在這個日志組中，如果沒使用console.groupEnd()進行閉合，則之後的輸出将都包括在這個日志組中。
日志組可嵌套輸出：
console.groupCollapsed(object[, object, ...])
和console.group(object[,object,...])使用方式相同，不同的是console.group(object[,object,...])列印的日志組的狀态是打開的，而console.groupCollapsed(object[, object, ...])列印的是閉合的日志組。
console.log(object [, object, ...])
在控制台列印資訊。你可以在這個方法中傳入一個或多個對象，每個對象會通過計算後加入一串使用空格分隔的字元串。傳入的第一個參數可能會包含格式說明符号，該說明符号由一個百分号(%)後加一個代表需要被替換内容的字母。
開發工具支援以下說明符号:
%s
字元串
%d or %i
整數
%f
浮點數
%o
可擴充DOM元素(在element面闆一樣)
%O
可擴充javascript元素
%c
根據提供的css樣式輸出字元串
console.error(object [, object, ...])
以報錯的格式列印資訊，并且在調用列出産生堆棧跟蹤。
console.info(object [, object, ...])
以資訊的格式列印資訊。
console.warn(object [, object, ...])
以警告的格式列印資訊。
console.profile([label])
标出cpu使用的開始(start)和結束(finish)的點，對應結束辨別是console.porfileEnd()，可以通過這兩個方法看函數造成cpu消耗資訊，chrome開發工具的Profile面闆也是處理CPU資訊的功能，并且執行這個方法之後，在Profile面闆也會出現一塊内容，對應的正是代碼所執行的那塊資訊内容。
console.time(label)
開始一個新的帶有标簽的計時器。在之後的代碼中調用console.timeEnd(label)時，停止計時并且将所耗時間間列印在控制台。注意：timeEnd的label需要和time的label對應上才算閉合這個計時。
在測試這個的時候深深嫌棄下我的電腦，老電腦了...上次測這串代碼甚至是0.711ms，而在公司的電腦才0.046ms...
console.trace()
顯示目前所執行到的代碼處的堆棧跟蹤資訊。
console.table(array[object])
将數組資料(數組元素為對象)以table布局展示。
chrome自帶有html元素選擇器，和衆人所熟悉的jquery的選擇器使用規則相似
$()
傳回符合css選擇器條件的第一個元素，是document.queryselector()的簡寫。
$$()
傳回符合css選擇器條件的所有元素組成的數組，是document.querySelectorAll()的封裝。
$_
傳回最近一次計算得出的值，預設undefined。
$0-$4
傳回最近5次選中的元素。
$0 最近的第一次
$1 最近的第二次
$2 最近的第三次
$3 最近的第四次
$4 最近的第五次
inspect()
inspect()函數需要傳入一個DOM元素或者javascript引用，如果傳入的是DOM元素，開發者工具會跳到Elements面闆，并且展示對應的元素；如果傳入的是javascript引用，開發者工具跳到Profile面闆或者控制台顯示堆棧資訊。
就這些吧，這裡省略了console.dirxml(object)和console.timeStamp([label])。
歡迎小夥伴交流讨論，有更多玩法也多分享哦~