作為一個前端開發者，不可避免的需要進行各種各樣的調試。
在谷歌瀏覽器出來以前，火狐的firebug是特別有名的一款調試工具，不過自從谷歌瀏覽器誕生以來，其自帶的開發者工具足以媲美firebug，某種程度上甚至超越了firebug。
雖然這篇介紹谷歌調試工具，但是還是要說一句，火狐的調試工具依然強大。二者都是業界調試工具的佼佼者。
谷歌開發者工具功能豐富，包括代碼審查，樣式調整，性能優化以及其他更高級的功能，調試方式多種多樣，不一而足。
這里主要介紹控制台的console
打開控制台
Windows系統快捷鍵【三個】：
F12
Ctrl+shift+i
Ctrl+shift+j
鼠標操作1：如圖【是不是多余了？】
鼠標操作2：在網頁上任意位置右鍵，最后一個選項：檢查，如圖
打開后，可以看到這樣的界面
上面的不同的單詞：Elements,Console,Source,Network等等，分別針對不同的功能面板。我們這里主要介紹Console面板。
上面的圖上一大片空白，就是console面板輸入區域。可以在這里直接輸入JavaScript代碼。網頁中的報錯信息，提示信息等也都會出現在這里。
console是瀏覽器開發者工具自帶的API，並不是JavaScript原生對象。不過目前所有主流的瀏覽器均支持。可以在js代碼中用console輸出信息。
現在我們在面板里面輸入console。
可以看到console對象有這么多方法。
先來看以下五個方法：
console.log
console.error
console.info
console.warn
console.debug
這五個方法是我們比較常用的方法，也算是比較直觀的方法。這幾個方法的區別就是輸出的結果的顏色不一樣，還有輸出結果前面的提示符號不同。具體如何，請按如下代碼測試，講log換成對應的info,warn,debug,error
關於這五個方法，有如下幾點：
1.都可以輸出任意類型的值，字符串，數值，對象，數組，函數;
console.log(100); console.log("pelli"); console.log(function hh(){}); console.log([1,2,3]); console.log({name:'pelli'}); console.log(null); console.log(undefined); console.log(true);
2.都可以有任意多個參數（65535個以內），可以運行以下代碼，查看效果。順便提一下，65535是一個特別的數字，有興趣可以百度一下;
var str = 'console.log("hello"'; for(var i = 0; i < 100000; i++){ str = str + "," + i; } str += ');'; eval(str);
3.都可以用占位符進行格式化輸出，比如輸出帶樣式的字符串，輸出圖片等。
一共有四種占位符：
浮點：%f
字符：%c
整數：%d或%i
對象：%o
請看以下代碼：代碼中的log可以和warn,info,debug,error隨意互換
//輸出帶有樣式的文字 console.log("%c這是藍色的20號字","color:blue;font-size:20px;"); //輸出圖片 console.log("%c","background:url('http://www.baidu.com/img/tupian.jpg')"); //格式化輸出日期 console.log("今天是%i年%i月%i日",2016,05,04); //輸出小數 console.log("%f是圓周率",3.141592653);
var obj = {
name : 'pelli',
age : 24
}
console.log("%o",obj);
除了console.log外，還有其他很多方法。上面的圖片中列出的是所有的方法。
console.count();
這個方法是用來記錄該行所在的代碼是第幾次執行。一般寫在循環和函數中。每一次執行到這一行的時候，都會在控制台輸出一個數值----在前一個數值基礎上加一。有一個可選參數，可選參數是任意值(字符串，數字，對象，數組，函數，null,undefined,布爾值,正則表達式)，參數會輸出在數字前面的冒號之前。
其輸出結果一定會有一個冒號，冒號后面緊緊跟着數字。
也就是說，如果沒有參數的話，會輸出一個冒號和一個數字。
在函數中寫這個方法，可以記錄該函數是第幾次被調用。
console.dir()
用於輸出一個對象。
console.dirxml()
輸出dom對象
console.clear()
清空控制台信息，執行該方法，會清空控制台中的所有之前的輸出信息
console.assert()
輸出斷言消息
console.assert(3 < 4,"該斷言是正確的斷言，所以不會有任何輸出"); console.assert(3 > 4,"這句話是斷言出錯后輸出的信息"); var a = 100; console.assert(a%5===3,"斷言有兩個參數，第一個是必須參數，斷言語句，第二個參數是可選語句，斷言出錯后輸出的信息，如果斷言正確，則不輸出斷言");
console.trace()
跟蹤該函數調用鏈，會輸出該函數被哪些函數調用過。以下是谷歌瀏覽器效果。
格式化輸出數組或者對象：console.table()
console.table可以以表格形式輸出數組或者對象，最好的數組格式是一維數組，每個元素都是一個類json對象，最好的對象格式是類json對象，每個屬性的值都是相同元素個數的數組。
其他的是有關於性能方面的信息輸出。
輸出代碼執行的時間。
console.time()
console.timeEnd();
console.time()和console.timeEnd()通常會一起使用，console.time()表示計時開始，console.timeEnd()表示計時結束，二者傳遞相同的參數，用以表示同一個計時標記。
二者可以嵌套使用。
顯示代碼執行過程中性能的情況
console.profile()
console.profileEnd()
通常這兩個方法也是一起使用，二者都有一個可選的相同參數，表示記錄標記。
輸出的結果會再控制台，profile 欄顯示。
分組顯示:
console.group()
console.groupEnd()
console.group("kill");
console.log("hello");
console.error("pgp");
console.info("llllll",4545);
console.groupEnd("kill");
console.group("oo");
var c = {"name" : 'fff',"age" : 23};
console.dir(c);
console.info("hah");
console.groupEnd("oo");
效果如圖：
以上兩個方法可以將輸出的信息分組顯示；兒者都有一個可選的參數，表示分組標記。可以嵌套使用。
總結：
提示信息：console.info()
警告提示：console.warn()
報錯提示：console.error()
基本輸出：console.log();
調試輸出：console.debug()
代碼跟蹤：console.trace()
代碼執行次數統計：console.count()
對象輸出：console.dir()
輸出DOM節點：console.dirxml()
輸出代碼執行時間：console.time(),console.timeEnd()
輸出代碼細節：console.profile(),console.profileEnd()
分組輸出信息：console.group(),console.groupEnd()
格式化輸出數組或對象：console.table()
清空控制台：console.clear()
以上是對於控制台console對象的簡單介紹。
由於本人技術水平有限，對於不完善的地方，還望見諒，歡迎大家留言交流。本人QQ：2653807423。