從學web前端開發至今，我一直使用document.write()和console.log()進行除錯，今天發現了console物件的新用法，所以寫下這篇記錄文件。
console物件
console物件是JavaScript的原生物件，可以輸出各種資訊到控制檯。
console的用途
-
除錯程式，顯示網頁程式碼執行時的錯誤資訊
-
提供一個命令列介面，用於與網頁程式碼互動
console物件的靜態方法
console物件提供的各種靜態方法，用來與控制檯視窗互動
1、console.log()
用於在控制檯輸出資訊，可以接收一個或多個引數連線起來輸出
// 例：
console.log('一個引數'); //輸出：一個引數
console.log('這是','傳入','多個引數','的用法'); //輸出：這是 傳入 多個引數 的用法
//支援佔位符
console.log(' %s + %s = %s',1,2,3); 輸出：1 + 2 = 3;
複製程式碼支援以下佔位符
%s 字串
%d 整數
%i 整數
%f 浮點數
%o 物件的連結
%c css格式字串
複製程式碼console.log()每次輸出的結尾，自動新增換行符
%c的神奇用法
2、console.info()
是console.log()的別名，用法完全一致。【ps:網上說這兩者的唯一區別是console.info()方法會在輸出資訊的前面加上一個藍色圖示。然而，我使用Chrome除錯時，並沒有藍色圖示】
//例：
console.info('使用console.info()形式輸出');
複製程式碼3、console.debug()
使用方法與console.log()方法的使用類似，但是一般情況下，console.debug()輸出的資訊不會顯示，以下是對Chrome瀏覽器進行設定，使控制檯可以檢視到console.debug()輸出的資訊
//例：
console.debug('使用console.debug()方法進行除錯');
複製程式碼
4、console.warn()
使用方法與console.log()類似，不同的是控制檯上的輸出樣式不一樣，console.warn()輸出前面帶有“黃色的三角形”，表示警告，具體輸出樣式如下：
//例：
console.warn('這是console.warn()方法輸出的資訊');
複製程式碼
5、console.error()
使用的方法與console.log()類似；區別：console.error()方法在控制檯輸出的資訊樣式不同，console.error()資訊輸出前面會有一個“紅色的X”以及字型顏色也是紅色的，表示出錯了。具體顯示的樣式如下：
//例：
console.error('這是使用console.error()方法輸出的資訊');
複製程式碼
小結：console.log()方法寫入標準輸出；console.error()和console.warn()寫入標準錯誤
6、console.table()
對於某些複合型別的資料，console.table()方法可以將其轉為表格顯示
//例：
var languages = [
{
name:'JavaScript',
fileExtension:'.js'
},
{
name:'php',
fileExtension:'.php'
},
{
name:'css',
fileExtension:'.css'
}
]
console.table(languages);
複製程式碼輸出的效果圖如下：
7、console.count()
console.count()方法用於計數，輸出被呼叫了多少次
//例：
function greet(user){
console.count();
return 'hi' + user;
}
greet('chen'); //輸出：1
greet('cyq'); //輸出：2
greet('hehe'); //輸出：3
解析：3：表示greet()函式被呼叫了3次
複製程式碼console.count()可以傳入一個引數，並且根據傳入的引數進行分組統計被呼叫的次數
//例：
function greet1(user){
console.count(user);
return 'hi ' + user;
}
greet1('chen'); //輸出：1
greet1('cyq'); //輸出：1
greet1('chen'); //輸出：2
複製程式碼8、console.dir()
使用console.dir()方法對一個物件進行檢查，並易於閱讀和列印的格式顯示
例：
console.log({f1:'foo',f2:'bar'});
console.dir({f1:'foo',f2:'bar'});
複製程式碼輸出的樣式如下：
以上console.dir()輸出的結果比console.log()輸出的結果更容易閱讀，資訊更豐富，該方法用於輸出DOm物件灰常有用。
9、console.dirxml()
console.dirxml()方法主要用於以目錄樹的形式，顯示DOM節點，若引數不是DOM節點，而是普通JS物件，則等同於console.dir()方法
具體的使用如下圖：
10、console.assert()
console.assert()方法主要用於程式執行中，進行條件判斷，若不滿足，則顯示錯誤資訊，不會中斷程式執行。相當於提示使用者，內部狀態不正確。
此函式接收兩個引數
-
引數1：表示式
-
引數2：字串
當第一個引數為false時，才會提示有錯誤，在控制檯輸出第二個引數，否則不輸出任何結果
11、console.time()和console.timeEnd()
這兩個方法用於計時，可以算出一個操作所花費的準確時間。console.time()方法用於計時開始，console.timeEnd()用於計時結束。他們的引數是：計時器的名稱
//例：
console.time('Array initialize');
var array = new Array(100000);
for(let i = array.length-1;i>=0;i--){
array[i] = new Object();
};
console.timeEnd('Array initialize'); //輸出：Array initialize: 81.444091796875ms 【ps:計時器名稱：所耗費的時間】
複製程式碼12、console.group() 和 console.groupEnd() 和 console.groupCollapsed()
console.group()和console.groupEnd()用於將顯示的資訊分組。它只在輸出大量資訊時有用，分在一組的資訊，可以用滑鼠摺疊/展開。
//例：
console.group('一級分組');
console.log('一級分組的內容');
console.group('二級分組');
console.log('二級分組的內容');
console.groupEnd(); //一級分組結束
console.groupEnd(); //二級分組結束
複製程式碼輸出的結果如下：
console.groupCollapsed方法與console.group方法很類似，唯一的區別是該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的
//例：
console.groupCollapsed('一級分組');
console.log('一級分組的內容');
console.groupCollapsed('二級分組');
console.log('二級分組的內容');
console.groupEnd(); //一級分組結束
console.groupEnd(); //二級分組結束
複製程式碼效果圖如下
13.console.trace()
console.trace方法顯示當前執行的程式碼在堆疊中的呼叫路徑
//例：
console.trace()
複製程式碼結果圖如下：
14、console.clear()
console.clear方法用於清除當前控制檯的所有輸出，將游標回置到第一行。如果使用者選中了控制檯的“Preserve log”選項，console.clear方法將不起作用。
//例：
console.clear();
複製程式碼[ps:本文件所展示的測試用例都是在Chrome環境下進行測試的]