對於js的除錯，一般我們經常用alert()或者console.log()進行除錯。但是alert()會讓程式中斷，而console.log()則不會。雖然用的很多，但是我就只知道console.log()而已。今天專門去研究一下這個東西console。
JS原生中預設是沒有console物件,這是宿主物件（也就是遊覽器）提供的內建物件。 用於訪問除錯控制檯, 在不同的瀏覽器裡效果可能不同。
比如：現在大部分的遊覽器都是帶有除錯功能的。而低版本的IE就沒有，所以在低版本IE的window中，console物件並不存在。【所以還需要低版本支援的朋友要注意】。
列印window物件中的console：
接下來列印一下console都有一些什麼功能：
這是谷歌和火狐for(var i in console){console.log(i)}出來，對應遊覽器所支援的console方法：
console 的方法
console.log(),console.debug(),console.info()
console.log方法用於在控制檯輸出資訊。它可以接受多個引數，逗號分隔。它會自動在每次輸出的結尾，新增換行符。沒有返回值回會返回undefined。【console.log大家用的很熟的】
如果第一個引數是格式字串（使用了格式佔位符），console.log方法將依次用後面的引數替換佔位符，然後再進行輸出。
佔位符格式如下表：
| 模式 | 型別 |
|---|---|
| %s | 字串 |
| %d,%i | 整數 |
| %f | 浮點數 |
| %o | 物件超連結 |
| %c | CSS格式化樣式 |
console.log方法和console.debug()與console.info()，幾乎用法完全一樣，唯一不同的就是現實時候的表現形式了。
注意一點的是：IE不支援debug()方法
console.assert()
接收至少兩個引數，第一個引數的值或返回值為false的時候，將會在控制檯上丟擲一個異常並將其餘引數作為異常描述輸出.
|
1 2 |
console.assert(false,123) //丟擲錯誤，並且輸出，返回undefined console.assert(true,123) //沒有錯誤，返回undefined |
console.count()
console.count()方法用於計數，輸出它被呼叫了多少次。
|
1 2 3 4 5 |
(function() { for (var i = 0; i < 5; i++) { console.count('count'); } })(); |
console.count()方法裡面可以傳入一個字串作為引數，作為標籤，對執行次數進行分類
|
1 2 3 4 5 6 7 |
function greet(user) { console.count(user); return "hi " + user; } greet('bob') greet('alice') greet('bob') |
console.clear()
console.clear()清空控制檯內容。
console.dir()
console.dir()方法用來對一個物件進行檢查，並以易於閱讀和列印的格式顯示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var obj = { name: 'c', age: '20', type: '1' }; console.dir(obj); var arr = [1,2,3] console.dir(arr) var s = 'sdfs' console.dir(s) var n = '123' console.dir(n) |
console.error(),console.warn()
console.error(),console.warn()方法用於輸出錯誤和警告資訊，用法和常見的console.log方法一樣，不同點在於輸出時候的表現形式。一個是黃色的警告形式一個是紅色的錯誤形式。而console.error()方法會標記為錯誤的地方。
console.table()
console.table()方法可以將傳入的物件或陣列這些複合資料以表格形式輸出。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var arr= [ { num: "1"}, { num: "2"}, { num: "3" } ]; console.table(arr); var obj= { a:{ num: "1"}, b:{ num: "2"}, c:{ num: "3" } }; console.table(obj); |
console.time(),console.timeEnd()
console.time(),console.timeEnd()方法計算一個操作的執行的時間console.time()是開始，console.timeEnd()是結束。可以傳一個引數，引數為計時器的名稱。
|
1 2 3 4 5 6 7 8 9 10 |
console.time('計時器1'); for (var i = 0; i < 100; i++) { for (var j = 0; j < 100; j++) {} } console.timeEnd('計時器1'); console.time('計時器2'); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('計時器2'); |
console.group(),console.groupCollapsed(),console.groupend()
console.group()和console.groupCollapsed()這兩個方法用於將顯示的資訊分組，可以把資訊進行摺疊和展開。他們都可以傳遞一個引數，引數預設是分組名。
用法都是一樣的。唯一區別就是console.group()是預設展開的，而console.groupCollapsed()預設是收起的。
|
1 2 3 4 5 6 7 8 9 |
console.group('第一層'); console.group('第二層'); console.log('error'); console.error('error'); console.warn('error'); console.groupEnd(); console.groupEnd(); |
console.groupCollapsed(‘第一層’); console.groupCollapsed(‘第二層’); console.log(‘error’); console.error(‘error’); console.warn(‘error’); console.groupEnd(); console.groupEnd();
console.profile(),console.profileEnd()
console.profile(),console.profileEnd()方法就比較高大上點了，用來新建一個效能測試器，可以評估某段程式碼的效能，可以傳一個引數，為生成的效能測試器的名字。
|
1 2 3 4 5 6 7 8 |
function profile() { for (var i = 0; i < 10000; i++) { i++; } } console.profile('效能分析'); profile(); console.profileEnd(); |
profile在哪裡呢。開啟控制檯。Profile就是了。也可手動新增
console.trace()
console.trace()方法用來追蹤函式的呼叫過程。在複雜的架構中可以查詢到對應的呼叫路徑。
|
1 2 3 4 5 6 7 8 9 10 11 |
function d(a) { console.trace(); return a; } function b(a) { return c(a); } function c(a) { return d(a); } var a = b('123'); |
PS：很多網際網路公司都會在頁面中寫類似的推廣呀，招聘呀。。。
試著在你的網站寫寫類似的語句，說不定哪天，那個程式媛審查一下元素，就和你去拯救世界了呢。O(∩_∩)O~
|
1 2 3 4 5 |
var cons = console; if (cons) { cons.log('想和我共同保護世界，維護世界的和平嗎？n'); cons.log("請在郵件中註明：%c來自:浩3108的簡書", "color:red;font-weight:bold;"); } |
暫時告一段。