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

 對於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以及定位字元t。console.log()語句所列印的調試資訊可以在瀏覽器的偵錯主控台中看到。不同的瀏覽器中console.log()行為可能會有所不同， 本文主要探討Firebug中console.log()的使用 。二、相容沒有偵錯主控台的瀏覽器對於缺少偵錯主控台的老版本瀏覽器，window中的console對象並不存在，因此直接使用console.log()語句可能會在瀏覽器內部造成錯誤(null 指標錯誤)，並最終導致某些老版本瀏覽器的崩潰。為瞭解決這一問題，可以人為定義console對象，並聲明該console對象的log函數為空白函數；這樣，當console.log()語句執行時，這些老版本的瀏覽器將不會做任何事情：代碼如下:if(!window.console){  window.console = {log : function(){}};}不過，在大多數情況下，沒有必要去做這種相容性工作 — console.log()等調試代碼應當從最終的產品代碼中刪除掉。三、使用參數與alert()函數類似，console.log()也可以接受變數並將其與別的字串進行拼接：代碼如下://Use variablevar name = "Bob";console.log("The name is: " + name);與alert()函數不同的是，console.log()還可以接受變數作為參數傳遞到字串中，其具體文法與C語言中的printf文法一致： 代碼如下://Use parametervar 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 levelconsole.log("Log level");console.debug("Debug level");console.info("Info level");console.warn("Warn level");console.error("Error level");從Firebug控制台中可以看到，不同記錄層級的列印資訊，其顏色和表徵圖是不一樣的；同時，可以在控制台中選擇不同的記錄層級來對這些資訊進行過濾：