如何實現監聽 console.log

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

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

2、console下有哪些方法

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

　　console.info("這是info");

　　console.debug("這是debug");

　　console.warn("這是warn");

　　console.error("這是error");

加載時，控制檯會顯示以下內容。

3、分組顯示

若是信息太多，能夠分組顯示，用到的方法是console.group()和console.groupEnd()。

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

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

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

　　console.groupEnd();

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

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

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

　　console.groupEnd();

點擊組標題，該組信息會摺疊或展開。

4、console.dir()

console.dir()能夠顯示一個對象全部的屬性和方法。

好比，如今爲第二節的dog對象，添加一個bark()方法。

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

而後，顯示該對象的內容，

　　console.dir(dog);

5、console.dirxml()

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

好比，先獲取一個表格節點，

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

而後，顯示該節點包含的代碼。

　　console.dirxml(table);

6、console.assert()

console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否，則在控制檯輸出一條相應信息，而且拋出一個異常。

好比，下面兩個判斷的結果都爲否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

7、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()。

8、計時功能

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

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

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

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

　　}

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

9、兼容沒有調試控制檯的瀏覽器
對於缺乏調試控制檯的老版本瀏覽器，window中的console對象並不存在，所以直接使用console.log()語句可能會在瀏覽器內部形成錯誤(空指針錯誤)，並最終致使某些老版本瀏覽器的崩潰。爲了解決這一問題，能夠人爲定義console對象，並聲明該console對象的log函數爲空函數；這樣，當console.log()語句執行時，這些老版本的瀏覽器將不會作任何事情：

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

不過，在大多數狀況下，沒有必要去作這種兼容性工做 — console.log()等調試代碼應當從最終的產品代碼中刪除掉。
10、使用參數
與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.」
11、使用其它日誌級別
除了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控制檯中能夠看到，不一樣日誌級別的打印信息，其顏色和圖標是不同的；同時，能夠在控制檯中選擇不一樣的日誌級別來對這些信息進行過濾：