快捷導(dǎo)航

JavaScript調(diào)試技巧之console.log()詳解

更新時(shí)間：2014年03月19日 09:54:05 作者：

對(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)中打印信息。比如，以下代碼將在控制臺(tái)中打印”Sample log”：

復(fù)制代碼代碼如下:

window.console.log("Sample log");

上述代碼可以忽略window對(duì)象而直接簡(jiǎn)寫(xiě)為：

復(fù)制代碼代碼如下:

console.log("Sample log");

console.log()可以接受任何字符串、數(shù)字和JavaScript對(duì)象。與alert()函數(shù)類似，console.log()也可以接受換行符\n以及制表符\t。console.log()語(yǔ)句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺(tái)中看到。不同的瀏覽器中console.log()行為可能會(huì)有所不同，本文主要探討Firebug中console.log()的使用。
二、兼容沒(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ì)做任何事情：

復(fù)制代碼代碼如下:

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)行拼接：

復(fù)制代碼代碼如下:

//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()，F(xiàn)irebug還支持多種不同的日志級(jí)別：debug、info、warn、error。以下代碼將在控制臺(tái)中打印這些不同日志級(jí)別的信息：

復(fù)制代碼代碼如下:

//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ò)濾：