不只console.log, 還能這樣用（1）

前端開發者應該都知道console.log， 其實console對象還有很多其他的用法， 下面我就介紹一下console對象的其他用法。

下文中的例子可直接複製到控制檯中運行， 例子中給出的輸出參考結果是在Google Chrome瀏覽器中運行的結果

斷言 console.assert()

判斷第一個參數（表達式）是否為真，false的話拋出異常並且在控制檯輸出後面的參數。

用法

//參數可以是字符串，對象，數字，數組等一切js類型
console.assert(表達式, [參數1, 參數2, ..., 參數N]);

例子

console.assert(1 == '1','斷言成功，不會打印任何參數');
var str1 = '使用3個等號時會進行類型對比';
var str2 = '數字和字符串類型不一樣會導致斷言失敗';
var str2 = '並把後面的這3個字符串參數打印到控制檯';
console.assert(1 === '1', str1, str2, str3);

清空控制檯輸出 console.clear()

把控制檯中之前輸出過的內容清空

例子

//不用傳任何參數，直接調用即可
console.clear();

輸出本身被調用的次數 console.count()

console.count()方法可以輸出該方法本身被調用的次數

用法

//參數 標記 為字符串，可以不傳
//若不傳標記，輸出不帶標記調用該方法的次數
//若傳標記，則輸出使用對應標記調用該方法的次數
console.count([標記]);

例子

console.count(); //輸出：default: 1
console.count('a');//輸出：a: 1
console.count(); //輸出：default: 2
console.count('b');//輸出：b: 1
console.count(); //輸出：default: 3
console.count('b');//輸出：b: 2
console.count('a');//輸出：a: 2
console.count(); //輸出：default: 4

重置console.count計數 console.countReset()

調用該方法可以重置console.count()方法的計數

用法

//參數 標記 為字符串，可以不傳
//若不傳標記，重置不帶標記調用該方法的次數
//若傳標記，則重置對應標記調用該方法的次數
console.countReset([標記]);

例子

console.count();//輸出調用過的次數
console.countReset();
console.count();//輸出 default: 1
console.count('a');//輸出調用過的次數
console.countReset('a');
console.count('a');//輸出 a: 1
console.count('b');//輸出調用過的次數
console.countReset('b');
console.count('b');//輸出 default: 1

輸出消息 console.log()

往控制檯輸出消息

該方法大概是使用最多的方法了，一般開發者平時使用可能也就是console.log('xxxxxxxxxxxxx')。 然後控制檯中會打印xxxxxxxxxxxxx，其實這個方法是支持參數的。 比如可以像C語言格式化字符串一樣格式化輸出，也可以給輸出的內容添加CSS，讓輸出內容可以改變顏色，字號等。

用法

//按序輸出對象
console.log(參數[, 參數2, ..., 參數N]);
console.log(消息[, 格式]);

格式

%d：輸出整數

%i：和%d一樣

%f：輸出浮點數

%o：輸出對象

%c：設置%c後面的css樣式

例子

//直接打印‘何方博客’
console.log('何方博客');
var obj = {name:'何方',blog:'https://hefang.link'};
//打印對象
console.log(obj);
var arr = [1,2,3,4];
//打印多個對象
console.log("何方博客", obj, arr);
//格式化輸出：格式化‘字符串’,整數：1，保留兩位小數：2.2, 對象：{name: "何方", blog: "https://hefang.link"}
console.log("格式化‘%s’,整數：%d，保留兩位小數：%f, 對象：%o", "字符串", 1, 2.2, obj); 

//帶CSS樣式
//顏色
console.log("%c紅色%c藍色%c綠色", "color:red", "color:blue", "color:green");
//字號
console.log("%c12px%c24px%c48px%c64px", "font-size:12px", "font-size:24px", "font-size:48px", "font-size:64px");
//字體樣式
console.log("%c下劃線%c粗體%c斜體", "text-decoration: underline;", "font-weight: bolder", "font-style: italic");
//可以同時應用多個css樣式，比如64px紅色粗體斜體帶下劃線
var css = "font-size:64px;color:red;font-weight:bolder;font-style:italic;text-decoration:underline";
console.log("%c何方博客", css);

輸出調試信息 console.debug()

使用方法和console.log()一樣，同樣也支持格式化字符串，不過該方法輸出的內容不會直接顯示，， 要展開消息列表才會顯示。

輸出對象屬性 console.dir()

在控制檯中顯示指定JavaScript對象的屬性，並通過類似文件樹樣式的交互列表顯示。

比如輸出dom對象的時候，使用console.log(dom)輸出的是dom本身， 而使用console.dir(dom)輸出的是dom對應的對象

console.dirxml()

console.dirxml()在MDN中的描述是以xml形式輸出對象屬性， 不過經過我測試和console.log()完全一樣

更多console對象的用法請查看Javascript中你不知道的console用法(2)