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

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

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

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

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

現(xiàn)在我們按一下 F12 打開(kāi)控制臺(tái)，點(diǎn)擊 Console 這一項(xiàng)。

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

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

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

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

如果用 console.log 代替 alert document.write 輸出對(duì)象信息，可以在控制臺(tái)展開(kāi)這對(duì)象查看具體信息。
例如：

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

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

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

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

我們先來(lái)認(rèn)識(shí)下 console 對(duì)象下還有那些方法供我們使用吧。
輸入 console 然后回車，展開(kāi)這個(gè)對(duì)象，

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

我們走一步看一步吧，反正先從 log dir 說(shuō)起，大部分的調(diào)試就靠他們了。
PS：其實(shí)應(yīng)該給你們官方文檔的，可是最近谷歌打不開(kāi)，所以自行百度查看各個(gè)方法的功能吧。

找到個(gè)中文版，還不錯(cuò)，各位看先《console對(duì)象》。

來(lái)幾個(gè)課后練習(xí)：(先打開(kāi)百度，然后打開(kāi)控制臺(tái))
1 在控制臺(tái)查看 ID 為 kw1 的元素信息
2 然后用 console.dir 方法查看 kw1 元素的信息

最新評(píng)論