小談chrome調試命令：console.log的使用

相信從事前端開發的您，一定不會陌生Mozilla五星級推薦的一款插件：firebug，它是如此強大，乃至於我們可以很方便地調試DHTML的近乎所有元素。而在它深邃的機體裏，還存有一個命令：console.log。 她是用來做什麼的？顧名思義，它是一個彪悍的日誌記錄功能，您可以從您自己的web頁面上調用，然後以最快的方式轉儲儘可能多的信息到控制檯上，從而能更醒目地讓你意識到你的javascript下一步需要做什麼。

那麼，菜鳥級前端工程師賢心將與您分享這一可愛的朋友。 首先請嘗試打開你的chrome瀏覽器，F12召喚出firebug，在如下界面中點擊Console，然後輸入13+14，回車，它將出現：

它就是如此靈活，無論您是否接受！其最簡單的書寫方式可以爲：

console.log('hello world');

• 0
• 1

代碼:

你還可以加入許多參數,比如:

var you = 'you';
console.log(1,3,1,4,'love',you);

• 0
• 1
• 2

代碼:

在一些遍歷的操作中，如果你需要一眼目睹所有結果，使用alert調試顯然不足，那麼你就可以藉助log：

var json = {
	name:'賢心',
	sex:'男',
	age:'23'
}
for(i in json){
	console.log(i+':'+json[i]);
	//alert(i+':'+json[i])
}

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

代碼:

當然，console.log提供的功能遠不止這些，您還可以在它的控制檯中做更多的事。如果你給log傳遞的是一個對象或者數組、HTML元素等，控制檯將會顯示爲一個超鏈接，點擊它您就可以查看該元素的詳細信息了，比如您可以輸入：

console.log(document.body);

• 0
• 1

代碼:

那麼，它將立馬輸出body所包含的所有元素：

除了console.log，console對象還能實現日誌的彩色輸出，這將讓您的調試結果顯得更清晰了：

console.warn(); //信息左側將會出現感嘆圖標
console.error(); //信息左側將會出現×圖標

• 0
• 1
• 2

代碼:

熟練使用console.log，可以讓您在javascript調試中省不少麻煩，尤其是面對龐大的框架操作。那麼，從現在開始，趕緊去嘗試運用吧，你將體會她更多的神奇，而不僅僅是賢心所介紹的這些。