對於console你的印象是什麼呢？ 是console.log();還是瀏覽器上的控制檯？今天就來說說你可能不瞭解的console；
寫在前面
瀏覽器的控制檯可以說是前端程序猿最常用的東西了，一般都是配合console.log()，一起使用，其實console不止可以.log,今天就來說說console的其他用法，要覺得小弟收集總結的還可以的話，辛苦給個贊，要是覺得那裏寫的有什麼問題的話，請在下面給個評論，一起進步！o(*≧▽≦)ツ
總況
打開編譯器打上console.,利用自動補全功能我們可以看到console是有很多方法的；
總結下目前控制檯方法和屬性有：
["$$", "$x", "dir", "dirxml","keys","values","profile","profileEnd","monitorEvents", "unmonitorEvents","inspect","copy","clear","getEventListeners","undebug","monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
下面我們來一一介紹一下各個方法主要的用途。
一般情況下我們用來輸入信息的方法主要是用到如下四個：
console.log
這個可以說是用的最多的了，主要用途是在瀏覽器控制檯輸出我們想要輸出的信息。
console.info
用於輸出錯誤信息，用法和console.log()一致。
剛瞌睡就來了枕頭！
打開咱們掘金網頁的控制檯看下！
類似的還有百度，打開以後是招聘信息。
console.warn
用於輸出警示信息，用法和console.log()一致。
console.error
用於輸出錯誤信息，用法和console.log()一致。
console.debug
用於輸出調試信息，用法和console.log()一致。
爲什麼都是輸出信息卻要分好幾個呢？看出圖說話。
這是一張IE上截取的圖片，在Chrome上不同的信息會分配到不同的位置，不好截圖！（萬惡的IE還是有那麼一點用處的哈，哈哈）。
console對象的上面5種方法，都可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符a（%s）、整數（%d或%i）、浮點數（%f)和對象（%o）四種。
| 格式化符號 | 實現的功能 |
|---|---|
| %s | 格式化成字符串輸出 |
| %d or %i | 格式化成數值輸出 |
| %f | 格式化成浮點數輸出 |
| %o | 轉化成展開的DOM元素輸出 |
| %O | 轉化成JavaScript對象輸出 |
| %c | 把字符串按照你提供的樣式格式化後輸入 |
看個栗子：
%o佔位符，可以用來查看一個對象內部情況（Chrome無效）；
var dog = {};
dog.name = "大毛";
dog.color = "黃色";
console.log("%o", dog);
注意：收集資料的時候看到一些可以用console.log在控制檯輸出帶樣式的文字或者圖片，個人覺得用處不大，這裏就直接忽略了，有興趣的朋友可以自己查一下！
console.dirxml
用來顯示網頁的某個節點（node）所包含的html/xml代碼。
<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>
console.group和console.groupEnd
用於將顯示的信息分組。它只在輸出大量信息時有用，分在一組的信息，可以用鼠標摺疊/展開。
好玩不？ 可惜到現在我都沒覺得他有啥用。
開玩笑的，存在即合理怎麼會沒用呢！ヾ(≧O≦)〃嗷~
在查看別人代碼的時候一打開控制檯全都是輸出的時候這東西就有用了！
console.groupCollapsed
與console.group方法很類似，唯一的區別是該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。
console.assert
對輸入的表達式進行斷言，接受兩個參數，第一個參數是表達式，第二個參數是字符串。只有當第一個參數爲false，纔會輸出第二個參數，否則不會有任何結果。
假如在代碼中，我們需要滿足條件才輸出，是不是會經常這樣寫：
var isShow = false;
if (!isShow) {
console.log('爲false時輸出信息');
}現在一個console就給你解決了；
是不是很方便！（鄙人覺得是）
console.count
輸出 count() 被調用的次數。此函數接受一個可選參數label。如果有label，此函數輸出爲那個指定的 label 和 count() 被調用的次數。如果 label 被忽略，此函數輸出count() 在其所處位置上被調用的次數。（這個方法非常實用哦）！
該特性是非標準的，請儘量不要在生產環境中使用它！
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "alice: 3"
console.countReset
重置計數器。此函數接受可選的參數標籤。一個字符串， 若傳入此參數 countReset() 重置此label的count爲0。若忽略此參數 countReset() 重置count()默認的 default 字段的count爲0；
// 不傳參
var user = "";
function greet() {
console.count();
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
// "default: 1"
// "default: 2"
// "default: 3"
// "default: 1"
// "default: 0"
// 可以看到 調用 console.counterReset() 重置了default 的計數爲0// 傳參
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "bob: 0"
// "alice: 3"
// 調用countReset("bod")只是重置了 "bob" 的計數器值 而 "alice" 的計數器值沒有改變。console.table
對於某些複合類型的數據，console.table方法可以將其轉爲表格顯示。
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);上面代碼的language，轉爲表格顯示如下。
複合型數據轉爲表格顯示的條件是，必須擁有主鍵。對於上面的數組來說，主鍵就是數字鍵。對於對象來說，主鍵就是它的最外層鍵。
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);上面代碼的language，轉爲表格顯示如下。
console.dir
dir方法用來對一個對象進行檢查（inspect），並以易於閱讀和打印的格式顯示。
該方法對於輸出DOM對象非常有用，因爲會顯示DOM對象的所有屬性。
console.dir(document.body);Chrome上我試驗了下感覺和log沒區別IE上也是!(不知道什麼鬼。 ╮（╯＿╰）╭)。當然了我沒去實驗DOM對象。哈哈~！console.time和console.timeEnd
這兩個方法用於計時，可以算出一個操作所花費的準確時間。
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
// Array initialize: 1914.481msconsole.timeLog;
在控制檯輸出計時器的值，該計時器必須已經通過 console.time() 啓動。
如果沒有傳入 label 參數，則以 default: 作爲引導返回數據：
default: 1042ms
如果傳入了一個已經存在的 label ，則會以 label: 作爲引導返回數據：
label: 1242ms
栗子：
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
// 上例中的輸出分別顯示了用戶從打開頁面到關閉第一個 alert 和第二個 alert 框的時間間隔：
注意：使用 timelog() 輸出計時器的值會顯示計時器名稱。使用 timeEnd() 停止也會顯示計時器名稱和輸出計時器的值，並且，最後的 " - timer ended" 可以清楚的顯示計時器不再計時的信息。console.profile和console.profileEnd
console.profile方法用來新建一個性能測試器（profile），它的參數是性能測試器的名字。
該特性是非標準的，請儘量不要在生產環境中使用它！
console.profile('p')
// Profile 'p' started.console.profileEnd方法用來結束正在運行的性能測試器。
console.profileEnd()
// Profile 'p' finished.console.timeStamp
該特性是非標準的，請儘量不要在生產環境中使用它！
向瀏覽器的 Performance或者Waterfall工具添加一個標記。這樣可以讓你將代碼中的一個點和其他在時間軸上已記錄的事件相關聯，例如佈局事件和繪製事件等。
你可以選擇用一個參數來作爲時間戳標籤，然後標記旁邊就會顯示這個標籤。
console.trace
堆棧跟蹤相關的調試，console.trace方法顯示當前執行的代碼在堆棧中的調用路徑。
上述方法只是我個人理解罷了。如果想查看具體API
console.clear
用於清除當前控制檯的所有輸出，將光標回置到第一行。
console.timeLine和console.timeLineEnd
配合一起記錄一段時間軸(MDN上沒有看到這一方法了)