我的第一篇部落格

每個人都有屬於自己的第一篇部落格 ，我也不例外。我不善於言表，寫部落格是為了讓自己養成良好的習慣。31歲才轉行做前端開發，記憶力已大不如前，很多時候需要靠筆記和百度解決問題，但這並不是長久之計。每天寫一篇部落格，在對工作中遇到問題總結的同時，也可以加深記憶，這點對我來說尤為重要。

Console用法總結

一、什麼是Console?

Console 是用於顯示 JS和 DOM 物件資訊的單獨視窗。並且向 JS 中注入1個 console 物件，使用該物件可以輸出資訊到 Console 視窗中。

二、為什麼不直接使用 alert 或自己寫的 log？

alert 彈出視窗會中斷程式，而且 alert 顯示物件永遠顯示為[object ]。
log 雖然可以顯示一些 object 資訊，但很多功能支援都沒有 console 好。

三、Console用法

1. 輸出、清空資訊

// 輸出普通訊息
console.log('普通訊息');
// 輸出提示資訊
console.info('提示資訊');
// 輸出錯誤資訊
console.error('錯誤資訊');
// 輸出警告資訊
console.warn('警告資訊');
// 清空console中的所有資訊
console.clear();

console.log() 方法第一個引數支援類似 C 語言 printf 字串替換模式。支援下面幾種替換模式：

1. %s 代替字串
2. %d 代替整數
3. %f 代替浮點值
4. %o 代替Object

console.log("%d年%d月%d日"
 
,2016,8,22);    // 輸出結果為:2016年8月22日
console.log("%d年%s月%d日",2016,'08',22); // 輸出結果為:2016年08月22日

2. 當表示式expression為false時，輸出資訊

// 當表示式expression為false時，輸出資訊
console.assert(expression, '當expression為false時才輸出！');

3. 資料表格化

let thisObj = [
　　{ name: 'quber', email: '[email protected]', qq: 757200834 },
　　{ name:
 
 'xm', email: '[email protected]', qq: 757200833 },
　　{ name: 'jack', email: '[email protected]', qq: 757200832 },
　　{ name: 'maer', email: '[email protected]', qq: 757200831 }
];
console.table(thisObj);  // 將陣列物件用表格的方式顯示

4. 統計程式碼執行時間

console.time('統計時間'); // 建立計時器

var count = 0;
for (let i = 0; i < 999999999; i++) {
　　count++;
}
console.timeEnd('統計時間'); // 停止計時器，顯示時間

5. 分組輸出資訊

console.group('分組1'); // 分組開始
console.log('分組1-1111');
console.log('分組1-2222');
console.log('分組1-3333');
console.groupEnd();   // 分組結束

console.group('分組2'); 
console.log('分組2-1111');
console.log('分組2-2222');
console.log('分組2-3333');
console.groupEnd();

6. 統計程式碼執行次數

function testFn() {
　　console.count('當前執行的次數');
}
testFn();
testFn();
testFn();

7. 將物件以樹結構顯示 / 列出物件的所有方法

let thisObj = {
　　name: 'quber',
　　age: 26,
　　fn: function() {
　　　　alert('quber');
　　}
};
console.dir(thisObj); // 將物件以樹結構顯示

console.dir(console); // 輸出console的所有方法

8. 輸出節點所包含的所有html/xml程式碼

// 輸出節點所包含的所有html/xml程式碼
console.dirxml(document.getElementsByClassName('.kx-frm-gd')[0]);
console.dirxml($('.kx-frm-gd'))

以上是關於Console的總結，通過這些內容讓我進一步認識了Chrome開發者自帶工具功能的強大，可以更高效的做前端除錯。