Console 物件提供對瀏覽器控制檯的接入（如：Firefox 的 Web Console）。不同瀏覽器上它的工作方式是不一樣的，但這裡會介紹一些大都會提供的介面特性。
Console物件可以在任何全域性物件中訪問，如 Window，WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。
它被瀏覽器定義為 Window.Console，也可被簡單的 Console 呼叫。
最常用的方法就是Console.log(),就是在控制檯輸出內容。剛開始學前端的時候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法，難道Console真的沒有別的用法了？查了一下後發現Console還是非常強大的，至於為什麼很少看到有人用可能是因為用過都刪掉了吧。在此記錄一下Console的其他用法。
注意：因為Console 物件提供對瀏覽器控制檯的接入 所以在不同瀏覽器中的支援及表現形式可能不太一樣，但是除錯內容只有我們開發者會看，所以保證開發環境能用這些方法就可以了，下面演示全部都為Chrome上面的效果。
分類輸出
不同類別資訊的輸出
|
1 2 3 4 |
console.log('文字資訊'); console.info('提示資訊'); console.warn('警告資訊'); console.error('錯誤資訊'); |
分組輸出
使用Console.group()和Console.groupEnd()包裹分組內容。
還可以使用Console.groupCollapsed()來代替Console.group()生成摺疊的分組。
|
1 2 3 4 5 6 7 8 9 10 11 |
console.group('第一個組'); console.log("1-1"); console.log("1-2"); console.log("1-3"); console.groupEnd(); console.group('第二個組'); console.log("2-1"); console.log("2-2"); console.log("2-3"); console.groupEnd(); |
Console.group()還可以巢狀使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
console.group('第一個組'); console.group("1-1"); console.group("1-1-1"); console.log('內容'); console.groupEnd(); console.groupEnd(); console.group("1-2"); console.log('內容'); console.log('內容'); console.log('內容'); console.groupEnd(); console.groupEnd(); console.groupCollapsed('第二個組'); console.group("2-1"); console.groupEnd(); console.group("2-2"); console.groupEnd(); console.groupEnd(); |
表格輸出
使用console.table()可以將傳入的物件，或陣列以表格形式輸出。適合排列整齊的元素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var Obj = { Obj1: { a: "aaa", b: "bbb", c: "ccc" }, Obj2: { a: "aaa", b: "bbb", c: "ccc" }, Obj3: { a: "aaa", b: "bbb", c: "ccc" }, Obj4: { a: "aaa", b: "bbb", c: "ccc" } } console.table(Obj); var Arr = [ ["aa","bb","cc"], ["dd","ee","ff"], ["gg","hh","ii"], ] console.table(Arr); |
檢視物件
使用Console.dir()顯示一個物件的所有屬性和方法
在Chrome中Console.dir()和Console.log()效果相同
|
1 2 3 4 5 6 7 8 9 10 |
var CodeDeer = { nema: 'CodeDeer', blog: 'www.xluos.com', } console.log("console.dir(CodeDeer)"); console.dir(CodeDeer); console.log("console.log(CodeDeer)"); console.log(CodeDeer); |
檢視節點
使用Console.dirxml()顯示一個物件的所有屬性和方法
在Chrome中Console.dirxml()和Console.log()效果相同
百度首頁logo的節點資訊
條件輸出
利用console.assert(),可以進行條件輸出。
- 當第一個引數或返回值為真時，不輸出內容
- 當第一個引數或返回值為假時，輸出後面的內容並丟擲異常
|
1 2 3 4 5 |
console.assert(true, "你永遠看不見我"); console.assert((function() { return true;})(), "你永遠看不見我"); console.assert(false, "你看得見我"); console.assert((function() { return false;})(), "你看得見我"); |
計次輸出
使用Console.count()輸出內容和被呼叫的次數
|
1 2 3 4 5 |
(function () { for(var i = 0; i < 3; i++){ console.count("執行次數："); } })() |
追蹤呼叫堆疊
使用Console.trace()來追蹤函式被呼叫的過程，在複雜專案時呼叫過程非常多，用這個命令來幫你縷清。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function add(a, b) { console.trace("Add function"); return a + b; } function add3(a, b) { return add2(a, b); } function add2(a, b) { return add1(a, b); } function add1(a, b) { return add(a, b); } var x = add3(1, 1); |
計時功能
使用Console.time()和Console.timeEnd()包裹需要計時的程式碼片段，輸出執行這段程式碼的事件。
Console.time()中的引數作為計時器的標識，具有唯一性。Console.timeEnd()中的引數來結束此標識的計時器，並以毫秒為單位返回執行時間。- 最多同時執行10000個計時器。
-
123456console.time("Chrome中迴圈1000次的時間");for(var i = 0; i < 1000; i++){}console.timeEnd("Chrome中迴圈1000次的時間");
效能分析
使用Console.profile()和Console.profile()進行效能分析，檢視程式碼各部分執行消耗的時間，但是我在Chrome自帶的除錯工具中並沒有找到在哪裡檢視這兩個方法生成的分析報告。應該需要其他的除錯工具。
具體參考這裡：
http://www.oschina.net/transl…
有趣的Console.log()
最後再來介紹一下強大的Console.log(),這個方法有很多的用法（其他輸出方法的用法，如error()等，可以參照log()使用）。
一、提示輸出
可以再輸出的物件、變數前加上提示資訊，增加辨識度
|
1 2 |
var ans = 12345; console.log("這是臨時變數ans的值：",ans); |
二、格式化輸出
| 佔位符 | 含義 |
|---|---|
| %s | 字串輸出 |
| %d or %i | 整數輸出 |
| %f | 浮點數輸出 |
| %o | 列印javascript物件，可以是整數、字串以及JSON資料 |
樣例：
|
1 2 3 4 5 |
var arr = ["小明", "小紅"]; console.log("歡迎%s和%s兩位新同學",arr[0],arr[1]); console.log("圓周率整數部分：%d，帶上小數是：%f",3.1415,3.1415); |
三、自定義樣式
使用%c為列印內容定義樣式,再輸出資訊前加上%c，後面寫上標準的css樣式，就可以為輸出的資訊新增樣式了
|
1 2 3 4 5 6 7 |
console.log("%cMy stylish message", "color: red; font-style: italic"); console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em"); console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;'); console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;'); |
總結
Console的用法很多，有些再除錯過程中非常實用，可以節省很多時間。當然我知道debug還是用斷點除錯的方法比較好，但是小問題用“printf大法”也是很好用的（滑稽臉）。