一 實(shí)例

打印字符串和對(duì)象；

?

可展開(kāi)對(duì)象查看內(nèi)部情況；

?

看一下console對(duì)象本身的定義情況；

輸出對(duì)象情況；

?

utag對(duì)象所在文件；

?

輸出對(duì)象；

?

二 Console.log 總結(jié)

1

?

如果你js沒(méi)到一個(gè)境界，我就算教你調(diào)試bug，破解一些插件之類的，你也根本不知道我在做什么。我的目的只是讓你認(rèn)識(shí)控制臺(tái)，讓你入門(mén)調(diào)試，之后的路還得靠你們自己走。
?

不論是 chrome firefox ie(8以上版本) 還是 360急速瀏覽器 搜狗瀏覽器 等等，只要按 F12 就能打開(kāi)控制臺(tái)。
其實(shí)對(duì)于這 F12 而言，最確切的叫法是開(kāi)發(fā)人員工具，Console 這一項(xiàng)才是控制臺(tái)。

點(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] 這樣的東西。
?

如果用 console.log 代替 alert document.write 輸出對(duì)象信息，可以在控制臺(tái)展開(kāi)這對(duì)象查看具體信息。
可以直接看到對(duì)象信息，而不會(huì)顯示 [object Object] 令我們一頭霧水。
?

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

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

?

2

?

之前在調(diào)試代碼的時(shí)候,跟砸js代碼執(zhí)行情況,一般都是通過(guò)在代碼塊中使用alert的方式查看js代碼的執(zhí)行情況,今天也是看到有朋友使用console.log函數(shù)打印輸出函數(shù),變量,對(duì)象,下邊就console.log的使用情況進(jìn)行記錄,具體的語(yǔ)法是:
console.log("值為:",fn);
console.log()能夠輸出變量,函數(shù),數(shù)組,對(duì)象等等

3

console.log 原先是 Firefox 的“專利”，嚴(yán)格說(shuō)是安裝了 Firebugs 之后的 Firefox 所獨(dú)有的調(diào)試“絕招”。?
這一招，IE8 學(xué)會(huì)了，不過(guò)用起來(lái)比 Firebugs 麻煩，只有在開(kāi)啟調(diào)試窗口(F12)的時(shí)候，console.log 才能出結(jié)果，不然就報(bào)錯(cuò)。?
今天看到 Opera 也有個(gè)叫 dragonfly 的東東，用這東西查看 DOM，已經(jīng)可以和 Firebug 媲美，然而還是不能用 console.log。于是有人就提供了這樣兩句代碼：?

window.console = window.console || {};?
console.log || (console.log = opera.postError)；?

經(jīng)測(cè)試，以上代碼好使。?
至此，Firefox/IE/Opera 都能用上 console.log 了。?
當(dāng)然，IE 和 Opera 下的 console.log 比起 Firebugs 原創(chuàng)的 console.log，還是太過(guò)簡(jiǎn)單，比如參數(shù)是 Object 或者數(shù)組就沒(méi)有進(jìn)一步的顯示功能。?
?

//變量?
var i = 'I am a string';?
console.log('變量：',i);?
//數(shù)組?
var arr = [1,2,3,4,5];?
console.log('數(shù)組：',arr);?
//對(duì)象?
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('對(duì)象：',obj1);?
//對(duì)象數(shù)組?
var objArr1 = [obj1,obj2,obj3];?
var objArr2 = [[obj1],[obj2],[obj3]];?
console.log('對(duì)象數(shù)組1：',objArr1);?
console.log('對(duì)象數(shù)組1：',objArr2);?
/*?
輸出：?
變量：I am a string?
數(shù)組：[1, 2, 3, 4, 5]?
對(duì)象：Object { key1="value1", key2="value2", key3="value3"}?
對(duì)象數(shù)組1：[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]?
對(duì)象數(shù)組1：[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]]?
*/?

注:IE瀏覽器下默認(rèn)是不支持console.log，反而會(huì)因?yàn)檫@句代碼報(bào)錯(cuò)，所有ie下注釋掉比較好

?

4

對(duì)于JavaScript程序的調(diào)試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺(tái)中打印相關(guān)信息，因此不會(huì)造成類似的顧慮

一、什么是console.log()？
除了一些很老版本的瀏覽器，現(xiàn)今大多數(shù)瀏覽器都自帶調(diào)試功能；即使沒(méi)有調(diào)試功能，也可以通過(guò)安裝插件來(lái)進(jìn)行補(bǔ)充。比如，老版本的Firefox沒(méi)有自帶調(diào)試工具，在這種情況下可以通過(guò)安裝Firebug插件來(lái)添加調(diào)試功能。在具備調(diào)試功能的瀏覽器上，window對(duì)象中會(huì)注冊(cè)一個(gè)名為console的成員變量，指代調(diào)試工具中的控制臺(tái)。通過(guò)調(diào)用該console對(duì)象的log()函數(shù)，可以在控制臺(tái)中打印信息。

console.log()可以接受任何字符串、數(shù)字和JavaScript對(duì)象。與alert()函數(shù)類似，console.log()也可以接受換行符\n以及制表符\t。console.log()語(yǔ)句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺(tái)中看到。不同的瀏覽器中console.log()行為可能會(huì)有所不同，?
二、兼容沒(méi)有調(diào)試控制臺(tái)的瀏覽器
對(duì)于缺少調(diào)試控制臺(tái)的老版本瀏覽器，window中的console對(duì)象并不存在，因此直接使用console.log()語(yǔ)句可能會(huì)在瀏覽器內(nèi)部造成錯(cuò)誤(空指針錯(cuò)誤)，并最終導(dǎo)致某些老版本瀏覽器的崩潰。為了解決這一問(wèn)題，可以人為定義console對(duì)象，并聲明該console對(duì)象的log函數(shù)為空函數(shù)；這樣，當(dāng)console.log()語(yǔ)句執(zhí)行時(shí)，這些老版本的瀏覽器將不會(huì)做任何事情：
代碼如下:
if(!window.console){
? window.console = {log : function(){}};
}
不過(guò)，在大多數(shù)情況下，沒(méi)有必要去做這種兼容性工作 — console.log()等調(diào)試代碼應(yīng)當(dāng)從最終的產(chǎn)品代碼中刪除掉。
三、使用參數(shù)
與alert()函數(shù)類似，console.log()也可以接受變量并將其與別的字符串進(jìn)行拼接：
代碼如下:
//Use variable
var name = "Bob";
console.log("The name is: " + name);

與alert()函數(shù)不同的是，console.log()還可以接受變量作為參數(shù)傳遞到字符串中，其具體語(yǔ)法與C語(yǔ)言中的printf語(yǔ)法一致：
復(fù)制代碼 代碼如下:
//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);
上述代碼的執(zhí)行結(jié)果為：”Alex is 42 years old.”
四、使用其它日志級(jí)別
除了console.log()，Firebug還支持多種不同的日志級(jí)別：debug、info、warn、error。以下代碼將在控制臺(tái)中打印這些不同日志級(jí)別的信息：
代碼如下:
//Use different logging level
console.log("Log level");
console.debug("Debug level");
console.info("Info level");
console.warn("Warn level");
console.error("Error level");
?

從Firebug控制臺(tái)中可以看到，不同日志級(jí)別的打印信息，其顏色和圖標(biāo)是不一樣的；同時(shí)，可以在控制臺(tái)中選擇不同的日志級(jí)別來(lái)對(duì)這些信息進(jìn)行過(guò)濾

總結(jié)

以上是生活随笔為你收集整理的js调试console.log使用总结图解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。