如何實現監聽 console.log


var lastLog;
console.oldLog = console.log;
console.log = function(str) {
  console.oldLog(str);
  lastLog = str;
} 
console.log("Hello, Neo");
document.write(lastLog);

一、什么是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()的使用 。

二、console下有哪些方法

 console對象還有4種顯示信息的方法,分別是一般信息console.info()、除錯信息console.debug()、警告提示console.warn()、錯誤提示console.error()。

  console.info("這是info");

  console.debug("這是debug");

  console.warn("這是warn");

  console.error("這是error");

加載時,控制台會顯示如下內容。

三、分組顯示

如果信息太多,可以分組顯示,用到的方法是console.group()和console.groupEnd()。

  console.group("第一組信息");

    console.log("第一組第一條");

    console.log("第一組第二條");

  console.groupEnd();

  console.group("第二組信息");

    console.log("第二組第一條");

    console.log("第二組第二條");

  console.groupEnd();

點擊組標題,該組信息會折疊或展開。

四、console.dir()

console.dir()可以顯示一個對象所有的屬性和方法。

比如,現在為第二節的dog對象,添加一個bark()方法。

  dog.bark = function(){alert("汪汪汪");};

然后,顯示該對象的內容,

  console.dir(dog);

五、console.dirxml()

console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml代碼。

比如,先獲取一個表格節點,

  var table = document.getElementById("table1");

然后,顯示該節點包含的代碼。

  console.dirxml(table);

六、console.assert()

console.assert()用來判斷一個表達式或變量是否為真。如果結果為否,則在控制台輸出一條相應信息,並且拋出一個異常。

比如,下面兩個判斷的結果都為否。

  var result = 0;

  console.assert( result );

  var year = 2000;

  console.assert(year == 2011 );

七、console.trace()

console.trace()用來追蹤函數的調用軌跡。

比如,有一個加法器函數。

  function add(a,b){

    return a+b;

  }

我想知道這個函數是如何被調用的,在其中加入console.trace()方法就可以了。

  function add(a,b){

    console.trace();

    return a+b;

  }

假定這個函數的調用代碼如下:

  var x = add3(1,1);

  function add3(a,b){return add2(a,b);}

  function add2(a,b){return add1(a,b);}

  function add1(a,b){return add(a,b);}

運行后,會顯示add()的調用軌跡,從上到下依次為add()、add1()、add2()、add3()。

八、計時功能

console.time()和console.timeEnd(),用來顯示代碼的運行時間。

  console.time("計時器一");

  for(var i=0;i<1000;i++){

    for(var j=0;j<1000;j++){}

  }

  console.timeEnd("計時器一");


九、兼容沒有調試控制台的瀏覽器
對於缺少調試控制台的老版本瀏覽器,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控制台中可以看到,不同日志級別的打印信息,其顏色和圖標是不一樣的;同時,可以在控制台中選擇不同的日志級別來對這些信息進行過濾: 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM