瀏覽器內建Console函數使用詳解

標籤：des   cWeb   style   blog   http   java   color   使用   

瀏覽器內建Console函數比較好用：Chrome 和 FireFox(Firebug外掛程式)  

利用此功能可以像直接在面板裡面運行JS一樣(寫法不同而已)

 

一、顯示資訊的命令

Firebug內建一個console對象，提供5種方法，用來顯示資訊。

最簡單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網頁指令碼中使用console.log("Hello World")，載入時控制台就會自動顯示如下內容。

另外4種寫法：

console.info("這是info");
console.debug("這是debug");
console.warn("這是warn");
console.error("這是error");

 

二、預留位置

只支援字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。

 

三、分組顯示

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

 

四、console.dir()：顯示對象所有的屬性和方法

 

 

五、console.dirxml()：顯示頁面節點（node）包含的html/xml代碼

 

 

六、console.assert() ：判斷運算式或變數是否為真

如果結果為否，則在控制台輸出一條相應資訊，並且拋出一個異常。

 

七、console.trace() ：追蹤函數的調用軌跡

比如頁面有js函數

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

 

八、計時功能

 

九、效能分析

效能分析（Profiler）就是剖析器各個部分的已耗用時間，找出瓶頸所在，使用的方法是console.profile()。

假定有一個函數Foo()，裡面調用了另外兩個函數funcA()和funcB()，其中funcA()調用10次，funcB()調用1次。

function Foo(){  for(var i=0;i<10;i++){funcA(1000);}  funcB(10000);}function funcA(count){　　for(var i=0;i<count;i++){}}function funcB(count){   for(var i=0;i<count;i++){}}

然後，就可以分析Foo()的運行效能了。

console.profile(‘效能分析器一‘);Foo();console.profileEnd();

標題列提示，一共運行了12個函數，共耗時2.656毫秒。其中funcA()運行10次，耗時1.391毫秒，最短已耗用時間0.123毫秒，最長0.284毫秒，平均0.139毫秒；funcB()運行1次，耗時1.229ms毫秒。

除 了使用console.profile()方法，firebug還提供了一個"概況"（Profiler）按鈕。第一次點擊該按鈕，"效能分析" 開始，你可以對網頁進行某種操作（比如ajax操作），然後第二次點擊該按鈕，"效能分析"結束，該操作引發的所有運算就會進行效能分析。

 

十、屬性菜單

控制檯面板的名稱後面，有一個倒三角，點擊後會顯示內容菜單。

預設情況下，控制台只顯示Javascript錯誤。如果選中Javascript警告、CSS錯誤、XML錯誤都送上，則相關的提示資訊都會顯示。

這裡比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請求。選中以後，網頁的所有ajax請求，都會在控制檯面板顯示出來。

比如，點擊一個YUI樣本，控制台就會告訴我們，它用ajax方式發出了一個GET請求，http請求和響應的頭資訊和內容主體，也都可以看到。

 

來源：http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html