## console對象 `console`對象是JavaScript的原生對象，可以將信息輸出在控制臺。 **1、打開控制臺** 不同系統平臺打開瀏覽器的控制臺可能有些不一樣，下面以chrome瀏覽器為例，可以使用下列方式打開： - 按F12 - 鼠標右鍵里選擇“檢查” - 在右上角的菜單中點擊“更多工具/開發者工具” 打開控制臺以后，你可以看到下列不同的面板： ``` Elements：查看網頁的HTML源碼和CSS代碼。 Resources：查看網頁加載的各種資源文件（比如代碼文件、字體文件、css文件等），以及在硬盤上創建的各種內容（比如本地緩存、Cookie、Local Storage等）。 Network：查看網頁的HTTP通信情況。 Sources：查看網頁加載的所有源碼。 Timeline：查看各種網頁行為隨時間變化的情況。 Profiles：查看網頁的性能情況，比如CPU和內存消耗。 Console：用來運行JavaScript命令。 ``` **2、console對象的方法** **2.1 log()、warn()、info()、error()、debug()** `console.log()`，在控制臺中打印信息，它會自動在每次輸出的結尾，添加換行符，它可以接受任何字符串、數字和JavaScript對象，也可以接受換行符n以及制表符t。 ``` console.log(1); // 1 console.log('hello'); // "hello" ``` 它可以接受多個參數，將它們的結果連接起來輸出。 ``` console.log('a', 'b', 1); // a b 1 ``` 當然`console`可不止這一個方法，它還有： - console.info 用于輸出提示性信息，會帶上一個藍色圖標 - console.error用于輸出錯誤信息，會在最前面帶上紅色的叉，表示出錯 - console.warn用于輸出警示信息，會在最前面帶上黃色三角 - console.debug用于輸出調試信息 ``` console.info(“提醒”); console.error(“報錯了”); console.warn(“警告”); console.debug(“調試信息”); ``` console對象的上面5種方法，如果第一個參數是格式字符串（使用了格式占位符），將依次用后面的參數替換占位符，然后再進行輸出。 不過，占位符的種類比較少，只支持下列五種： ``` 字符（%s） 整數（%d或%i） 浮點數（%f） 對象（%o） CSS格式字符串（%c） ``` 例子： ``` console.log('%s%s',1,2); // 12 console.log("%c自定義樣式","font-size:20px;color:green"); console.log("%c我是%c自定義樣式","font-size:20px;color:green","font-weight:bold;color:red"); ``` **2.2 trace()、clear()** `console.trace()`方法顯示當前執行的代碼在堆棧中的調用路徑。 用`console.clear()`清空控制臺。 **2.3 dir()、dirxml()** `console.dir` 直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查對象的方法發展等等 ``` console.log({name: 'tg', age: 12}); // Object {name: "tg", age: 12} console.dir({name: 'tg', age: 12}); // Object name: "tg", age: 12, __proto__: Object ``` `console.dirxml`用來顯示網頁的某個節點（node）所包含的html/xml代碼 ``` <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script> var table=document.querySelector("table"); console.dirxml(table); </script> //輸出： <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> ``` **2.4 group()、groupEnd()、groupCollapsed()** `console.group`和`console.groupend`這兩個方法用于將顯示的信息分組。它只在輸出大量信息時有用，分在一組的信息，可以用鼠標折疊/展開。 `console.group`輸出一組信息的開頭 `console.groupEnd`結束一組輸出信息 `console.groupCollapsed`方法與`console.group`方法很類似，唯一的區別是該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。 **2.5 assert()** `console.assert`對輸入的表達式進行斷言，接受兩個參數，第一個參數是表達式，第二個參數是字符串。只有表達式為false時，才輸出相應的信息到控制臺，否則不輸出。 ``` var isTrue=true; console.assert(isTrue,"我是錯誤"); isTrue=false; console.assert(isTrue,"我是錯誤2"); // "我是錯誤2" ``` **2.6 count()** `console.count ` 當你想統計代碼被執行的次數，這個方法很有用 ``` function play(){ console.count("執行次數："); } play(); // 執行次數：1 play(); // 執行次數：2 play(); // 執行次數：3 ``` **2.7 time()、timeEnd()** 這兩個方法用于計時，可以算出一個操作所花費的準確時間。 `console.time` 計時開始 `console.timeEnd` 計時結束 ``` console.time("array"); var a=0; for(var i=0;i<100000;i++){ a += i; } console.timeEnd("array"); // array : 6.063ms ``` **2.8 profile()、profileEnd()** `console.profile`和`console.profileEnd`配合一起使用來查看CPU使用相關信息 打開瀏覽器的開發者工具，在profile面板中，可以看到這個性能調試器的運行結果。 **2.9 timeLine()、timeLineEnd()** `console.timeLine`和`console.timeLineEnd`配合一起記錄一段時間軸 **3、自定義console對象的方法** console對象的所有方法都可以被覆蓋，也就是說，我們可以自定義方法。 ``` console['log'] = console['log'].bind(console, '溫馨提示'); console.log('自定義方法'); // 溫馨提示 自定義方法 ```