DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript的console.log()用法小結
javascript的console.log()用法小結
編輯:關於JavaScript     

console.log 原先是 Firefox 的“專利”,嚴格說是安裝了 Firebugs 之後的 Firefox 所獨有的調試“絕招”。
這一招,IE8 學會了,不過用起來比 Firebugs 麻煩,只有在開啟調試窗口(F12)的時候,console.log 才能出結果,不然就報錯。
今天看到 Opera 也有個叫 dragonfly 的東東,用這東西查看 DOM,已經可以和 Firebug 媲美,然而還是不能用 console.log。於是有人就提供了這樣兩句代碼:

復制代碼 代碼如下:
window.console = window.console || {};
console.log || (console.log = opera.postError);

經測試,以上代碼好使。

在我用過的浏覽器當中,我是最喜歡Chrome的,因為它對於調試腳本及前端設計調試都有它比其它浏覽器有過之而無不及的地方。可能大家對console.log會有一定的了解,心裡難免會想調試的時候用alert不就行了,干嘛還要用console.log這麼一長串的字符串來替代alert輸出信息呢,下面我就介紹一些調試的入門技巧,讓你愛上console.log

對於更加詳細的介紹可以參考這篇文章:http://www.jb51.net/article/93941.htm

至此,Firefox/IE/Opera 都能用上 console.log 了。
當然,IE 和 Opera 下的 console.log 比起 Firebugs 原創的 console.log,還是太過簡單,比如參數是 Object 或者數組就沒有進一步的顯示功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript的console.log()用法</title> 
<script type="text/javascript"> 
/* 
console.log 原先是 Firefox 的“專利”,嚴格說是安裝了 Firebugs 之後的 Firefox 所獨有的調試“絕招”。 
這一招,IE8 學會了,不過用起來比 Firebugs 麻煩,只有在開啟調試窗口(F12)的時候,console.log 才能出結果,不然就報錯。 
今天看到 Opera 也有個叫 dragonfly 的東東,用這東西查看 DOM,已經可以和 Firebug 媲美,然而還是不能用 console.log。於是有人就提供了這樣兩句代碼: 
window.console = window.console || {}; 
console.log || (console.log = opera.postError); 
經測試,以上代碼好使。 
至此,Firefox/IE/Opera 都能用上 console.log 了。 
當然,IE 和 Opera 下的 console.log 比起 Firebugs 原創的 console.log,還是太過簡單,比如參數是 Object 或者數組就沒有進一步的顯示功能。 
*/ 
//變量 
var i = 'I am a string'; 
console.log('變量:',i); 
//數組 
var arr = [1,2,3,4,5]; 
console.log('數組:',arr); 
//對象 
var obj1 = { 
key1 : 'value1', 
key2 : 'value2', 
key3 : 'value3' 
}; 
var obj2 = { 
key6 : 'value4', 
key5 : 'value5', 
key4 : 'value6' 
}; 
var obj3 = { 
key9 : 'value7', 
key8 : 'value8', 
key7 : 'value9' 
}; 
console.log('對象:',obj1); 
//對象數組 
var objArr1 = [obj1,obj2,obj3]; 
var objArr2 = [[obj1],[obj2],[obj3]]; 
console.log('對象數組1:',objArr1); 
console.log('對象數組1:',objArr2); 
/* 
輸出: 
變量:I am a string 
數組:[1, 2, 3, 4, 5] 
對象:Object { key1="value1", key2="value2", key3="value3"} 
對象數組1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}] 
對象數組1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]] 
*/ 
</script> 
</head> 
<body> 
</body> 
</html> 

注:IE浏覽器下默認是不支持console.log,反而會因為這句代碼報錯,所有ie下注釋掉比較好

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved