JavaScript中的console.log()函數詳細介紹_javascript技巧

對於JavaScript程式的調試，相較於alert()，使用console.log()是一種更好的方式，原因在於：alert()函數會阻斷JavaScript程式的執行，從而造成副作用；而console.log()僅在控制台中列印相關訊息，因此不會造成類似的顧慮。

什麼是console.log()？

除了一些很舊版的瀏覽器，現今大多數瀏覽器都自備調試功能；即使沒有調試功能，也可以透過安裝插件來補充。例如，舊版的Firefox沒有自備調試工具，在這種情況下可以透過安裝Firebug插件來添加調試功能。在具備偵錯功能的瀏覽器上，window物件中會註冊一個名為console的成員變量，指涉偵錯工具中的控制台。透過呼叫該console物件的log()函數，可以在控制台中列印資訊。例如，以下程式碼將在控制台中列印”Sample log”：

複製程式碼 程式碼如下:

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

上述程式碼可以忽略window物件而直接簡寫為：

複製程式碼 程式碼如下:

console.log("Sample log");

console.log()可以接受任何字串、數字和JavaScript物件。與alert()函數類似，console.log()也可以接受換行符n以及製表符 。

console.log()語句所列印的偵錯資訊可以在瀏覽器的偵錯控制台中看到，具體各個瀏覽器中的檢視方法可以參考以下網頁：
http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it

不同的瀏覽器中console.log()行為可能會有所不同，本文主要探討Firebug中console.log()的使用。

相容於沒有偵錯控制台的瀏覽器

對於缺少偵錯控制台的舊版瀏覽器，window中的console物件並不存在，因此直接使用console.log()語句可能會在瀏覽器內部造成錯誤(空指標錯誤)，並最終導致某些老版本瀏覽器的崩潰。為了解決這個問題，可以人為定義console對象，並聲明該console對象的log函數為空函數；這樣，當console.log()語句執行時，這些舊版本的瀏覽器將不會做任何事情：

複製程式碼 程式碼如下:

if(!window.console){
  window.console = {log : function(){}};
}

不過，在大多數情況下，沒有必要去做這種相容性工作 — console.log()等調試程式碼應從最終的產品程式碼中刪除掉。

使用參數

與alert()函數類似，console.log()也可以接受變數並將其與別的字串進行拼接：

複製程式碼 程式碼如下:

//Use variable
var name = "Bob";
console.log("The name is: " name);

與alert()函數不同的是，console.log()也可以接受變數作為參數傳遞到字串中，其具體語法與C語言中的printf語法一致：

複製程式碼 程式碼如下:

//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);

上述程式碼的執行結果為：”Alex is 42 years old.”

使用其它日誌等級

除了console.log()，Firebug也支援多種不同的日誌等級：debug、info、warn、error。以下程式碼將在控制台中列印這些不同日誌等級的資訊：

複製程式碼 程式碼如下:

//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控制台中可以看到，不同日誌等級的列印訊息，其顏色和圖示是不一樣的；同時，可以在控制台中選擇不同的日誌等級來對這些資訊進行過濾：