快捷導(dǎo)航

js調(diào)試系列初識控制臺

更新時間：2014年06月18日 10:55:49 投稿：mdxy-dxy

這篇文章的目的只是讓你認(rèn)識控制臺，讓你入門調(diào)試js，之后的路還得靠你們自己走

寫在最開頭：其實我以前就在考慮要不要寫這個東西，因為這個東西確實不難，但是為什么會有這么多人問，他們問的不是怎么用控制臺，而是不知道控制臺能干嘛，他們也知道有 console.log 之類的東西，但他們不知道為什么要用這么長的字符串代替 alert 輸出信息。在他們眼里 alert 足以。好吧，我承認(rèn)小小的吐槽了下，不過這個系列我只打算介紹下調(diào)試的基本知識，不會涉及太深，因為深入的東西結(jié)合js知識，如果你js沒到一個境界，我就算教你調(diào)試bug，破解一些插件之類的，你也根本不知道我在做什么。我的目的只是讓你認(rèn)識控制臺，讓你入門調(diào)試，之后的路還得靠你們自己走。

當(dāng)然大俠請飄過，或者吐槽一下也行。。

js調(diào)試系列目錄：

其實做web開發(fā)的都知道這東西，不論是前端還是后臺，但是很多人只停留在html查看和css修改上，完全沒有把控制臺利用起來。
說不定有些剛?cè)腴T的還不知道有這東西呢。。
這東西的資料網(wǎng)上一抓一大把，但是都沒有講調(diào)試方面的，只是介紹基本的怎么用而已。。

不論是 chrome firefox ie(8以上版本) 還是 360急速瀏覽器搜狗瀏覽器等等，只要按 F12 就能打開控制臺。
我們的文章以 chrome 為例講解，不為什么，因為我喜歡 chrome 而已。。蘿卜白菜各有所愛。。
ps: ff 以前都是firebug的天下，現(xiàn)在原生的也非常不錯了。

現(xiàn)在我們按一下 F12 打開控制臺，點擊 Console 這一項。

可以看到我的頭像和幾行文字，不過下面還有幾行東西，我們暫時先忽略，以后會講解的。
其實對于這 F12 而言，最確切的叫法是開發(fā)人員工具，Console 這一項才是控制臺。
PS：做為基礎(chǔ)教程，我只介紹 Console 和 Sources 方面的調(diào)試，其他功能自己去了解吧。。

點擊右鍵的 Clear console 菜單或者輸入 clear() 然后按回車即可清空控制臺內(nèi)容。
我們進(jìn)行第一步用 console.log 輸出信息吧。
分別輸入 console.log("hehe..") 和 console.log("hehe..", "haha..") 然后按回車，可以在控制臺看到輸出結(jié)果。

其實就是輸出信息而，非常簡單，用他代替 alert 和 document.write 調(diào)試，你的工作會變的非常輕松的。

例如調(diào)試一個循環(huán)這部分的代碼，可是數(shù)組里卻有幾十個甚至上百個元素，alert 的話你會點瘋掉的，
document.write 也不是不行，但是對于對象輸出，你只能看到 [object Object] 這樣的東西。
這是很多新人朋友遇到的真實問題。

如果用 console.log 代替 alert document.write 輸出對象信息，可以在控制臺展開這對象查看具體信息。
例如：

var arr = [{name: "尼瑪", age: 22}, {name: "尼美", age: 20}];
for (var i=0; i<arr.length; i++) {
	console.log(arr[i]);
}

可以直接看到對象信息，而不會顯示 [object Object] 令我們一頭霧水。

是不是突然覺得 console.log 屌爆了？
其實這只是他的冰山一角而已，我會盡量把他的一些優(yōu)勢都展現(xiàn)給你們看。
繼續(xù)剛才的步驟，現(xiàn)在我們直接輸入 arr 然后回車。

是不是更吊了，現(xiàn)在可以直接點擊 Object 展開這個數(shù)組內(nèi)的對象進(jìn)行查看了，連循環(huán)輸出都省了。
這就是控制臺的魅力，而且這只是他最基礎(chǔ)的功能而已。

我們先來認(rèn)識下 console 對象下還有那些方法供我們使用吧。
輸入 console 然后回車，展開這個對象，

可以看一些深色和淺色的東西，深色的就是我們可以直接調(diào)用的方法了，淺色的表示默認(rèn)屬性或方法，展示無需關(guān)心，以后有機(jī)會再說。
其實常用的只有 log dir 而已，其他真心很少用，到高級調(diào)試才會用上。
group，table 之類的輔助性質(zhì)，可用可不用，看你喜好了。我不太喜歡用。